Android Drawable Speech Bubble

How to get this chat bubble in drawable

This should work

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:right="2dp">
        <rotate
            android:fromDegrees="15"
            android:pivotX="0%"
            android:pivotY="100%"
            android:toDegrees="0">
            <shape android:shape="rectangle">
                <corners
                    android:bottomLeftRadius="0dp"
                    android:radius="250dp" />
                <solid android:color="@color/white" />
            </shape>
        </rotate>
    </item>
    <item android:left="5dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <corners android:radius="15dp" />
        </shape>
    </item>
</layer-list>

Draw Speech Bubble with auto size

This looks to me like it could be accomplished with a horizontal LinearLayout wrapping an ImageView (for the triangle) and a TextView (with a solid background that matches the triangle color). Android Studio will tell you that you should use android:drawableLeft instead of using a LinearLayout and two children, but I don't believe you could actually get the styling you want if you used that attribute.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="12dp"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/speech_left"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxWidth="240dp"
        android:paddingTop="8dp"
        android:paddingLeft="12dp"
        android:paddingRight="12dp"
        android:paddingBottom="8dp"
        android:textColor="#fff"
        android:textSize="15sp"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        android:background="#f00"/>

</LinearLayout>

Related Topics