Android 可绘制语音气泡

Posted 2023-04-15

技术标签:

【中文标题】Android 可绘制语音气泡【英文标题】：Android drawable speech bubble 【发布时间】：2011-12-19 23:08:48 【问题描述】：

我已经找了好几天了，但找不到任何关于如何绘制气泡或绘制 9 个补丁图像用作背景的好线索。我是个糟糕的艺术家——谁能帮忙？

我在 *** 上找到了最好的示例，但它是用目标 c 编写的

How to draw a "speech bubble" on an iPhone?

谢谢

【问题讨论】：

您是否尝试过使用图像并将其制成九个补丁？检查My 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>

shape_bg_outgoing_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="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>

【讨论】：

如何旋转 .xml 文件中的整个形状？当我尝试在布局文件中实现它时显示为垂直如何在 shape_bg_incoming_bubble.xml 中给出右上角的圆角半径要修复这个缺失的拐角半径，将第一个 item 中的 <solid android:color="@color/grey_500" /> 替换为 <stroke android:width="8dp" android:color="@color/grey_500" /> 并将 android:width="8dp" 设置为半径的两倍。（如果您的半径为4dp，请将其设置为8dp。）如果颜色是透明的，这一切看起来都不合适【参考方案2】：

我知道这有点太晚了。对于那些不想使用 9-patch 图像但又想从语音气泡中投射阴影的人。这是我最接近 WhatsApp 语音气泡的地方。并感谢@toobsco42 提供上述答案。

给你..

传入语音气泡：

<?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_
    android:layout_
    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" />

我的输出是这样的：

【讨论】：

@HarviSirja 哦，太好了：D 很好的答案，但是当气泡足够小时出现问题，矩形的宽度小于三角形的宽度，三角形从左侧溢出。剪辑三角形的任何解决方案？希望能帮到你。我现在已经退出原生并切换到 Flutter。您可以尝试调整度数或枢轴值。如果你能得到它，请随时在此处编辑我的答案。【参考方案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 Drawable 在绘制任何稍微复杂的东西时的可用性方面还有很多不足之处。

这个版本是这样的：

更新我一直在研究 XML 语音气泡，对我 2014 年的解决方案有点不满意。在 2018 年，我们有矢量可绘制对象，可以提供比上述解决方案更好的解决方案。这里有一些更现代的选择。它们允许诸如小消息和透明度之类的事情。

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:
        tools:>
        <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:
        android:
        android:gravity="bottom|right">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:
            android:
            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:
        tools:>
        <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:
        android:
        android:gravity="bottom|left">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:
            android:
            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:
        tools:>
        <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:>
        <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:>
        <shape android:shape="rectangle">
            <solid android:color="@color/speech_bubble_user"/>
        </shape>
    </item>

    <item
        android:
        android:
        android:bottom="@dimen/speech_bubble_spacing"
        android:gravity="bottom|left">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:
            android:
            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:
        android:
        android:right="@dimen/speech_bubble_spacing"
        android:gravity="top|right">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:
            android:
            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:
        android:
        android:gravity="top|left">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:
            android:
            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:
        android:
        android:gravity="bottom|right">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:
            android:
            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:
        tools:>
        <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:>
        <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:>
        <shape android:shape="rectangle">
            <solid android:color="@color/speech_bubble_agent"/>
        </shape>
    </item>

    <item
        android:
        android:
        android:bottom="@dimen/speech_bubble_spacing"
        android:gravity="bottom|right">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:
            android:
            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:
        android:
        android:gravity="top|right">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:
            android:
            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:
        android:
        android:left="@dimen/speech_bubble_spacing"
        android:gravity="top|left">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:
            android:
            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:
        android:
        android:gravity="bottom|left">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:
            android:
            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>

【讨论】：

我喜欢新的，但他们似乎需要 api >= 23。好点。他们正在使用矢量，我认为它只有 API 21 及更高版本。对我来说，API 21 看起来不对。它显示为一个矩形。我不确定为什么会这样。一种选择是拥有两组可绘制对象（可能还有布局）。 drawable 中低于 23 的那些和 drawable-v23 中带有向量的那些。我的 IDE 说宽度/高度字段只在 23 及以上考虑。因此，使用 api 21/22 时，android 无法正确解开气泡。对于它刚刚解释的矢量项目，它们不允许在您放置它们的位置上（我使用 min api 21）。您可以将向量提取到单独的 xml 中并在 item 标记中访问它们。根据宽度和高度，您可以使用尺寸标签 @RosenDimov 您可以使用任何可以保存为 SVG 的矢量绘图程序（例如 InkScape、GIMP、Adobe Illustrator、Sketch）。您可以将 SVG 文件作为 Android Vectors 导入（在 Android Studio > New > Vector Asset 的项目窗口中右键单击文件夹）。 SVG 只需 SVG 1.0 才能进行转换。更高版本的东西可能无法转换（例如文本、掩码）。如果无法转换，您可以手动将路径从 <pathd= 移动到 android:pathData=。您也可以手动编辑路径，但理解 SVG 路径语法非常缓慢且令人困惑。【参考方案4】：

以防万一有人需要另一种风格的气泡，你可以去 tnx @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>

chat_sender_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/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_
            android:layout_>
            <TextView
                android:textSize="14sp"
                android:textColor="@color/text_colour"
                android:id="@+id/message"
                android:layout_
                android:layout_
                android:layout_margin="10dp"
                android:text=""
                android:fontFamily="@font/regular"/>
        </RelativeLayout>

最后的样子

【讨论】：

嘿，不错 :)【参考方案5】：

您应该在某种图像编辑器中制作图像，然后从中创建一个 9 补丁。您可以使用 9 补丁方法设置您想要内容的区域。然后，您可以简单地将背景设置为 9 补丁的 TextView。看看市场上一款名为 Bnter 的应用程序，它使用气泡来显示与您正在寻找的内容相似的对话。

【讨论】：

【参考方案6】：

这里我按照Android make oval background drawable with chat corner创建了传入和传出消息

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_
    app:cardElevation="1dp"
    android:layout_margin="2dp"
    android:layout_>

    <RelativeLayout
        android:layout_
        android:layout_>
        <LinearLayout
            android:layout_
            android:layout_
            android:layout_gravity="center"
            android:layout_margin="16dp"
            android:orientation="vertical">

            <TextView
                android:layout_
                android:layout_
                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_
                android:layout_
                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_
    app:cardElevation="1dp"
    android:layout_margin="2dp"
    android:layout_>

    <RelativeLayout
        android:layout_
        android:layout_>
        <LinearLayout
            android:layout_
            android:layout_
            android:layout_gravity="center"
            android:layout_margin="16dp"
            android:orientation="vertical">

            <TextView
                android:layout_
                android:layout_
                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_
                android:layout_
                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>

现在是这个样子

【讨论】：

以上是关于Android 可绘制语音气泡的主要内容，如果未能解决你的问题，请参考以下文章

Android 实现气泡布局/弹窗，可控制气泡尖角方向及偏移量

视图上的 Android 动态气泡

Android 图表绘制 achartengine 示例解析

如何使用默认的 Android 可绘制对象

Android虚线可绘制潜在ICS错误