Making Prettier Buttons in android; XML (rollover,selection & focus effects), 9patch images and transparency
Alot of the soundboards out there on the market look a little bit ugly by using the default android buttons in conjunction with a background (no offense to developers of these, perhaps they can learn from this); this mini-tutorial explains how to use xml to create a customised nice looking button thing.
Below is show the example I will use to demonstrate the default buttons in use with a background image (It’s a picture of me hugging the android statue!)
There are four images you will need to create (you can use less if you want); one for each of the following states:
|state_focused||state_pressed||What this means|
|true||false||Button highlighted (selected with trackpad)|
|true||true||Button foussed and pressed|
|false||false||Normal state of button|
I recommend creating a nine-patch png for the button image, this way your image can be stretched to fit the button size as needed. Also soundboards look rather snazzy if you include a background image, and then you can use transparency in your png so that your buttons don’t obscure it.
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="https://schemas.android.com/apk/res/android"> <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/button_selected" /> <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/button_focus" /> <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/button_pressed" /> <item android:drawable="@drawable/button_normal" /> </selector>
An example usage of how to use this newly created xml button in your layout file.
<Button android:id="@+id/mysexynewbutton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="30sp" android:textStyle="bold" android:text="Stealthcopter FTW" android:background="@drawable/button" />
Now you should have some nice sexy customised buttons that change depending on thier state. Which makes our example now look like this (I increased the padding and margins of the buttons slightly):
Below are a few examples of my work with some nice transparent buttons:
Example 9 patch image