diff --git a/app/src/main/res/drawable/base_circle_4dff91.xml b/app/src/main/res/drawable/base_circle_4dff91.xml
new file mode 100644
index 000000000..7b32c9873
--- /dev/null
+++ b/app/src/main/res/drawable/base_circle_4dff91.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+    <solid android:color="#FF4DFF91" />
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/base_shape_4d000000_8dp.xml b/app/src/main/res/drawable/base_shape_4d000000_8dp.xml
new file mode 100644
index 000000000..d4a6e687f
--- /dev/null
+++ b/app/src/main/res/drawable/base_shape_4d000000_8dp.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="#4D000000" />
+    <corners android:radius="@dimen/dp_8" />
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/base_shape_4d000000_9dp.xml b/app/src/main/res/drawable/base_shape_4d000000_9dp.xml
new file mode 100644
index 000000000..57a2e3595
--- /dev/null
+++ b/app/src/main/res/drawable/base_shape_4d000000_9dp.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="#4D000000" />
+    <corners android:radius="@dimen/dp_9" />
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/home_bg_audio.xml b/app/src/main/res/drawable/home_bg_audio.xml
new file mode 100644
index 000000000..23f8642fd
--- /dev/null
+++ b/app/src/main/res/drawable/home_bg_audio.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <gradient
+        android:endColor="#B3FEFEFF"
+        android:startColor="#FFFFFF"
+        android:type="linear" />
+    <corners android:radius="@dimen/dp_12" />
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/home_bg_friends_room_info.xml b/app/src/main/res/drawable/home_bg_friends_room_info.xml
new file mode 100644
index 000000000..a15df0410
--- /dev/null
+++ b/app/src/main/res/drawable/home_bg_friends_room_info.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <gradient
+        android:angle="180"
+        android:endColor="#fffff5d2"
+        android:startColor="#00ffe680"
+        android:type="linear" />
+    <corners
+        android:bottomLeftRadius="100dp"
+        android:bottomRightRadius="0dp"
+        android:topLeftRadius="100dp"
+        android:topRightRadius="0dp" />
+
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/home_ic_audio_pause.xml b/app/src/main/res/drawable/home_ic_audio_pause.xml
new file mode 100644
index 000000000..199315b2b
--- /dev/null
+++ b/app/src/main/res/drawable/home_ic_audio_pause.xml
@@ -0,0 +1,24 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <path
+      android:pathData="M8,8m-8,0a8,8 0,1 1,16 0a8,8 0,1 1,-16 0"
+      android:strokeWidth="1"
+      android:fillColor="#FFDA24"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M5.778,4.444L5.778,4.444A1.333,1.333 0,0 1,7.111 5.778L7.111,10.222A1.333,1.333 0,0 1,5.778 11.556L5.778,11.556A1.333,1.333 0,0 1,4.444 10.222L4.444,5.778A1.333,1.333 0,0 1,5.778 4.444z"
+      android:strokeWidth="1"
+      android:fillColor="#FFFFFF"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M10.222,4.444L10.222,4.444A1.333,1.333 0,0 1,11.556 5.778L11.556,10.222A1.333,1.333 0,0 1,10.222 11.556L10.222,11.556A1.333,1.333 0,0 1,8.889 10.222L8.889,5.778A1.333,1.333 0,0 1,10.222 4.444z"
+      android:strokeWidth="1"
+      android:fillColor="#FFFFFF"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+</vector>
diff --git a/app/src/main/res/drawable/home_ic_audio_play.xml b/app/src/main/res/drawable/home_ic_audio_play.xml
new file mode 100644
index 000000000..c2b0bafe7
--- /dev/null
+++ b/app/src/main/res/drawable/home_ic_audio_play.xml
@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <path
+      android:pathData="M8,8m-8,0a8,8 0,1 1,16 0a8,8 0,1 1,-16 0"
+      android:strokeWidth="1"
+      android:fillColor="#FFDA24"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M10.631,9.36L8.053,11.293C7.302,11.857 6.237,11.704 5.673,10.953C5.453,10.659 5.333,10.301 5.333,9.933L5.333,6.067C5.333,5.128 6.094,4.367 7.033,4.367C7.401,4.367 7.759,4.486 8.053,4.707L10.631,6.64C11.382,7.203 11.534,8.269 10.971,9.02C10.874,9.149 10.76,9.263 10.631,9.36Z"
+      android:strokeWidth="1"
+      android:fillColor="#FFFFFF"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+</vector>
diff --git a/app/src/main/res/drawable/home_ic_audio_playing.xml b/app/src/main/res/drawable/home_ic_audio_playing.xml
new file mode 100644
index 000000000..7c73179c9
--- /dev/null
+++ b/app/src/main/res/drawable/home_ic_audio_playing.xml
@@ -0,0 +1,30 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="22dp"
+    android:height="10dp"
+    android:viewportWidth="22"
+    android:viewportHeight="10">
+  <path
+      android:pathData="M1.3,5.576l5.174,0l2.341,-4.615l1.594,8.215l1.936,-5.868l1.708,4.223l2.049,-2.69l2.277,2.69l2.277,-2.69"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.2"
+      android:fillColor="#00000000"
+      android:fillType="evenOdd"
+      android:strokeLineCap="square">
+    <aapt:attr name="android:strokeColor">
+      <gradient 
+          android:startX="1.117"
+          android:startY="5.063"
+          android:endX="20.471"
+          android:endY="5.063"
+          android:type="linear">
+        <item android:offset="0" android:color="#00FFD324"/>
+        <item android:offset="0.184" android:color="#7FFFD324"/>
+        <item android:offset="0.357" android:color="#FFFFCB1F"/>
+        <item android:offset="0.761" android:color="#BCFFD324"/>
+        <item android:offset="0.925" android:color="#33FFD324"/>
+        <item android:offset="1" android:color="#00FFD324"/>
+      </gradient>
+    </aapt:attr>
+  </path>
+</vector>
diff --git a/app/src/main/res/drawable/home_ic_room.xml b/app/src/main/res/drawable/home_ic_room.xml
new file mode 100644
index 000000000..ed22a36c5
--- /dev/null
+++ b/app/src/main/res/drawable/home_ic_room.xml
@@ -0,0 +1,22 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="14dp"
+    android:height="14dp"
+    android:viewportWidth="14"
+    android:viewportHeight="14">
+    <path
+        android:fillColor="#00000000"
+        android:fillType="evenOdd"
+        android:pathData="M7,1.587C7.545,1.587 8.09,1.765 8.543,2.12L8.543,2.12L11.376,4.342C11.98,4.816 12.333,5.541 12.333,6.309L12.333,6.309L12.333,10.525C12.333,10.939 12.165,11.314 11.894,11.586C11.623,11.857 11.248,12.025 10.833,12.025L10.833,12.025L3.167,12.025C2.752,12.025 2.377,11.857 2.106,11.586C1.835,11.314 1.667,10.939 1.667,10.525L1.667,10.525L1.667,6.309C1.667,5.541 2.02,4.816 2.624,4.342L2.624,4.342L5.457,2.12C5.91,1.765 6.455,1.587 7,1.587Z"
+        android:strokeWidth="1"
+        android:strokeColor="#FFB219"
+        android:strokeLineJoin="round" />
+    <group>
+        <clip-path android:pathData="M2.316,3.949L5.149,1.727C6.236,0.874 7.765,0.874 8.852,1.727L11.685,3.949C12.41,4.517 12.834,5.388 12.834,6.309L12.834,10.525C12.834,11.63 11.938,12.525 10.834,12.525L3.167,12.525C2.062,12.525 1.167,11.63 1.167,10.525L1.167,6.309C1.167,5.388 1.591,4.517 2.316,3.949Z" />
+        <path
+            android:fillColor="#FFB219"
+            android:fillType="evenOdd"
+            android:pathData="M6.851,8.376C7.058,8.315 7.111,8.338 7.149,8.376C7.187,8.414 7.21,8.467 7.21,8.525L7.21,8.525L7.21,11.485L6.79,11.485L6.79,8.525C6.79,8.467 6.813,8.414 6.851,8.376Z"
+            android:strokeWidth="0.913043478"
+            android:strokeColor="#FFB219" />
+    </group>
+</vector>
diff --git a/app/src/main/res/layout/home_friends_list_item.xml b/app/src/main/res/layout/home_friends_list_item.xml
index 6b4119f2c..6829d837b 100644
--- a/app/src/main/res/layout/home_friends_list_item.xml
+++ b/app/src/main/res/layout/home_friends_list_item.xml
@@ -1,15 +1,231 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
-    android:layout_height="100dp">
+    android:layout_height="wrap_content"
+    tools:background="#F5F5F7">
+
+    <com.nnbc123.app.common.widget.RectRoundImageView
+        android:id="@+id/iv_avatar"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:scaleType="centerCrop"
+        app:borderRadius="@dimen/dp_12"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toTopOf="parent"
+        app:type="round"
+        tools:src="@drawable/default_cover" />
+
+    <LinearLayout
+        android:id="@+id/layout_state"
+        android:layout_width="wrap_content"
+        android:layout_height="@dimen/dp_17"
+        android:layout_marginTop="@dimen/dp_4"
+        android:layout_marginEnd="@dimen/dp_4"
+        android:background="@drawable/base_shape_4d000000_9dp"
+        android:gravity="center_vertical"
+        android:orientation="horizontal"
+        app:layout_constraintEnd_toEndOf="@id/iv_avatar"
+        app:layout_constraintTop_toTopOf="@id/iv_avatar">
+
+        <ImageView
+            android:id="@+id/iv_state_leisure"
+            android:layout_width="@dimen/dp_5"
+            android:layout_height="@dimen/dp_5"
+            android:layout_marginStart="@dimen/dp_5"
+            android:layout_marginEnd="@dimen/dp_3"
+            android:src="@drawable/base_circle_4dff91"
+            android:visibility="gone"
+            tools:visibility="visible" />
+
+        <ImageView
+            android:id="@+id/iv_state_live"
+            android:layout_width="@dimen/dp_10"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/dp_5"
+            android:layout_marginEnd="@dimen/dp_3"
+            android:visibility="gone" />
+
+        <TextView
+            android:id="@+id/tv_state"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="@dimen/dp_5"
+            android:textColor="@color/white"
+            android:textSize="@dimen/dp_9"
+            tools:text="空闲中" />
+    </LinearLayout>
+
+    <ImageView
+        android:id="@+id/iv_partner"
+        android:layout_width="48dp"
+        android:layout_height="16dp"
+        android:layout_marginStart="@dimen/dp_6"
+        android:layout_marginTop="@dimen/dp_5"
+        android:visibility="gone"
+        app:layout_constraintStart_toStartOf="@id/iv_avatar"
+        app:layout_constraintTop_toTopOf="@id/iv_avatar"
+        tools:src="@drawable/default_cover"
+        tools:visibility="visible" />
+
+    <ImageView
+        android:id="@+id/iv_content_bg"
+        android:layout_width="match_parent"
+        android:layout_height="@dimen/dp_54"
+        android:layout_marginTop="-38dp"
+        android:background="@drawable/shape_white_12dp_round"
+        app:layout_constraintTop_toBottomOf="@id/iv_avatar" />
+
+    <LinearLayout
+        android:id="@+id/layout_audio"
+        android:layout_width="wrap_content"
+        android:layout_height="@dimen/dp_18"
+        android:layout_marginStart="@dimen/dp_6"
+        android:layout_marginBottom="@dimen/dp_4"
+        android:background="@drawable/home_bg_audio"
+        android:gravity="center_vertical"
+        android:visibility="gone"
+        app:layout_constraintBottom_toTopOf="@id/iv_content_bg"
+        app:layout_constraintStart_toStartOf="@id/iv_avatar"
+        tools:visibility="visible">
+
+        <ImageView
+            android:id="@+id/iv_audio_btn"
+            android:layout_width="@dimen/dp_16"
+            android:layout_height="@dimen/dp_16"
+            android:src="@drawable/home_ic_audio_play" />
+
+        <com.opensource.svgaplayer.SVGAImageView
+            android:id="@+id/liv_user"
+            android:layout_width="@dimen/dp_22"
+            android:layout_height="@dimen/dp_10"
+            android:layout_marginStart="@dimen/dp_1"
+            android:src="@drawable/home_ic_audio_playing"
+            app:autoPlay="false"
+            app:clearsAfterDetached="true" />
+
+        <TextView
+            android:id="@+id/tv_audio_duration"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/dp_1"
+            android:layout_marginEnd="@dimen/dp_5"
+            android:ellipsize="end"
+            android:maxWidth="100dp"
+            android:maxLines="1"
+            android:text="0”"
+            android:textColor="#2B2D33"
+            android:textSize="@dimen/dp_10" />
+    </LinearLayout>
+
+    <TextView
+        android:id="@+id/tv_game_name"
+        android:layout_width="wrap_content"
+        android:layout_height="@dimen/dp_13"
+        android:layout_marginStart="@dimen/dp_10"
+        android:layout_marginEnd="@dimen/dp_4"
+        android:layout_marginBottom="@dimen/dp_5"
+        android:background="@drawable/base_shape_4d000000_8dp"
+        android:ellipsize="end"
+        android:gravity="center_vertical"
+        android:includeFontPadding="false"
+        android:maxLines="1"
+        android:paddingStart="@dimen/dp_16"
+        android:paddingEnd="@dimen/dp_4"
+        android:textColor="@color/white"
+        android:textSize="@dimen/dp_7"
+        app:layout_constrainedWidth="true"
+        app:layout_constraintBottom_toTopOf="@id/iv_content_bg"
+        app:layout_constraintEnd_toEndOf="@id/iv_avatar"
+        app:layout_constraintHorizontal_bias="1"
+        app:layout_constraintStart_toEndOf="@id/layout_audio"
+        tools:text="英雄联盟｜王者荣耀" />
+
+    <ImageView
+        android:id="@+id/iv_game_icon"
+        android:layout_width="@dimen/dp_15"
+        android:layout_height="@dimen/dp_15"
+        app:layout_constraintBottom_toBottomOf="@id/tv_game_name"
+        app:layout_constraintStart_toStartOf="@id/tv_game_name"
+        app:layout_constraintTop_toTopOf="@id/tv_game_name"
+        tools:src="@drawable/default_cover" />
+
+    <androidx.constraintlayout.widget.Group
+        android:id="@+id/group_game"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:visibility="gone"
+        app:constraint_referenced_ids="tv_game_name,iv_game_icon"
+        tools:visibility="visible" />
 
     <TextView
         android:id="@+id/tv_name"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:gravity="center"
