Skip to content

Making Prettier Buttons in android; XML (rollover,selection & focus effects), 9patch images and transparency

by mat on August 23rd, 2010

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.

Ugly Buttons:
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!)

"Ugly" default buttons in android

Button States

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 true Button 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.

draw9patch tool button android

Using draw9patch tool to make a 9patch png for use as a strechable button

XML Code

button.xml

<?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/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>

main.xml
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" />

Results
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):

Pretty Buttons with transparency using 9patch png and xml

Pretty Buttons with transparency using 9patch png and xml

Below are a few examples of my work with some nice transparent buttons:

Example 9 patch image

button.9.png

button.9.png

15 Comments
  1. m3n0R permalink

    Hi Mat. I’ve just seeing your work, and it’s awesome. I’m trying to do a button gridview, just like your soundboards, but i can’t find any code on Internet about that. I want to ask you something..
    Is it possible to do multiple holding clickable buttons in a GridView ? Do you understand me?(I’m spanish, sorry for my explanation)

    I want to click some of gridview buttons and those should be holding remaining clicking another button (in context menu for example…). Thank you!!!

  2. @m3n0R Thanks, I’m currently working on a gridview tutorial which should be available soon. I’m not sure what you mean…

    Do you mean that when you long press on a button a context menu should appear? This is what happens in my apps which then gives you the choice to save as ringtone, alarm or notification.

  3. m3n0R permalink

    I want to do exactly the same as your application, with some requirements :

    - Dynamic number of buttons (It depends ArrayList)
    - Toggle button. When you press some of those buttons, they have to remain pressed, just like togglebutton behavior.

    Sorry for my english, i’m spanish. Do you understand me now?

  4. I love it! Nice, clear explanation. My button lights up when pressed! Beautiful. I also designed buttons in several colors which are randomly assigned in my button adapter (thanks again for the adapter example).

    All button changes worked except for ‘focused’=true && ‘pressed’=true:
    The button changes color when highlighted (with a ‘trackball’), but does not change when it is subsequently clicked. Maybe it has something to do with the API (I’m designing for 1.6).

    My next move is to remove the orange background when the button view is highlighted via the trackball, so that my ‘highlighted’ button style is the only change seen by the user.

    Great work!

    -Rich

  5. m3n0R permalink

    Hi again @mat!
    I’m here to make you one more question. I finished my Android project, but Now I’m working improving it in Design and programatically correct.

    I would like to know if you could send me the buttons you did for your scoreboard, or, how can I create them, because I have download a transparent button from google, and when I open it with draw9patch i can’t do anything :S

    If you don’t want to give me your images I will understand. In that case, could you tell me the measure (width and high) of the buttons ? (for normal view and landscape view too…)

    Thank you very much guy! gl!

  6. @m3n0r I have added an example 9 patch png at the bottom of the post.

  7. m3n0R permalink

    Thank you ;)

  8. update: if you want the buttons to be ‘highlightable’ but not the background of the gridview, use the following command after you create the gridview object in the main program:

    gridviewobject.setFocusable(false);

  9. 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.

  10. Darie permalink

    Sorry , you do not show us an example of button_pressed image for example. I find you post rather useless if it is not complete explanation of how to do those kinds of buttons…

  11. Ingersoll permalink

    Hi, I have a problem with selector.xml. I have a button were am using background calling selector file. Sometimes when am navigating through other screen and coming back to that screen. Button’s background image is missing. Its failed to load.. Can you anyone please help in this……….

  12. hejie permalink

    Found a problem, do not know the brother you are experiencing not, switch the screen anyway, when, in different machine, the content of GridView left and right may and the interval between the screen is not the same situation (one hand, while small), I ask you how to solveof? I tried to press screen ratio mGrid.setPadding (slack / 10, 0, slack / 10, 0);, seems useless has always been on the right interval greater than the left interval

  13. hey man i liked the new buttons but if u can please post the 4 photos of the button state ? i need them to have the same effect as ur tutorial thanks in advanced

  14. This blog was… how do you say it? Relevant!!
    Finally I have found ssomething that helped me.
    Thnk you!

Trackbacks & Pingbacks

  1. AMS Part 4: Placing and Customizing Buttons | Super Mekanismo

Leave a Reply

Note: I am currently writing my thesis so probably wont have time to reply to your comment
Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS