Whatsapp Like Chat Audio Message Layout XML for Android

Are you working on a chat or a social media application and need to create an Audio Message layout? You don’t need to reinvent the wheel. Following is the design of Whatsapp like chat Audio message layout XML for Android. It contains 2 XML layouts. One for Audio incoming message and other for Audio outgoing message. The screenshot of the layout is following.

Whatsapp Like Chat Audio Message Layout XML for Android
Whatsapp Like Chat Audio Message Layout XML for Android

Audio Message Layout XML Files

audio_item_out.xml File

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="7dp"
    android:layout_marginBottom="3dp"
    >

    <RelativeLayout
        android:id="@+id/message_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="15dp"
        android:layout_marginTop="5dp">

        <androidx.cardview.widget.CardView
            android:id="@+id/cardView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="?android:attr/actionBarSize"
            app:cardCornerRadius="8dp"
            app:cardElevation="0dp"
            app:cardBackgroundColor="#5089fa"
            >

            <LinearLayout
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:layout_gravity="left|center_vertical"
                >

                <FrameLayout
                    android:id="@+id/play_audio_lay"
                    android:layout_width="30dp"
                    android:layout_height="50dp"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="10dp"
                    >

                    <ImageView
                        android:id="@+id/thumbnail_video_icon"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_gravity="center"
                        android:src="@drawable/ic_play"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingBottom="5dp"
                        android:tint="#FFFFFF"/>

                    <ProgressBar
                        android:id="@+id/progress_bar"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="5dp"
                        android:visibility="gone"
                        />

                </FrameLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:layout_weight="1"
                    android:layout_marginTop="15dp"
                    android:orientation="vertical">

                    <SeekBar
                        android:id="@+id/progressBar2"
                        style="?android:attr/progressBarStyleHorizontal"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:minHeight="2dip"
                        android:progressTint="#FFFFFF"
                        android:thumbTint="#FFFFFF" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="end"
                        android:orientation="horizontal"
                        android:padding="2dp">

                        <TextView
                            android:id="@+id/txt_audio_time"
                            android:layout_width="92dp"
                            android:layout_height="wrap_content"
                            android:layout_gravity="left|bottom"
                            android:layout_weight="1"
                            android:gravity="bottom|center|left"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textColor="#FFFFFF"
                            android:textSize="10.00sp"
                            android:text="02:10" />

                        <TextView
                            android:id="@+id/date_text"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:layout_marginRight="8dp"
                            android:text="03:50 am"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textColor="#FFFFFF"
                            android:textSize="10sp" />

                        <ImageView
                            android:id="@+id/msg_status_icon_chat"
                            android:layout_width="16dp"
                            android:layout_height="16dp"
                            android:layout_gravity="center_vertical"
                            android:layout_marginRight="8dp"
                            android:src="@drawable/ic_tick"
                            android:tint="#FFFFFF"/>

                    </LinearLayout>
                </LinearLayout>

            </LinearLayout>

        </androidx.cardview.widget.CardView>

    </RelativeLayout>
</RelativeLayout>

audio_item_in.xml File

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="7dp"
    android:layout_marginBottom="3dp"
    >

    <RelativeLayout
        android:id="@+id/message_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp">

        <TextView
            android:id="@+id/username_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:lines="1"
            android:ellipsize="end"
            android:textStyle="bold"
            android:textSize="14sp"
            android:textColor="#5089fa"
            android:text="Alexandre"
            android:layout_marginBottom="5dp"/>

        <androidx.cardview.widget.CardView
            android:id="@+id/cardView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="?android:attr/actionBarSize"
            app:cardCornerRadius="8dp"
            app:cardElevation="0dp"
            android:layout_below="@+id/username_text">

            <LinearLayout
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:layout_gravity="left|center_vertical">

                <FrameLayout
                    android:id="@+id/play_audio_lay"
                    android:layout_width="30dp"
                    android:layout_height="50dp"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="10dp">

                    <ImageView
                        android:id="@+id/thumbnail_video_icon"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_gravity="center"
                        android:src="@drawable/ic_play"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingBottom="5dp"/>

                    <ProgressBar
                        android:id="@+id/progress_bar"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="5dp"
                        android:visibility="gone"
                        />

                </FrameLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:layout_weight="1"
                    android:layout_marginTop="15dp"
                    android:orientation="vertical">

                    <SeekBar
                        android:id="@+id/progressBar2"
                        style="?android:attr/progressBarStyleHorizontal"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:minHeight="2dip"
                        android:progressTint="#5089fa"
                        android:thumbTint="#5089fa" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="end"
                        android:orientation="horizontal"
                        android:padding="2dp">

                        <TextView
                            android:id="@+id/txt_audio_time"
                            android:layout_width="wrap_content"
                            android:layout_height="15dp"
                            android:layout_gravity="left|bottom"
                            android:layout_weight="1"
                            android:gravity="bottom|center|left"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textColor="#5089fa"
                            android:textSize="10.00sp"
                            android:text="01:05" />

                        <TextView
                            android:id="@+id/date_text"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:layout_marginRight="8dp"
                            android:text="03:50 am"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textColor="#5089fa"
                            android:textSize="10sp" />

                    </LinearLayout>
                </LinearLayout>

            </LinearLayout>

        </androidx.cardview.widget.CardView>

    </RelativeLayout>
</RelativeLayout>

In the above code, 2 Drawables ic_play & ic_tick are also used. These Drawables are the following.

ic_play.xml Drawable

<vector android:height="30dp" android:viewportHeight="373.008"
    android:viewportWidth="373.008" android:width="30dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M61.792,2.588C64.771,0.864 68.105,0 71.444,0c3.33,0 6.663,0.864 9.655,2.588l230.116,167.2c5.963,3.445 9.656,9.823 9.656,16.719c0,6.895 -3.683,13.272 -9.656,16.713L81.099,370.427c-5.972,3.441 -13.334,3.441 -19.302,0c-5.973,-3.453 -9.66,-9.833 -9.66,-16.724V19.305C52.137,12.413 55.818,6.036 61.792,2.588z"/>
</vector>

ic_tick.xml Drawable

<vector android:height="16dp" android:viewportHeight="594.149"
    android:viewportWidth="594.149" android:width="16dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M448.8,161.925l-35.7,-35.7l-160.65,160.65l35.7,35.7L448.8,161.925zM555.899,126.225l-267.75,270.3l-107.1,-107.1l-35.7,35.7l142.8,142.8l306,-306L555.899,126.225zM0,325.125l142.8,142.8l35.7,-35.7l-142.8,-142.8L0,325.125z"/>
</vector>

Don’t forget to add following Cardview library dependency in your App level build.gradle file.

If you are using Androidx

implementation 'androidx.cardview:cardview:1.0.0'

If you are using support library

compile 'com.android.support:cardview-v7:+'

You can use these audio layouts if you are designing XML layouts for a chat application. In your RecyclerView.Adapter, you can populate these on runtime, depending upon incoming and outgoing message types. If you are not familiar with it, you can read our following guide.

How to Populate Multiple Layouts in RecyclerView

You can also find other useful helping articles and tutorials in our Coding Articles & Tutorials Knowledge Base.

Please share this post:
Native Mobile Application Developer (Android + IOS) having experience in Java, Swift, Kotlin, Objective C, Unity, C#, C/C++, NODE JS & PHP.

One thought on “Whatsapp Like Chat Audio Message Layout XML for Android

  1. Just a smiling visitant here to share the love (:, btw great design. “He profits most who serves best.” by Arthur F. Sheldon.

Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

%d bloggers like this: