Learn Mobile App Development: Use ImageButton Selector In Android

In the last tutorial, we saw how to use “ImageButton” to display a “Button” with a customized background image. But that's not all, we can use more than just a simple image. Android allows us to change the button’s background depending on the different states like default, focused or pressed. We shall learn how to use this feature in this tutorial.

1. Add Images to Resources

We shall choose 3 images for the 3 button states, and put them into “res/drawable” folder. For illustration purpose, we are using three kinds of tennis balls as the button backgrounds.

button_normal_green.png – Default image button.
button_focused_orange.png – Displayed when the button is focused, for example, when phone’s keypad is moved on to this button.
button_pressed_red.png – Displayed when the button is pressed.

2. Add Selector for different button states

Now, we shall create a new XML file in “res/drawable/” folder and name it suitably. In this case, we shall just name it as “new_button.xml“. This file defines which button state corresponds to which image.
This button can now be referenced with the Id : @drawable/new_button.

File : res/drawable/new_button.xml


<?xml version="1.0" encoding="utf-8"?>



<selector xmlns:android="http://schemas.android.com/apk/res/android">


<item android:drawable="@drawable/button_pressed_red"


      android:state_pressed="true" />


<item android:drawable="@drawable/button_focused_orange"


      android:state_focused="true" />


<item android:drawable="@drawable/button_normal_green"/>


</selector>

3. Add Button

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

File : res/layout/main.xml


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

              android:layout_width="fill_parent"

             android:layout_height="fill_parent"

             android:gravity="center"

             android:orientation="vertical" >

  

<Button       android:id="@+id/imageButtonSelector"

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

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

</LinearLayout>

4. Java Code

In the Main.java file, we shall add a simple click listener to the normal button.

File : Main.java


package com.endeavour.ImgBtnSelector;



import android.app.Activity;

import android.os.Bundle;

import android.widget.Button;

import android.widget.Toast;

import android.view.View;

import android.view.View.OnClickListener;



public class Main extends Activity {




                Button imageButton;



                @Override

                public void onCreate(Bundle savedInstanceState) {

                       super.onCreate(savedInstanceState);

                       setContentView(R.layout.main);

                       addListenerOnButton();

                }



                public void addListenerOnButton() {

                imageButton = (Button) findViewById(R.id.imageButtonSelector);

                imageButton.setOnClickListener(new OnClickListener() {

                      @Override

                      public void onClick(View arg0) {




                      Toast.makeText(HomeScreen.this,"ImageButton(selector) is clicked!", Toast.LENGTH_SHORT).show();

                      }

               });

         }

 }