Android custom button layout tutorial

1 12 2012

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

Normal button state

Button in normal state

Button pressed 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:





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:





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="" >
    <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"/>

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:

    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

Donate Button with Credit Cards

Thank You!



One response

29 06 2013
Android tutorial: custom button background (created programatically) | Looks OK!

[…] This post is an extension to the Android custom button layout tutorial. […]

Give Your feedback:

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: