Chat Bubble Drawing in Android

Question

I am trying to draw chat bubble like attached image from yesterday, tried many given ways in stackoverflow but not found any proper solution, enter image description here,

I am able to do it like this enter image description here using this xml code but unable to border properly for achieve good result

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

    <item android:top="0dp" android:bottom="10dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#000000" />
            <size
                android:width="106dp"
                android:height="20dp"/>
            <corners android:radius="4dp" />
        </shape>
    </item>

    <item android:bottom="0dp"
        android:top="0dp"
        android:gravity="center_horizontal|bottom">
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="135%"
            android:pivotY="15%">
            <shape android:shape="rectangle">
                <solid android:color="#000000" />
                <size
                    android:height="10dp"
                    android:width="10dp"/>
            </shape>
        </rotate>
    </item>
</layer-list>

Let me know if someone can help me for make it working. Thanks!

Answer 1

Try below code with border. Hope it helps...

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

    <item android:bottom="-10dp" android:top="0dp"
        android:gravity="center_horizontal|bottom">
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="135%"
            android:pivotY="15%">
            <shape android:shape="rectangle">
                <solid android:color="#FF0000" />
                <size
                    android:height="10dp"
                    android:width="10dp"/>
            </shape>
        </rotate>
    </item>

    <item>
    <shape android:shape="rectangle">
        <solid android:color="#fff" /> 
        <corners android:radius="4dp" />
        <size
            android:width="106dp"
            android:height="20dp"/>
    </shape>
    </item>

    <item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent" /> 
        <stroke
            android:width="2dp"
        android:color="#FF0000" /> 
        <corners android:radius="4dp" />
        <size
            android:width="106dp"
            android:height="20dp"/>
    </shape>
    </item>
    <item android:bottom="-7dp" android:top="0dp"
        android:gravity="center_horizontal|bottom">
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="135%"
            android:pivotY="15%">
            <shape android:shape="rectangle">
                <solid android:color="#fff" />
                <size
                    android:height="9dp"
                    android:width="9dp"/>
            </shape>
         </rotate>
     </item>
</layer-list>

Use it as below

    <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="5dp"
            android:src="@drawable/chat"/>
    </RelativeLayout>