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 ButtonsBack to Android Cookbook Home | Up to Chapter: Graphical User Interface

Author: Rachee Singh ('racheesingh')
In Published Edition? Yes
FormatLanguage: WikiFormat

Enhancing UI Design Using Image Buttons

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.

See Also

Download

https://docs.google.com/leaf?id=0B_rESQKgad5LYTVjZGMzZmItNDYzNC00YmRmLTlkMTktOTIzNTM0NzVmMDQ2&hl=en_US