安卓可绘制语音气泡

Question

我已经寻找了好几天，但是找不到关于如何绘制气泡以及在哪里绘制九宫格图像并将其用作背景的好方法。我不擅长画画。有人可以帮忙吗？

我找到的最好示例在Stack Overflow上，但是它是用Objective C编写的。

如何在iPhone上绘制“对话框气泡”？

- user1024776

---

你尝试过使用图片并将其制作为九宫格吗？ - blessanm86

检查我的答案。这正是你所需要的。 - Alireza Noorali

Answer 1

如果您正在创建聊天界面，您可能会希望实现一个传入的聊天气泡和一个发出的聊天气泡。以下是我如何做到这一点：

shape_bg_incoming_bubble.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="-45"
            android:pivotX="0%"
            android:pivotY="0%"
            android:toDegrees="0" >
            <shape android:shape="rectangle" >
                <solid android:color="@color/primary" />
            </shape>
        </rotate>
    </item>
    <item android:left="16dp">
        <shape android:shape="rectangle" >
            <solid android:color="@color/primary" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

形状背景输出气泡.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="45"
            android:pivotX="100%"
            android:pivotY="0%"
            android:toDegrees="0" >
            <shape android:shape="rectangle" >
                <solid android:color="@color/grey_500" />
            </shape>
        </rotate>
    </item>
    <item android:right="16dp">
        <shape android:shape="rectangle" >
            <solid android:color="@color/grey_500" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

- Etienne Lawlor

---

如何旋转 .xml 文件中的整个形状？在布局文件中实现时显示为垂直。 - grantespo

如何在shape_bg_incoming_bubble.xml中为右上角设置圆角半径。 - kondal

为了解决这个缺少圆角的问题，将第一个“item”中的“<solid android:color =“@ color / grey_500”/>”替换为“<stroke android:width =“8dp”android： color =“@ color / grey_500”/>”，并将“android:width =“8dp””设置为您半径的两倍。（如果您的半径是“4dp”，请将其设置为“8dp”）。 - Nathan F.

如果颜色是透明的话，任何东西都不会看起来正常。 - basaveshwar lamture

Answer 2

我知道现在可能有些晚了。对于那些不想使用9-patch图像但仍想从聊天气泡中投射阴影的人，这是我能接近WhatsApp聊天气泡的最佳方式。感谢@toobsco42上面的回答。

以下是代码：

Incoming Speech Bubble :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<!--Shadow Layers-->

<item>
    <rotate
        android:fromDegrees="-35"
        android:pivotX="0%"
        android:pivotY="0%"
        android:toDegrees="0">
        <shape android:shape="rectangle">
            <corners android:radius="4dp"/>
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"/>
            <solid android:color="#01000000" />
        </shape>
    </rotate>
</item>
<item android:left="8dp">
    <shape android:shape="rectangle">
        <padding
            android:bottom="1px"
            android:left="1px"
            android:right="1px"/>
        <solid android:color="#01000000" />
        <corners android:radius="8dp" />
    </shape>
</item>

<!--===============-->
<item>
    <rotate
        android:fromDegrees="-35"
        android:pivotX="0%"
        android:pivotY="0%"
        android:toDegrees="0">
        <shape android:shape="rectangle">
            <corners android:radius="4dp"/>
            <padding
                android:bottom="1px" />
            <solid android:color="#09000000" />
        </shape>
    </rotate>
</item>
<item android:left="8dp">
    <shape android:shape="rectangle">
        <padding
            android:bottom="1px" />
        <solid android:color="#09000000" />
        <corners android:radius="8dp" />
    </shape>
</item>

<!--===============-->

<item>
    <rotate
        android:fromDegrees="-35"
        android:pivotX="0%"
        android:pivotY="0%"
        android:toDegrees="0">
        <shape android:shape="rectangle">
            <corners android:radius="4dp"/>
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"/>
            <solid android:color="#10000000" />
        </shape>
    </rotate>
</item>
<item android:left="8dp">
    <shape android:shape="rectangle">
        <padding
            android:bottom="1px"
            android:left="1px"
            android:right="1px"/>
        <solid android:color="#10000000" />
        <corners android:radius="8dp" />
    </shape>
