Enhancing UI Design Using Image Buttons
In Chapter: Graphical User Interface
Author: Rachee Singh ('racheesingh')
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.
This application provides the user with 2 options:
- To start the application (which could be, start bluetooth scan or play music, GPS scan etc)
- Configure the application (Complete settings for the application).
So here is an intuitive UI with 2 image buttons providing these choices.
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:
- Pressed State
- Focused State
<?xml version="1.0" encoding="utf-8"?>
<item android:drawable="@drawable/play" />
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.
The source code for this project can be downloaded from