Defining Shapes in xml file in Android drawable folder

A drawable xml in res/drawable/ can be used to define the shape of an view in Android. This round_corners.xml can be used to make a Circle, rounded corner rectangle, and and oval button.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <solid android:color="#4bf4dd"/>
    <corners android:radius="30dp"/>
</shape>

A circle, since the width and height of this view is 60dp, and the radius defined in the round_corners shape is half the length of the view’s width and height, so it makes this view a circle.

<View
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_margin="10dp"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/round_corners"/>

A rounded corner rectangle, the width and the height is 3 times longer than the radius defined in the round_corners shape, so it makes this view a rounded corner rectangle.

<View
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/round_corners"/>

An oval button, the width of this button is a lot longer than the radius of the rounded_corner shape, but the height of the button is equal to the radius of the rounded_corner shape, hence it makes the button an oval.

<Button
    android:id="@+id/btn_round"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/round_corners"
    android:layout_margin="10dp"
    android:text="Round Button"/>

Complete example in Github

Search within Codexpedia

Custom Search

Search the entire web

Custom Search