</item>

<!--ForeGround-->

<item>
    <rotate
        android:fromDegrees="-35"
        android:pivotX="0%"
        android:pivotY="0%"
        android:toDegrees="0">
        <shape android:shape="rectangle">
            <corners android:radius="4dp"/>
            <solid android:color="@color/colorWhite" />
        </shape>
    </rotate>
</item>
<item android:left="8dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/colorWhite" />
        <corners android:radius="8dp" />
    </shape>
</item>

</layer-list>

发出的言语气泡：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<!--Shadow Layer-->

<item>
    <rotate
        android:fromDegrees="40"
        android:pivotX="100%"
        android:pivotY="0%"
        android:toDegrees="0">
        <shape android:shape="rectangle">
            <corners android:radius="4dp" />
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px" />
            <solid android:color="#01000000" />
        </shape>
    </rotate>
</item>
<item android:right="10dp">
    <shape android:shape="rectangle">
        <corners android:radius="4dp" />
        <padding
            android:bottom="1px"
            android:left="1px"
            android:right="1px" />
        <solid android:color="#01000000" />
    </shape>
</item>

<!--===============-->

<item>
    <rotate
        android:fromDegrees="40"
        android:pivotX="100%"
        android:pivotY="0%"
        android:toDegrees="0">
        <shape android:shape="rectangle">
            <corners android:radius="4dp" />
            <padding android:bottom="1px" />
            <solid android:color="#09000000" />
        </shape>
    </rotate>
</item>
<item android:right="10dp">
    <shape android:shape="rectangle">
        <corners android:radius="4dp" />
        <padding android:bottom="1px" />
        <solid android:color="#09000000" />
    </shape>
</item>

<!--===============-->

<item>
    <rotate
        android:fromDegrees="40"
        android:pivotX="100%"
        android:pivotY="0%"
        android:toDegrees="0">
        <shape android:shape="rectangle">
            <corners android:radius="4dp" />
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px" />
            <solid android:color="#10000000" />
        </shape>
    </rotate>
</item>
<item android:right="10dp">
    <shape android:shape="rectangle">
        <corners android:radius="4dp" />
        <padding
            android:bottom="1px"
            android:left="1px"
            android:right="1px" />
        <solid android:color="#10000000" />
    </shape>
</item>

<!--===============-->


<!--ForeGround-->

<item>
    <rotate
        android:fromDegrees="40"
        android:pivotX="100%"
        android:pivotY="0%"
        android:toDegrees="0">
        <shape android:shape="rectangle">
            <solid android:color="#CBEBFC" />
        </shape>
    </rotate>
</item>
<item android:right="10dp">
    <shape android:shape="rectangle">
        <solid android:color="#CBEBFC" />
        <corners android:radius="4dp" />
    </shape>
</item>

</layer-list>

在布局中正确使用边距填充。我使用了这些值：

<TextView
    android:id="@+id/text_message_incoming"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_speech_bubble_incoming"
    android:lineSpacingExtra="2dp"
    android:paddingLeft="20dp"
    android:paddingTop="4dp"
    android:paddingRight="10dp"
    android:paddingBottom="10dp"
    android:text="Hi, How are you?"
    android:textColor="@color/colorBlack"
    android:textSize="13.5dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_max="wrap"
    app:layout_constraintWidth_percent="0.8" />

我的输出结果如下所示：

- VipiN Negi

---

@HarviSirja 哦，太好了:D - Pratik Butani

非常好的答案，但是当气泡足够小时，矩形的宽度比三角形的宽度小，三角形会从左侧溢出。有没有剪裁三角形的解决方案？ - Thracian

我希望我能帮到你。我已经放弃了原生开发，现在转向Flutter。你可以尝试调整度数或者中心点的值。如果你成功了，随意在这里编辑我的答案。 - VipiN Negi

Answer 3

