Android Create Message Shape Using XML

Here in this article i am going to show you how to create message shape drawable using XML. In this method you don’t need to provide graphic file. It is a recommended method because it only requires less space and configurable. i.e, you can change the dimension and color properties easily by editing the xml file and you don’t need the help of a graphic designer.

We are going to create two layers. First layer contains rectangle shape and second one contains up down triangle shape. Combining both into one drawable makes it as a message icon shape. Let’s see how to do it.

Create Message Shape Drawable

Below is the XML shape of above mentioned two shapes (rectangular and triangle). The order of items is very important as it will be shown one over other like framelayout.

res/drawable/message_shape.xml

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

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#df2b2b" />
        </shape>
    </item>

    <item>
        <rotate
            android:fromDegrees="45"
            android:pivotX="135%"
            android:pivotY="15%"
            android:toDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#503737" />
            </shape>
        </rotate>
    </item>

</layer-list>

Use It In Activity Layout XML

Create an Imageview and set the above created shape xml drawable as source. Let’s see how to do it.

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="app.devdeeds.com.starshape.MainActivity">

   <ImageView
       android:layout_width="72dp"
       android:layout_height="72dp"
       android:src="@drawable/message_shape"
       android:layout_centerInParent="true"

       />
</RelativeLayout>

Finally Your Activity

MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Result