在 android 的聊天应用程序中创建文本气泡的更好选择？

Question

I have this style I want to implement in my chat app when user sends a message:

Should I use 9 patch or make it with XML ? If XML is the better option how could I achieve this?

Answer 1

You can make an XML for this, and you should make a bubble for incoming and outgoing messages.

This is one example for incoming chat bubble source .

<?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>