How to decorate Button widget in Android Android 16.02.2017

In this tutorial you will learn how to create a Button with different shapes in Android. Shape drawable resource is used to define shape of a view.

Create rect_button.xml file inside res/drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke android:color="#FF6F00" android:width="1dip"/>
    <solid android:color="#FFC107"/>
    <size android:width="100dp" android:height="100dp"/>
</shape>

• shape defines shape of view and must be the root element. It can be rectangle, oval, line (requires the <stroke> element to define the width of the line) and ring. In this case we are using oval shape to make the Button circular.
• stroke defines boundary of shape.
• solid defines background color of shape.
• size defines size of shape.

Now set this xml as background of the Button.

<Button
    android:text="Button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/rect_button"/>

Let's add corners, size and gradient.

<corners android:radius="3dip" />
<size android:width="100dp" android:height="30dp" />
<gradient
    android:angle="270"
    android:startColor="#DD2ECCFA"
    android:endColor="#DD000000"/>

The button will look like

Following are snippets for different shapes.

Cicrle

<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>

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>

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>

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>

Also we can set shape for a TextView

<TextView
    android:id="@+id/tvLabel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/circle"
    android:layout_margin="5dp"
    android:text="TextView"
    android:textColor="#FFFFFF"/>

or programmatically

TextView tvLabel = (TextView) findViewByID (R.id.tvLabel);
tvLabel.setBackgroundResource(R.id.circle);

Last stuff I want to expose is style for Button. First, define style in res/values/styles.

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="ButtonStyle" parent="Theme.AppCompat.Light">
        <item name="colorControlHighlight">#FFCCBC</item>
        <item name="colorButtonNormal">#FF5722</item>
    </style>
</resources>

Second, set style for Button

<Button
    android:text="Animation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:textColor="#FFFFFF"
    android:theme="@style/ButtonStyle"
    />

The button will look like