这是我制作的一个简单的对话框可绘制对象。希望它可以为某些人指明正确的方向。使用此可绘制对象的视图需要至少70-80dp的高度和类似的最小宽度才能正确显示。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:top="30dp">
        <rotate
            android:fromDegrees="-45"
            android:pivotX="0%"
            android:pivotY="0%"
            android:toDegrees="0" >
            <shape android:shape="rectangle" >
                <solid android:color="#CCC" />
            </shape>
        </rotate>
    </item>
    <item android:left="20dp">
        <shape android:shape="rectangle" >
            <solid android:color="#CCC" />

            <corners android:radius="5dp" />
        </shape>
    </item>

</layer-list>

在绘制稍微复杂一点的任何东西时，Android Drawables 的可用性令人不满。

这个版本看起来像这样：

更新 我们重新开始使用 XML 聊天气泡，并对我2014年的解决方案感到有些不满意。在2018年，我们可以使用矢量图形（vector drawables）找到更好的解决方案。以下是一些现代化的替代方案。它们允许使用小信息和透明度等功能。

speech_bubble_simple_user.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" >

    <item
        android:bottom="@dimen/speech_bubble_tail"
        tools:width="100dp"
        tools:height="50dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/speech_bubble_user"/>
            <corners
                android:topLeftRadius="@dimen/speech_bubble_corners"
                android:topRightRadius="@dimen/speech_bubble_corners"
                android:bottomRightRadius="0dp"
                android:bottomLeftRadius="@dimen/speech_bubble_corners"/>
        </shape>
    </item>

    <item
        android:width="@dimen/speech_bubble_tail"
        android:height="@dimen/speech_bubble_tail"
        android:gravity="bottom|right">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="@dimen/speech_bubble_tail"
            android:height="@dimen/speech_bubble_tail"
            android:viewportWidth="25.0"
            android:viewportHeight="25.0">
            <path
                android:pathData="M25,25 25,0 0,0z"
                android:fillColor="@color/speech_bubble_user"/>
        </vector>
    </item>

</layer-list>

speech_bubble_simple_agent.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" >

    <item
        android:bottom="@dimen/speech_bubble_tail"
        tools:width="100dp"
        tools:height="50dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/speech_bubble_agent"/>
            <corners
                android:topLeftRadius="@dimen/speech_bubble_corners"
                android:topRightRadius="@dimen/speech_bubble_corners"
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="@dimen/speech_bubble_corners"/>
        </shape>
    </item>

    <item
        android:width="@dimen/speech_bubble_tail"
        android:height="@dimen/speech_bubble_tail"
        android:gravity="bottom|left">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="@dimen/speech_bubble_tail"
            android:height="@dimen/speech_bubble_tail"
            android:viewportWidth="25.0"
            android:viewportHeight="25.0">
            <path
                android:pathData="M0,25 25,0 0,0z"
                android:fillColor="@color/speech_bubble_agent"/>
        </vector>
    </item>

</layer-list>

