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.
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.
Just a smiling visitant here to share the love (:, btw great design. “He profits most who serves best.” by Arthur F. Sheldon.