Efficient Way To Change Button Style Using Shape

Jump To Right Section Show

In this post, we want to discuss a nice function to change button style using shape on button state in Android. Before we get started, if you want to know about Listview binding in android, please go through the following article: How to bind simple Listview in Android.

How to Start

Every button has four states which are Enable, Focus, Press, Disable. If we want to change button style based on status, we should create four different drawable resources (style). Now we create a drawable resource file by “button.xml” named for each of the four button states under the drawable folder in Android Studio. Repeated that, every file of them must be under the drawable folder. You may copy the following code:

Code for button_enabled.xml


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

    <gradient
        android:startColor="#00CCFF"
        android:centerColor="#0000CC"
        android:endColor="#00CCFF"
        android:angle="90"/>

    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />

    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />

    <corners android:radius= "8dp" />

</shape>

<gradient

android:startColor="#00CCFF"

android:centerColor="#0000CC"

android:endColor="#00CCFF"

android:angle="90"/>

<padding android:left="7dp"

android:top="7dp"

android:right="7dp"

android:bottom="7dp" />

<stroke

android:width="2dip"

android:color="#FFFFFF" />

</shape>

Code for button_focused.xml


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

    <gradient
        android:startColor="#F7D358"
        android:centerColor="#DF7401"
        android:endColor="#F7D358"
        android:angle="90"/>

    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />

    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />

    <corners android:radius= "8dp" />

</shape>

<gradient

android:startColor="#F7D358"

android:centerColor="#DF7401"

android:endColor="#F7D358"

android:angle="90"/>

<padding android:left="7dp"

android:top="7dp"

android:right="7dp"

android:bottom="7dp" />

<stroke

android:width="2dip"

android:color="#FFFFFF" />

</shape>

Code for button_pressed.xml


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

    <gradient
        android:startColor="#0000CC"
        android:centerColor="#00CCFF"
        android:endColor="#0000CC"
        android:angle="90"/>

    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />

    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />

    <corners android:radius= "8dp" />

</shape>

<gradient

android:startColor="#0000CC"

android:centerColor="#00CCFF"

android:endColor="#0000CC"

android:angle="90"/>

<padding android:left="7dp"

android:top="7dp"

android:right="7dp"

android:bottom="7dp" />

<stroke

android:width="2dip"

android:color="#FFFFFF" />

</shape>

Code for button_disabled.xml


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

    <gradient
        android:startColor="#F2F2F2"
        android:centerColor="#A4A4A4"
        android:endColor="#F2F2F2"
        android:angle="90"/>

    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />

    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />

    <corners android:radius= "8dp" />

</shape>