In last Android tutorial, you use “ImageButton” to display a “Button” with a customized background image easily. However, you can do more than that just a simple image, Android allow you to change the button’s image depends on different states like button is focused or button is pressed.

This example is referenced from this Android custom button article, with minor changes.

P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3.

1. Add Images to Resources

Prepare 3 images for button states, and put it into “resource/drawable” folder.

  1. button_normal_green.png – Default image button.
  2. button_focused_orange.png – Display when button is focused, for example, when phone’s keypad is move (focus) on this button.
  3. button_pressed_yellow.png – Display when button is pressed.

2. Add Selector for different button states

Now, create a new XML file in “res/drawable/” folder, in whatever name you want, in this case, we just give a name as “new_button.xml“. This file defined which button state is belong to which image.

Now, you can refer to this button via this Id : @drawable/new_button.

File : res/drawable/new_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="">
    <item android:drawable="@drawable/button_pressed_yellow"
          android:state_pressed="true" />
    <item android:drawable="@drawable/button_focused_orange"
          android:state_focused="true" />
    <item android:drawable="@drawable/button_normal_green" />

3. Add Button

Open “res/layout/main.xml” file, add a normal button, and attach the background image to above “new_button” via “android:background="@drawable/new_button

File : res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
    android:orientation="vertical" >

        android:background="@drawable/new_button" />

4. Code Code

A normal button with a simple click listener.

File :


import android.os.Bundle;
import android.widget.Button;
import android.widget.Toast;
import android.view.View;
import android.view.View.OnClickListener;

public class MyAndroidAppActivity extends Activity {

	Button imageButton;

	public void onCreate(Bundle savedInstanceState) {



	public void addListenerOnButton() {

		imageButton = (Button) findViewById(;

		imageButton.setOnClickListener(new OnClickListener() {

			public void onClick(View arg0) {

					"ImageButton (selector) is clicked!",





5. Demo

Run the application.

1. Result, default button. (button_normal_green.png)

normal button

2. Button is focused. (button_focused_orange.png)

button is focused

3. Button is pressed. (button_pressed_yellow.png)

button is pressed

Download Source Code


  1. Android custom button example
  2. Android ImageButton example