-        android:textSize="20sp"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/dp_8"
+        android:layout_marginEnd="@dimen/dp_5"
+        android:ellipsize="end"
+        android:maxLines="1"
+        android:textColor="#2B2D33"
+        android:textSize="@dimen/dp_12"
+        android:textStyle="bold"
+        app:layout_constraintBottom_toTopOf="@id/layout_room_info"
+        app:layout_constraintEnd_toStartOf="@id/iv_constellation"
+        app:layout_constraintStart_toStartOf="@id/iv_content_bg"
+        app:layout_constraintTop_toTopOf="@id/iv_content_bg"
+        app:layout_constraintVertical_chainStyle="packed"
+        app:layout_goneMarginBottom="@dimen/dp_9"
         tools:text="Name" />
 
+    <ImageView
+        android:id="@+id/iv_constellation"
+        android:layout_width="39dp"
+        android:layout_height="15dp"
+        android:layout_marginEnd="@dimen/dp_8"
+        app:layout_constraintBottom_toBottomOf="@id/tv_name"
+        app:layout_constraintEnd_toEndOf="@id/iv_content_bg"
+        app:layout_constraintTop_toTopOf="@id/tv_name"
+        tools:src="@drawable/default_cover" />
+
+    <LinearLayout
+        android:id="@+id/layout_room_info"
+        android:layout_width="0dp"
+        android:layout_height="@dimen/dp_18"
+        android:layout_marginHorizontal="@dimen/dp_6"
+        android:layout_marginTop="@dimen/dp_3"
+        android:background="@drawable/home_bg_friends_room_info"
+        android:gravity="center_vertical"
+        android:orientation="horizontal"
+        android:visibility="gone"
+        app:layout_constraintBottom_toBottomOf="@id/iv_content_bg"
+        app:layout_constraintEnd_toEndOf="@id/iv_content_bg"
+        app:layout_constraintStart_toStartOf="@id/iv_content_bg"
+        app:layout_constraintTop_toBottomOf="@id/tv_name"
+        tools:visibility="visible">
+
+        <ImageView
+            android:layout_width="@dimen/dp_14"
+            android:layout_height="@dimen/dp_14"
+            android:layout_marginStart="@dimen/dp_6"
+            android:src="@drawable/home_ic_room" />
+
+        <com.nnbc123.app.avroom.widget.FixRoomTitleTextView
+            android:id="@+id/room_title"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/dp_2"
+            android:ellipsize="marquee"
+            android:focusable="true"
+            android:focusableInTouchMode="true"
+            android:gravity="center_vertical"
+            android:marqueeRepeatLimit="marquee_forever"
+            android:maxWidth="80dp"
+            android:singleLine="true"
+            android:textColor="#696D7A"
+            android:textSize="@dimen/dp_10"
+            tools:text="和你和你一起分享和你一起分享和你一起分享一起分享" />
+
+    </LinearLayout>
+
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index a8b3a00ed..64661967a 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -195,6 +195,8 @@
     <dimen name="dp_24">24dp</dimen>
     <dimen name="dp_32">32dp</dimen>
     <dimen name="dp_6">6dp</dimen>
+    <dimen name="dp_42">42dp</dimen>
+    <dimen name="dp_54">54dp</dimen>
 
     <dimen name="all_service_three_dialog_height">242dp</dimen>
     <dimen name="all_service_two_dialog_height">230dp</dimen>