How to make different shapes in android

Aman Gupta

22 December 2016

In this blog,
I will show you how to make different shapes in android.

Shape

The shape is the XML Element which is defined in XML. and must be the root element.

The file location is :

res/drawable/your_shape.xml
The filename is used as the resource ID.

The values which define the type of shape,

"rectangle": A rectangle that fills the containing View. This is the default shape.

"oval": An oval shape that fits the dimensions of the containing View.

"line": A horizontal line that spans the width of the containing View. This shape requires the <stroke> element to define the width of the line.

"ring": A ring shape.

How to create shapes

Circle:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="@color/md_red_600" />
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
</shape>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="oval">

<padding

android:bottom="5dp"

android:left="5dp"

android:right="5dp"

android:top="5dp" />

</shape>

Rectangle:

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

    <solid android:color="@color/md_red_600" />
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
</shape>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<padding

android:bottom="5dp"

android:left="5dp"

android:right="5dp"

android:top="5dp" />

</shape>

Ring:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring">

    <solid android:color="@color/md_red_600" />
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
</shape>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="ring">

<padding

android:bottom="5dp"

android:left="5dp"

android:right="5dp"

android:top="5dp" />

</shape>

Line:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">

    <solid android:color="@color/md_red_600" />
    <stroke android:width="1dp" />
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
</shape>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="line">

<padding

android:bottom="5dp"

android:left="5dp"

android:right="5dp"

android:top="5dp" />

</shape>

How to access

In Java: R.drawable.your_shape
In XML: @[package:]drawable/your_shape

Example:

Create the file named circuler_shape.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="@color/md_red_600" /> <padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" /> </shape>

1
2
3
4
5
6
7
8
9
10

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="@color/md_red_600" />
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
</shape>

and this XML layout applies to a Textview:

<TextView android:id="@+id/sale" android:layout_width="35dp" android:layout_height="35dp" android:background="@drawable/circuler_shape" android:gravity="center" android:text="SALE" />

1
2
3
4
5
6
7

<TextView
    android:id="@+id/sale"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:background="@drawable/circuler_shape"
    android:gravity="center"
    android:text="SALE" />

For programmatically:

TextView saleTv = (TextView)findViewByID(R.id.sale); tv.setBackgroundResource(R.id.circuler_shape);

1
2

TextView saleTv = (TextView)findViewByID(R.id.sale);
tv.setBackgroundResource(R.id.circuler_shape);

Source:

https://developer.android.com/