androidxmlandroid-layout

Chat Bubble Drawing in Android


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!


Solution

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