Speech bubbles in android

Question

Hi I wanted to use speech bubbles as background images for my app. I came across this posted here

The example starts from the right direction I wanted to achieve this in the opposite direction I have tried

    <?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:right="10dp">
        <shape android:shape="rectangle" >
            <solid android:color="#CCC" />

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

</layer-list>

But I'm unable to get it to work, any help would be greatly appreciated!

http://warting.github.io/AndroidChatBubbles/ - Check this out — Surender Kumar, Feb 23 '15 at 11:44
@Sim here it is http://romannurik.github.io/AndroidAssetStudio/nine-patches.html — Shrey, Feb 23 '15 at 12:23

score 14 · Answer 1 · answered Feb 23 '15 at 21:25

Incoming message:

<?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%" >
            <shape android:shape="rectangle">
                <solid android:color="@color/chat_message_background_incoming" />
            </shape>
        </rotate>
    </item>
    <item android:left="20dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/chat_message_background_incoming"/>
            <corners
                android:radius="1dp"
                android:bottomLeftRadius="15dp"
                android:bottomRightRadius="15dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="15dp" />
        </shape>
    </item>

</layer-list>

Outgoing message:

<?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%" >
            <shape android:shape="rectangle">
                <solid android:color="@color/chat_message_background_outcoming" />
            </shape>
        </rotate>
    </item>
    <item android:right="20dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/chat_message_background_outcoming"/>
            <corners
                android:bottomLeftRadius="15dp"
                android:bottomRightRadius="15dp"
                android:topLeftRadius="15dp"
                android:topRightRadius="5dp" />
        </shape>
    </item>

</layer-list>

Hopefully, it would help

I need to show the arror pointing above in the right corner. How can I acheive this? https://i.stack.imgur.com/SL4bQ.png — sejn, Nov 12 '20 at 09:34

Fakhriddin Abdullaev · Answer 2 · 2018-01-20T13:54:39.760

incoming bubble shape background

<?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="100%"
        android:toDegrees="0" >
        <shape android:shape="rectangle" >
            <solid android:color="@color/colorSendMessageBg" />
        </shape>
    </rotate>
</item>
<item android:right="5dp">
<shape android:shape="rectangle" >
    <solid android:color="@color/colorSendMessageBg" />
    <corners android:radius="5dp" />
</shape>
</item>
</layer-list>

outgoing bubble shape background

<?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="100%"
        android:toDegrees="0" >
        <shape android:shape="rectangle" >
            <solid android:color="@color/colorReciveMessageBg" />
        </shape>
    </rotate>
</item>

<item android:left="5dp">
    <shape android:shape="rectangle" >
        <solid android:color="@color/colorReciveMessageBg" />
        <corners android:radius="5dp" />
    </shape>
</item>

</layer-list>

Final result

is there a way to set corner radius to the corner opposite to sharp shape ? — VipiN Negi, Mar 27 '19 at 08:16

Speech bubbles in android

2 Answers2