Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Enhancing UI Design Using Image Buttons

Author: Rachee Singh
Published? true -- FormatLanguage: W

Problem:

While building an application, many times the UI design requires the effective use of image buttons. It can save effort compared to text views with descriptive text, since an image can explain the scenario much better than a lot of words.

Solution:

This application provides the user with 2 options:

  1. To start the application (which could be, start bluetooth scan or play music, GPS scan etc)
  2. Configure the application (Complete settings for the application).

So here is an intuitive UI with 2 image buttons providing these choices.

Discussion:

Making one's own Image Buttons requires defining the characteristics of the button as an XML file that should be placed in /res/drawable. This XML specifies the 3 states of an Image Button:

  1. Pressed State
  2. Focused State
  3. Otherwise.

For Instance:


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

When Play Button is not pressed:

When Play Button is pressed:

So, for each of these states, the ID of an image is specified (the image must be included in the packaged application under /res/drawable as a .png). When the button is pressed, the play_pressed image is displayed. There are 2 such buttons in the application, Play Button and the Settings Button. In the .java file of the application, the onClick aspect of the buttons can be taken care of. In this recipe, merely a toast is displayed with some appropriate text. Programmers can start a new activity from here or broadcast an intent and many other things based on their requirement.

Download:

The source code for this project can be downloaded from https://docs.google.com/leaf?id=0B_rESQKgad5LYTVjZGMzZmItNDYzNC00YmRmLTlkMTktOTIzNTM0NzVmMDQ2&hl=en_US.
racheesingh 2011-07-23 00:09:23.759 Thanks to jpelgrim's comment, I have modified the recipe and the source code. Now the Play button is a toggle button! Thanks jpelgrim!
jpelgrim 2011-07-22 05:53:08.652 Hi Rachee, I think it will be more intuitive to make the first Button a ToggleButton (and this adds a little extra information to your recipe. See the altered sources here: http://dl.dropbox.com/u/659246/Recipie1.zip Cheers, Johan