两者的外观如下：（这些版本在透明性方面不太工作，我不确定为什么，因为下面的版本似乎可以正常工作。） speech_bubble_nine_patch_user.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" >

    <item
        android:left="@dimen/speech_bubble_corners"
        android:right="@dimen/speech_bubble_corners_plus_tail"
        android:bottom="@dimen/speech_bubble_spacing"
        tools:width="50dp"
        tools:height="50dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/speech_bubble_user"/>
        </shape>
    </item>

    <item
        android:top="@dimen/speech_bubble_corners"
        android:bottom="@dimen/speech_bubble_corners_plus_tail"
        android:gravity="left"
        android:width="@dimen/speech_bubble_corners">
        <shape android:shape="rectangle">
            <solid android:color="@color/speech_bubble_user"/>
        </shape>
    </item>

    <item
        android:top="@dimen/speech_bubble_corners"
        android:bottom="@dimen/speech_bubble_corners_plus_tail"
        android:right="@dimen/speech_bubble_spacing"
        android:gravity="right"
        android:width="@dimen/speech_bubble_corners">
        <shape android:shape="rectangle">
            <solid android:color="@color/speech_bubble_user"/>
        </shape>
    </item>

    <item
        android:width="@dimen/speech_bubble_corners"
        android:height="@dimen/speech_bubble_corners"
        android:bottom="@dimen/speech_bubble_spacing"
        android:gravity="bottom|left">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="@dimen/speech_bubble_corners"
            android:height="@dimen/speech_bubble_corners"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:pathData="M0,0 A10,10 0 0,0 10,10 L10,0 Z"
                android:fillColor="@color/speech_bubble_user"/>
        </vector>
    </item>

    <item
        android:width="@dimen/speech_bubble_corners"
        android:height="@dimen/speech_bubble_corners"
        android:right="@dimen/speech_bubble_spacing"
        android:gravity="top|right">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="@dimen/speech_bubble_corners"
            android:height="@dimen/speech_bubble_corners"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:pathData="M10,10 A10,10 0 0,0 0,0 L0,10 Z"
                android:fillColor="@color/speech_bubble_user"/>
        </vector>
    </item>

    <item
        android:width="@dimen/speech_bubble_corners"
        android:height="@dimen/speech_bubble_corners"
        android:gravity="top|left">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="@dimen/speech_bubble_corners"
            android:height="@dimen/speech_bubble_corners"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:pathData="M10,0 A10,10 0 0,0 0,10 L10,10 Z"
                android:fillColor="@color/speech_bubble_user"/>
        </vector>
    </item>

    <item
        android:width="@dimen/speech_bubble_corners_plus_tail"
        android:height="@dimen/speech_bubble_corners_plus_tail"
        android:gravity="bottom|right">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="@dimen/speech_bubble_corners_plus_tail"
            android:height="@dimen/speech_bubble_corners_plus_tail"
            android:viewportWidth="150.0"
            android:viewportHeight="150.0">
            <path
                android:pathData="M0,100 C7.67309143,100 14.1935201,100.346373 20.500756,99.0996492 C43.6628959,129.872031 94.1698247,146.306561 150.320843,150.792562 C113.168693,130.799632 87.2808993,98.5054948 81.0808824,68.6524321 C94.1277117,51.7595331 100,23.9957121 100,0 L0,0 L0,100 Z"
                android:fillColor="@color/speech_bubble_user"/>
        </vector>
    </item>

</layer-list>

speech_bubble_nine_patch_agent.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" >

    <item
        android:left="@dimen/speech_bubble_corners_plus_tail"
        android:right="@dimen/speech_bubble_corners"
        android:bottom="@dimen/speech_bubble_spacing"
        tools:width="50dp"
        tools:height="50dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/speech_bubble_agent"/>
        </shape>
    </item>

    <item
        android:top="@dimen/speech_bubble_corners"
        android:bottom="@dimen/speech_bubble_corners_plus_tail"
        android:left="@dimen/speech_bubble_spacing"
        android:gravity="left"
        android:width="@dimen/speech_bubble_corners">
        <shape android:shape="rectangle">
            <solid android:color="@color/speech_bubble_agent"/>
        </shape>
    </item>

    <item
        android:top="@dimen/speech_bubble_corners"
        android:bottom="@dimen/speech_bubble_corners_plus_tail"
        android:gravity="right"
        android:width="@dimen/speech_bubble_corners">
        <shape android:shape="rectangle">
            <solid android:color="@color/speech_bubble_agent"/>
        </shape>
    </item>

    <item
        android:width="@dimen/speech_bubble_corners"
        android:height="@dimen/speech_bubble_corners"
        android:bottom="@dimen/speech_bubble_spacing"
        android:gravity="bottom|right">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="@dimen/speech_bubble_corners"
            android:height="@dimen/speech_bubble_corners"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:pathData="M0,10 A10,10 0 0,0 10,0 L0,0 Z"
                android:fillColor="@color/speech_bubble_agent"/>
        </vector>
    </item>

    <item
        android:width="@dimen/speech_bubble_corners"
        android:height="@dimen/speech_bubble_corners"
        android:gravity="top|right">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="@dimen/speech_bubble_corners"
            android:height="@dimen/speech_bubble_corners"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:pathData="M10,10 A10,10 0 0,0 0,0 L0,10 Z"
                android:fillColor="@color/speech_bubble_agent"/>
        </vector>
    </item>

    <item
        android:width="@dimen/speech_bubble_corners"
        android:height="@dimen/speech_bubble_corners"
        android:left="@dimen/speech_bubble_spacing"
        android:gravity="top|left">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="@dimen/speech_bubble_corners"
            android:height="@dimen/speech_bubble_corners"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:pathData="M10,0 A10,10 0 0,0 0,10 L10,10 Z"
                android:fillColor="@color/speech_bubble_agent"/>
        </vector>
    </item>

    <item
        android:width="@dimen/speech_bubble_corners_plus_tail"
        android:height="@dimen/speech_bubble_corners_plus_tail"
        android:gravity="bottom|left">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="@dimen/speech_bubble_corners_plus_tail"
            android:height="@dimen/speech_bubble_corners_plus_tail"
            android:viewportWidth="150.0"
            android:viewportHeight="150.0">
            <path
                android:pathData="M150,100 L150,0 L50,0 C50,11.9054549 52.5180742,22.2130322 55.2200144,32.2289993 C59.25,47.1679688 65.7054859,60.8615415 68.15625,65.5820312 C55.2200144,107.207031 41.7460938,127.800781 0,151 C61.5311854,147.539062 101.691406,129.675781 124.615295,97.6602593 C132.823321,99.8389881 141.106342,100 150,100 Z"
                android:fillColor="@color/speech_bubble_agent"/>
        </vector>
    </item>

