Android custom button layout tutorial

The goal of this tutorial is to create customized button with your own background. The result will be something like that:

Button in normal state

Button in pressed state

There are two ways of creating such background. The common one is to define it in XML file – this way I will describe here. The other, more elastic way is to define it at runtime in Java Code. And this is described in another tutorial.

1. Create background graphics files
First you need to create backround image for each button state (normal, pressed, focused etc.). For simplicity it is enough just to provide graphics for pressed and normal state. My files looks like that:

button_left_normal.png

button_left_pressed.png

2. Create scalable 9patches from background files

9 patch is common format that allows button background to scale to fit desired size (width and height). You have to define which fragments should be resized while scaling (middle part of image) and which not (image corners), in order not to change background image shape.

Android SDK provides 9patch tool to create these. It is in your Andrid directory in \Android\android-sdk\tools\draw9patch.exe. Run it and draw line on the left and top edge, then save it to drawables directory (it will have extension like <file_name>.9.png. My files are as follows:

button_left_normal.9.png

button_left_pressed.9.png

Some draw9patch.exe tutrials and instructions are available on the internet. I hope these three will be helpful: Android developers tutorial or YouTube tutorial.

3. Define xml selector
Selector is responsible for reacting on button press changes and showing proper backgrounds to the user. Here you define background files for each state (use 9patch images! These with *.9.png extension!), and put it in your /res/drawable folder. Example:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" android:drawable="@drawable/button_left_pressed"/>
    <item android:state_focused="true" android:drawable="@drawable/button_left_pressed"/>
    <item android:drawable="@drawable/button_left_normal"/>
</selector>

4. Create UI button and define its background
Now all you need to do is to define a button and set its background to selector file defined earlier. In my case this is button_bgnd_left.xml file:

<Button
    android:id="@+id/calc_addPerson_button"
    android:layout_width="@dimen/height_button_big"
    android:layout_height="fill_parent"
    android:background="@drawable/button_bgnd_left"
    android:drawableLeft="@drawable/add_person"
    android:text="@string/calculation_button_addPerson_text" />

Did I help you?
I manage this blog and share my knowledge for free sacrificing my time. If you appreciate it and find this information helpful, please consider making a donation in order to keep this page alive and improve quality

Thank You!