安卓实现微信聊天气泡

一搜没一个能用的，我来：

布局文件：

XML 复制代码

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/history_time"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:text="05月25日 22:14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <com.xmkjsoft.xhgh.self.CircularImageView
        android:src="@color/main_color"
        android:id="@+id/head_img"
        app:layout_constraintTop_toBottomOf="@id/history_time"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_width="40dp"
        android:layout_height="40dp"/>


        <!-- 聊天气泡中的内容，如文本、图片等 -->
        <TextView
            app:layout_constraintTop_toTopOf="@id/head_img"
            app:layout_constraintLeft_toRightOf="@id/head_img"
            app:layout_constraintRight_toRightOf="parent"
            android:background="@drawable/left_chat_bubble"
            android:layout_marginRight="20dp"
            android:id="@+id/message_text_left"
            android:layout_width="0dp"
            android:paddingLeft="20dp"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:layout_height="wrap_content"
            android:text="这是一个左这是一个左这是一个左这是一个这是一个左这是一个左这是一个一个这是一个左这是一个左"
            android:textColor="@color/white"
            android:textSize="16sp" />




    <!--右消息-->

    <com.xmkjsoft.xhgh.self.CircularImageView
        android:layout_marginTop="20dp"
        android:src="@color/main_color"
        android:id="@+id/head_img_right"
        app:layout_constraintTop_toBottomOf="@id/message_text_left"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="40dp"
        android:layout_height="40dp"/>


    <!-- 聊天气泡中的内容，如文本、图片等 -->
    <TextView
        app:layout_constraintTop_toTopOf="@id/head_img_right"
        app:layout_constraintRight_toLeftOf="@id/head_img_right"
        app:layout_constraintLeft_toLeftOf="parent"
        android:background="@drawable/right_chat_bubble"
        android:layout_marginLeft="20dp"
        android:id="@+id/message_text_right"
        android:layout_width="0dp"
        android:paddingRight="10dp"
        android:paddingLeft="10dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:layout_height="wrap_content"
        android:text="这是一个左这是一个左这是一个左这是一个这是一个左这是一个左这是一个一个这是一个左这是一个左"
        android:textColor="@color/white"
        android:textSize="16sp" />


<!--    <TextView-->
<!--        android:background="@drawable/left_chat_bubble"-->
<!--        android:layout_marginLeft="20dp"-->
<!--        android:text="你好6666666666"-->
<!--        -->
<!--        android:layout_width="wrap_content"-->
<!--        android:layout_height="wrap_content"/>-->





</androidx.constraintlayout.widget.ConstraintLayout>

左边气泡 drawable 文件：

XML 复制代码

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item android:left="8dp">
                <shape>
                    <corners android:radius="4dp" />
                    <solid android:color="@color/main_color" />
                </shape>
            </item>
        </layer-list>
    </item>
    <item
        android:gravity="left|top"
        android:top="10dp">
        <rotate
            android:fromDegrees="45"
            android:pivotX="50%"
            android:pivotY="135%">
            <shape android:shape="rectangle">
                <size
                    android:width="8dp"
                    android:height="8dp" />
                <solid android:color="@color/main_color" />
            </shape>
        </rotate>
    </item>
</layer-list>

右边气泡 drawable 文件：

XML 复制代码

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item android:right="8dp">
                <shape>
                    <corners android:radius="4dp" />
                    <solid android:color="#4CAF50" />
                </shape>
            </item>
        </layer-list>
    </item>
    <item
        android:gravity="right|top"
        android:top="0dp">
        <rotate
            android:fromDegrees="45"
            android:pivotX="-135%"
            android:pivotY="50%">
            <shape android:shape="rectangle">
                <size
                    android:width="8dp"
                    android:height="8dp" />
                <solid android:color="#4CAF50" />
            </shape>
        </rotate>
    </item>
</layer-list>