What's brewing in the mobile world?

Sexily Styled Toggle Buttons for Android

Let’s be real – Google’s Android OS is the cats pajamas, but the standard application UI elements that ship with it are blasé at best. Everything from Tabs to ListViews are intuitive, yet stylistically yawn-inducing; the ToggleButton is no exception.

I’ll walk you through how to convert Android’s default toggle button (ew) into something custom and more eye pleasing. We’ll work with 9-patches, styles, themes, and XML drawables; no java needed!

Images [Draw 9-Patch]

Android has a very nifty way of allowing a developer to specify how images dynamically scale by converting an image into a “9-patch” drawable. (For more information about 9-patch’s, check out the Android documentation.)

You need to create two images, one for each state of your ToggleButton (“on” and “off”, or “yes” and “no”, etc) and create both images into 9-patch drawables. Call them btn_toggle_off.9.png and btn_toggle_on.9.png, respectively. Both images will be dropped into your /res/drawable-hdpi/ (mdpi or ldpi depending upon the density) folder.

Here’s a screenshot of one toggle image (the “NO” or “OFF” state) as a 9-patch drawable using Android’s draw9patch tool:

The right column of the draw9patch tool shows how the drawable will scale in the wild. As you can see, the transparent padding on the left side of the toggle image allows us to create a 9-patch drawable that only scales the transparency portion, leaving the rest of the button untouched. The scalable section will be reserved for the ToggleButton ON and OFF text.

The other toggle button 9-patch drawable will look almost identical to the one above but instead will have the toggle portion of the button in the ON or YES state.

XML Drawables

We need two XML drawables: one to set the background of our ToggleButton element and another to set the toggle images depending upon whether the button is toggled ON or OFF.

First, let’s handle setting the background; place the following into /res/drawable/btn_toggle_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:id="@+android:id/background" android:drawable="@android:color/transparent" />
	<item android:id="@+android:id/toggle" android:drawable="@drawable/btn_toggle" />
</layer-list>

Next, let’s tell Android when to use the ON and OFF toggle drawables; place the following into /res/drawable/btn_toggle.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_checked="false" android:drawable="@drawable/btn_toggle_off" />
	<item android:state_checked="true" android:drawable="@drawable/btn_toggle_on" />
</selector>

Styles & Themes

Inside your /res/values/themes.xml file, use the following to overwrite the default style of a ToggleButton:

First, create a custom Widget.Button.Toggle style:

<!-- Overwrite the ToggleButton style -->
<style name="Widget.Button.Toggle" parent="android:Widget">
	<item name="android:background">@drawable/btn_toggle_bg</item>
	<item name="android:textOn">ON</item>
	<item name="android:textOff">OFF</item>
	<item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
</style>

Next, tell your Android theme to use your new style…

<style name="YourThemeName" parent="@android:Theme.Black">
	<!-- Tell Android to use a custom style when creating a ToggleButton -->
	<item name="android:buttonStyleToggle">@style/Widget.Button.Toggle</item>
	<!-- Perhaps more theme items here...? -->
</style>

Per Android standards, you need everything above to be placed within a resources node; I’m assuming that you already know the basics of creating Android themes but if not, brush up on your skills at the Android docs site!

All done!

Once you specify your application to use your custom theme within your the Android manifest (android:theme="@style/YourThemeName") you should see that all default uses of ToggleButton now sport your custom style.

3 Comments

Have something to say? Feel free, we want to hear from you! Leave a Comment

  1. Matte00 says:

    Hi mate! Great works! Thank you! Please, can you upload or send me the btn_toggle_off.9.png and btn_toggle_on.9.png ? Thank you very much, i’m not very expert with graphics :)

  2. In addition to your article,

    I am providing free 9 patch PNGS on my blog, to be used for any type of android projects, including commercial apps.

    http://android9patch.blogspot.com/

    Enjoy!

    Richard.

Comments are now closed for this article.