</layer-list>

上面的两个看起来像这样：

dimens.xml（对于两者都适用）

<dimen name="speech_bubble_corners">10dp</dimen>
<dimen name="speech_bubble_corners_plus_tail">15dp</dimen>
<dimen name="speech_bubble_spacing">5dp</dimen>
<dimen name="speech_bubble_tail">25dp</dimen>

- TTransmit

---

我的IDE说宽度/高度字段仅在23及以上版本中才会被考虑。因此，使用API 21/22时，Android无法正确地拼合气泡。对于矢量项，它只是解释说它们不允许放置在您放置它们的位置（对我来说最小API为21）。 - Dominikus K.

你可以将向量提取到单独的XML文件中，并在项目标签内访问它们。根据宽度和高度，你可以使用大小标签进行调整。 - RedDeath

不错，你如何在气泡周围绘制一条与气泡形状相匹配的描边线？ - Zlil Korman

这比9 patch图像更好，不错的解决方案，太棒了..！ - iCoderz Developers

@RosenDimov 你可以使用任何能够保存为SVG格式的矢量绘图程序（例如InkScape，GIMP，Adobe Illustrator，Sketch）。您可以将SVG文件导入为Android Vectors（在Android Studio中的项目窗口中右键单击文件夹>新建>矢量资产）。SVG必须仅为SVG 1.0才能进行转换。更高版本的内容可能无法转换（例如文本，掩码）。如果无法进行转换，则可以手动将路径从<path d=移动到android:pathData=，也可以手动编辑路径，但这样做非常缓慢且难以理解SVG路径语法。 - TTransmit

Answer 4

如果有人需要其他风格的气泡，这里提供一个。谢谢 @vipin Negi

chat_receiver_bubble.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--Shadow Layer-->


    <item android:right="10dp">
        <shape android:shape="rectangle">
            <corners android:radius="100dp" />
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px" />
            <solid android:color="#01000000" />
        </shape>
    </item>

    <!--===============-->


    <item android:right="10dp">
        <shape android:shape="rectangle">
            <corners android:radius="100dp" />
            <padding android:bottom="1px" />
            <solid android:color="#09000000" />
        </shape>
    </item>

    <!--===============-->


    <item android:right="10dp">
        <shape android:shape="rectangle">
            <corners android:radius="100dp" />
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px" />
            <solid android:color="#10000000" />
        </shape>
    </item>

    <!--===============-->


    <!--ForeGround-->


    <item android:right="10dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/app_color" />
            <corners android:bottomLeftRadius="0dp" android:radius="100dp" />
        </shape>
    </item>

</layer-list>

