How To Create Button With Different Color In Android

There is an easy way to change the color of default button in Android that I found from stackoverflow. We only need to create an xml for custom color (we name it custom_button.xml in res/drawable), add color value (in res/values/color.xml), and add android:background="@drawable/custom_button" tag in our button in layout. All of the code explained here can be downloaded from my github.

Here is my default button before editing:

These are the step to customize our button:

1. Add color value in res/value/color.xml. I use blue base color for button. Here the code:

    <color name="blue_middle">#3C73FF</color>    <color name="blue">#33b5e5</color>    <color name="blue_hard">#2ea9d6</color>

2. Add custom_button.xml in res/drawable. Here the code:

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <gradient
                android:startColor="@color/blue_hard"
                android:endColor="@color/blue"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/blue_middle" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item android:state_focused="true" >
        <shape>
            <gradient
                android:endColor="@color/blue"
                android:startColor="@color/blue"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/blue_middle" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>      
        <shape>
            <gradient
                android:endColor="@color/blue"
                android:startColor="@color/blue"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/blue" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector> 

3. Add tag android:background="@drawable/custom_button" for the button in the layout. For example, here is my button code in layout (the bold text is the tag):

<Button
        android:id="@+id/buttonOpen"
        android:layout_width="300sp"
        android:layout_height="wrap_content"
        android:layout_marginTop="10sp"
        android:text="@string/login_screen_button_open"
        android:background="@drawable/custom_button"/>

Now, after applying these step, we will get our button like this:

 Voila, we finished it.... :D