Customized Buttons — Android

Fresh off the heels of my custom dialogs post, here I will be sharing one of the many ways button customization can be achieved on Android.
P.S. This post is directed to persons already knowledgeable of Android development, and can find their way around Android Studio.

The button.

To achieve this, we will be using a state list drawable. The button’s appearance will change depending on its current state (pressed, focused, or neither).

Create Some Colors

First up, we will create a custom color, and give it some transparency. Head over to your colors.xml file [res/values/colors] and add the following:

<color name="whiteColor">#ffffff</color>
<color name="blackColor">#000000</color>


<color name="primary_blue">#5677fc</color>
<color name="primary_blue_transparent">#665677fc</color>

Create the State List Drawable

Next, head over to your drawable folder [res/drawable]: Right Click →New →Drawable Resource file; name it blue_background.

If done correctly, a new XML file with a selector element should be created. Copy and paste the below code into it.

<?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:endColor="@android:color/transparent"
                android:startColor="@color/primary_blue_transparent"
                android:angle="270" />
            <stroke
                android:width="2dp"
                android:color="@color/primary_blue" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item>
        <shape>
            <gradient
                android:endColor="@android:color/transparent"
                android:startColor="@android:color/transparent"
                android:angle="0" />
            <stroke
                android:width="1dp"
                android:color="@color/primary_blue_transparent"/>
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

• The first item represents the pressed state. When triggered, a rectangular shape with a solid blue border with rounded corners and a gradient background (going from a solid blue to a transparent blue) will be created.
• The second item represents the neutral or non-pressed state. When triggered, a transparent rectangular shape with a transparent blue border and rounded colors is created.

Make Sense Out of All This

Head over to your activity_main.xml file and add a button to it, with a background of @drawable/blue_background.

<Button
    android:textColor="@color/primary_blue"
    android:text="BLUE"
    android:layout_margin="4dp"
    android:background="@drawable/blue_background"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Launch it and you should be greeted with a fancy new button. To dive into a bit more customization (custom font, more gradient patterns), check out the Github repo.