聊天发送者气泡.xml

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--Shadow Layer-->


    <item android:right="10dp">
        <shape android:shape="rectangle">
            <corners android:radius="100dp" />
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px" />
            <solid android:color="#01000000" />
                </shape>
    </item>

    <!--===============-->


    <item android:right="10dp">
        <shape android:shape="rectangle">
            <corners android:radius="100dp" />
            <padding android:bottom="1px" />
            <solid android:color="#09000000" />
        </shape>
    </item>

    <!--===============-->


    <item android:right="10dp">
        <shape android:shape="rectangle">
            <corners android:radius="100dp" />
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px" />
            <solid android:color="#10000000" />
        </shape>
    </item>

    <!--===============-->


    <!--ForeGround-->


    <item android:right="10dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/settings_bg" />
            <corners android:bottomRightRadius="0dp" android:radius="100dp" />
        </shape>
    </item>

</layer-list>

像这样使用

<RelativeLayout
            android:gravity="center"
            android:id="@+id/chatLayout"
            android:background="@drawable/chat_receiver_bubble" //or @drawable/chat_sender_bubble
            android:visibility="gone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <TextView
                android:textSize="14sp"
                android:textColor="@color/text_colour"
                android:id="@+id/message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text=""
                android:fontFamily="@font/regular"/>
        </RelativeLayout>

最终效果

- The Billionaire Guy

---

嗨，做得好 :) - VipiN Negi

如果方框太高，则边框半径会急剧增大。 因此，整个页面的消息会破坏它 :( - phazei

Answer 5

您需要在某种图像编辑器中制作一张图片，然后将其制作成9 patch。您可以使用9 patch方法设置您希望内容出现的区域。然后，您只需创建一个背景设置为您的9 patch的TextView即可。请查看市场上名为Bnter的应用程序，它使用漫画气泡来显示对话，类似于您正在寻找的功能。

- Bobbake4

Answer 6

我通过遵循这个链接 Android 实现带聊天气泡效果的椭圆形背景 创建了一个用于接收和发送消息的界面。

itemincoming.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    app:cardElevation="1dp"
    android:layout_margin="2dp"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="16dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hii how are you ?  11:37"
                android:paddingStart="16dp"
                android:paddingTop="10dp"
                android:paddingEnd="12dp"
                android:paddingBottom="8dp"
                android:textColor="@color/white"
                android:background="@drawable/testrect"/>

            <ImageView
                android:layout_marginTop="-1.5dp"
                android:layout_width="8dp"
                android:layout_height="16dp"
                android:layout_gravity="start"
                android:background="@drawable/testcorner"
                />

        </LinearLayout>


    </RelativeLayout>
</RelativeLayout>

testrect.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#E26841" />
    <corners
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"/>

</shape>

testcorner.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="45"
            android:pivotX="135%"
            android:pivotY="15%"
            android:toDegrees="45"
            >
            <shape android:shape="rectangle">
                <solid android:color="#E26841"/>

            </shape>
        </rotate>
    </item>
</layer-list>

outgoing.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    app:cardElevation="1dp"
    android:layout_margin="2dp"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="16dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:text="11:37 Hii how are you ?"
                android:paddingStart="16dp"
                android:paddingTop="10dp"
                android:paddingEnd="12dp"
                android:paddingBottom="8dp"
                android:textColor="@color/txtcolor_commn"
                android:background="@drawable/testrecty"/>

            <ImageView
                android:layout_marginTop="-4.5dp"
                android:layout_marginRight="4.5dp"
                android:layout_width="8dp"
                android:layout_height="16dp"
                android:layout_gravity="end"
                android:rotation="90"
                android:background="@drawable/testcornery"
                />

        </LinearLayout>

    </RelativeLayout>
</RelativeLayout>

testrecty.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white" />
    <corners
        android:bottomLeftRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"/>

</shape>

testcornery.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="45"
            android:pivotX="135%"
            android:pivotY="15%"
            android:toDegrees="45"
            >
            <shape android:shape="rectangle">
                <solid android:color="@color/white"/>

            </shape>
        </rotate>
    </item>
</layer-list>

现在它的外观如下所示：

- user13562154