Android How To Create Rectangle Shape Drawable Using XML

This tutorial will explain you about creating rectangle shape drawable as resource. It is extremely easy and consumes less APK size when you compare it with image drawables (JPG, PNG etc) that is being bundled with APK.

I recommend you to replace all these kind of simple shapes with corresponding shape drawables for saving APK size. The one advantage is that will act like vector i.e, the size and color used in the drawable can be changed by single line edit.

1. Simple solid black rectangle

Create res/drawable/black_rectangle.xml with content as

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="#000000" />
</shape>

Set As android:src In res/layout/activity_layout.xml

<ImageView
   android:id="@+id/btn_capture_photo"
   android:layout_width="100dp"
   android:layout_height="50dp"   
   android:src="@drawable/black_rectangle" />

Output

2. Black rectangle shape with border

Create res/drawable/black_rectangle_with_border.xml with content as

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="#000000" />
    <stroke android:color="#c4441d" android:width="5dp" />
</shape>

In res/layout/activity_layout.xml

<ImageView
   android:id="@+id/btn_capture_photo"
   android:layout_width="100dp"
   android:layout_height="50dp"   
   android:src="@drawable/black_rectangle_with_border" />

Output

3. Black curved rectangle shape with border

Create res/drawable/black_curved_rectangle_with_border.xml with content as

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="#000000" />
    <corners android:radius="3dp" />
    <stroke android:color="#c4441d" android:width="5dp" />
</shape>

In res/layout/activity_layout.xml

<ImageView
   android:id="@+id/btn_capture_photo"
   android:layout_width="100dp"
   android:layout_height="50dp"   
   android:src="@drawable/black_curved_rectangle_with_border" />

Output