Android: Custom Buttons

Buttons in Android have three states: normal, focused, and pressed. Each of these states has its own 9.png file, stored in android.jar, and you can easily use your own graphics if you decide you don't like the default Android Orange. I love orange a much as the next guy...probably more, but come on, it just doesn't go with everything. If you want to have a custom UI, you're going to want to figure out how to get rid of the orange highlights. So, here's how to do it:

Android.jar

First off, if you want to see the original android button graphics, they're located here:


android.jar\res\drawable


If you aren't aware, a .jar file is just a .zip file with the extension changed to .jar. To extract it, just copy it to android.jar.zip, and extract it with your favorite .zip file extraction program.

Default Images

The default "Dark" theme button graphics are these, and are compiled Nine-Patch PNG files:


image:button_background_focus_yellow.9.png button_background_focus_yellow.9.png

image:button_background_normal.9.png button_background_normal.9.png

image:button_background_pressed_yellow.9.png button_background_pressed_yellow.9.png


There are some other button graphics in there too. The highlights are blue rather than orange:


image:grey_button_background_focus_blue.9.png grey_button_background_focus_blue.9.png

image:grey_button_background_normal.9.png grey_button_background_normal.9.png

image:grey_button_background_pressed_blue.9.png grey_button_background_pressed_blue.9.png

Drawable

I think these graphics are probably part of a yet-to-be released theme other than "Dark". Google employees have stated that there is a "Light" theme that doesn't work yet. However, they're already there in the jar, so you can choose to use these graphics instead without too much effort. First, you need to make a new XML file in your application's drawable folder. I've named mine mybutton_background.xml. To use the blue button graphis, add this to the xml file:

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

The <selector> tag allows you to provide multiple states for the button (i.e. normal, focused and pressed). Note the android:state_focused and android_state_pressed properties, and the drawables that are associated with those states.

Layout

Now that you have a new button drawable, it's pretty easy to use this drawable for a button in a layout XML file. Here's an example:

        <Button android:id="@+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/next"
android:background="@drawable/mybutton_background"/>

Note that the only difference between this and a regular button definition is the inclusion of the android:background parameter that points to the XML file you defined above (sans the .xml extension).

Custom Images

This is all great if you just want to use a different button style that's already in the android.jar file, but what if you want to substitute your own graphics? That's easy. You need to provide your own versions of these three state image files, stored as Nine-Patch PNG files (.9.png). Google Describes how to create a Nine-Patch image here:

http://code.google.com/android/reference/available-resources.html#ninepatch

You can use the Android.jar image files as a starting point, but it's important to realize that these Nine-Patch images have already been compiled into the .jar file, so the borders that specify the stretchable and drawable sections of the image have already been stripped from the file. You'll need to add a 1-pixel wide border around the entire image, and define your own stretchable and drawable sections.

Once you've created your new button graphics, just import them into your drawable folder in Eclipse, and modify your mybutton_background.xml file to use those images:

 

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

Note: This tutorial is based on android-sdk_m5-rc15_windows.

 

---

Comments - Add a Comment

Arun
Will this work on android 1.0

Tom
I'm actually not sure. I haven't been much involved with Android recently.

Arun
it did, thank you Tom

Tom
Excellent. Thanks for letting me know.

Tabata
It didn't work on android 1.1r1. But I fixed the problem. It works well now. Please edit mybutton_background.xml in the drawable folder. Patch four items. android:drawable=@android:drawable/.... -> android:drawable=@drawable/.... This article was very helpful. Than you Tom.

ahsan
Thanks... i use android-sdk-windows-1.0_r2 and got it done nicely... this is a helpful article...

Max
It didn't work on Adroid 1.5. There are NO blue button on android.jar. Furthermore it can't access to android.jar drawable resource from xml mybutton_background.xml. How can I do?

edwar12345
for android 1.5, the btn_default.xml is as below:

christ
may i know that all of the codes are under one xml file or different??

mkas
Hi, when I add mybutton_background.xml to the /res/drawables directory I get “Error parsing XML: not well-formed (invalid token)” I have no idea how to fix it. Can anyone help me?

ganapathy
thank you it helped me a lot...

Shared Sh.
So I still have to have a png file in folder color/ with the color i want? :-/ lame

pandora online uk
Hello i am shawnlee.thanks for sharing this post.This site is very helpful for me and others.This is all great if you just want to use a different button style that's already in the android.jar file, but what if you want to substitute your own graphics? That's easy. You need to provide your own versions of these three state image files, stored as Nine-Patch PNG files (.9.png). Google Describes how to create a Nine-Patch image here:

CPR Associates
Good site that gives the information on the git-osx-installer that is used more in this study and also the open up of the pop and the check on the git installs also have greatly interesting ideas on the site.

What Does CPR Stand for
this site information on the git-osx-installer that is used more in this study and also the open up of the pop and the check on the git installs also have greatly interesting ideas on the site.

CPR Manikins
this site is have information on the git-osx-installer that is used more in this study and also the open up of the pop and the check on the git installs also have greatly interesting ideas on the site.


BLOG

SOAP Client for OSX
Developing Native iOS Apps with the Force.com Mobile SDK
Application Development with Android
Moving the Cloud - HTML5 and CSS3 on Node.js
Private Cloudwashing No Innovation? Duh
Painless Mobile App Development Webinar
Fluid Mobile HTML5 Design and Development
Codesign: Re-Signing an IPA between Apple accounts
Developers First Look at Windows 8 Metro
Storing Data Offline with Salesforce Mobile SDK SmartStore
Using XMLHttpRequest2 in iOS 5 or Android OS 3 to download binary files using HTML5/Phonegap
oAuth 2.0 for Salesforce.com
Setting Up and Using DiffDog for Salesforce.com Deployment Validation
The day the cloud stood still. Lessons learned roundup
Its Not Broken. Youre Just Doing It Wrong.
iOS Enterprise MDM Configuration Capabilities
Some Thoughts on Gamification
Cloud to Cloud: Using AWS Simple Email Service from Force.com
Importing a Flex 3 AIR project into Flash Builder 4
OSX Firefox Flex/Flash redraw bug workaround
Setting up automated testing in Flex SDK 3.3.0
Force.com Flex Toolkit AIRConnection updates
Clang! Powerful Memory Profiling for the iPhone
iPhone Programming: Adding a Contact to the iPhone Address Book
Lessons for the Beginning iPhone Developer
Installing a Whole-House Powered Humidifier without a Sail Switch
Eclipse IDE Irritations
Review: Zoom H4 Digital Audio Recorder
Android: Custom Spinners
Android: Custom Buttons
Android: Common Tasks
MP3 Encoding, 16 bit , 24 bit, or 32 bit?
Flash: A better sortOn() function
Rendering Isometric Tiles in Blender 3D
PHP: Replace "Smart Quotes" and other high-bit characters
Actionscript 3: Extra Timer Callback Parameters
OSC between Max/MSP and SC3
SC3: Flash and OSC
SC3 Tank Reverb (JMC)
Search SC3 Code Script
JPEG to WAV Converter
SC3 808 Kick Drum
SC3 Markov Chain
SC3 Pulse Train
Roland XP-80 Device XML for Cubase SX3