How to draw complicated shape in android, with contain of triangle, rectangle and stroke

Question

I have a task to create chat. Here is the UI:

I've tried to draw rectangle and triangle and in layer list to combine this 2 drawables, but it looks very bad...

Rectangle.xml

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

    <corners android:radius="50dp"/>
    <solid android:color="@color/message_cloud_client" />
    <stroke android:color="@color/message_cloud_client_stroke" android:width="1dp"/>

</shape>

Triangle.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item >
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="-40%"
            android:pivotY="90%" >
            <shape
                android:shape="rectangle"  >
                <stroke android:color="@android:color/transparent" android:width="10dp"/>
                <solid
                    android:color="#dce7f7"  />
            </shape>
        </rotate>
    </item>
</layer-list>

Answer 1

You can do this using Nine-patch images instead of creating a layer-list. In a `Nine-patch' image you can indicate the rectangle that is grown or shrink when the image is resized. But the whole image is not affected. Here is the address of the tool:

sdk\\tools\\draw9patch

Open the file. Import your original image and set a rectangle inside the original images that is affected when the image is resized. (Do not include the edges of your picture).

Also you can do this with Vector images that is now available in support library.