Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Creating your own Custom Button Style

Author: Adrián Santalla
Published? false -- FormatLanguage: W

Problem:

You need to create your own custom button style for all your application buttons.

Solution:

Here's how to implement your own custom button style:

  • Create an XML file that represents the button states (enabled, disabled, pressed and focused).
  • Create an XML file that represents each button state.
  • Create an XML file that represents the button style.
  • Create an XML with your own custom application theme, and change the default button style by your own custom style.

Discussion:

Contents


1. Create an XML file that represents the button states

First of all, you need to create an XML file with the four button states. This file will contain the actions related with each button state and it will be saved into the drawable directory with some descriptive name, like button.xml.

To represent the button states you can use the selector XML tag, which provides the functionality to select an item (in this case, a possible state) by some conditions.

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="false"
        android:drawable="@drawable/button_disabled" />
    <item
    	android:state_pressed="true"
    	android:state_enabled="true"
        android:drawable="@drawable/button_pressed" />
    <item
    	android:state_focused="true"
    	android:state_enabled="true"
        android:drawable="@drawable/button_focused" />
    <item
    	android:state_enabled="true"
        android:drawable="@drawable/button_enabled" />
</selector>

In the example above, I'm using four items to represent the four possible states of an Android button. Each one, is made by one or two states, which are the conditions, and the drawable that is going to be used for that state.

2. Create an XML file that represents each button state

Then, you need to create an XML file for each button state, each one will be represented with an Android shape. Every file will contain the shape with the color, the gradient, the padding, ... and some other options and it will be saved into the drawable directory with some descriptive name, like button_state.xml. That name must be the one that you wrote in the button.xml file for each drawable of every state.

The examples below show my four button shapes. I'm using a rectangle but you can use other shapes.

My first button shape is for the enabled button state.

<?xml version="1.0" encoding="utf-8"?>

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

My second button shape is for the focused button state.

<?xml version="1.0" encoding="utf-8"?>

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

My third button shape is for the pressed button state.

<?xml version="1.0" encoding="utf-8"?>

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

And finally, my fourth button shape is for the disabled button state.

<?xml version="1.0" encoding="utf-8"?>

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

3. Create an XML file that represents the button style

Once you have created the files mentioned above, it's time to create your application button style. Now, you need to create a new XML file, called styles.xml (if you don't have it yet) where you can include more custom styles, into de values directory.

This file will contain the new button style of your application. You need to set your new button style features in it. Note that one of those features, the background of your new style, should be set with a reference to the button (button.xml) drawable that was created in the first step. To refer to the new button style we use the name attribute.

The example below show the content of the styles.xml file.

<resources>
    <style name="button" parent="@android:style/Widget.Button">
        <item name="android:gravity">center_vertical|center_horizontal</item>
        <item name="android:textColor">#FFFFFFFF</item>
        <item name="android:shadowColor">#FF000000</item>
        <item name="android:shadowDx">0</item>
        <item name="android:shadowDy">-1</item>
        <item name="android:shadowRadius">0.2</item>
        <item name="android:textSize">16dip</item>
        <item name="android:textStyle">bold</item>
        <item name="android:background">@drawable/button</item>
        <item name="android:focusable">true</item>
        <item name="android:clickable">true</item>
    </style>
</resources>

4. Create an XML with your own custom application theme

Finally, you need to override the default Android button style. For that, you need to create a new XML file, called themes.xml (if you don't have it yet), into the values directory and override the default Android button style.

The example below show the content of the themes.xml.

<resources>
    <style name="YourApplicationTheme" parent="android:style/Theme.NoTitleBar">
        <item name="android:buttonStyle">@style/button</item>
    </style>
</resources>

From now on, you can create buttons on your application with the new style and every one will look like buttons of the screenshot below.

Brian 2014-02-05 02:40:50.906 This is all very good, but it fails to knit it all together. I have all the parts to create a new style button, but how do I do it? How do you make the button use the xml file created?