AndroidAndroid UI

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

black_rect

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

black_rect_with_border

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

black_rect_curved

About author

Geethu is a teacher by profession, but she likes to research new things and is also interested in writing. Devdeeds is her blog, where she writes all the blog posts related to technology, gadgets, mobile apps, games, and related content.

Leave a Reply

Your email address will not be published. Required fields are marked *