Android ImageButton

Download android ImageButton customization & usage sample

Android ImageButton displays a button with an image. It can't have text like Android Button. Android ImageButton can be pressed or clicked by the user.

By default, when no image src or background is set, an ImageButton looks like a regular Button, with the standard button background that changes color during different button states.

To remove the standard button background image, we can either provide our own image as android:src attribute or we can provide background color using android:background attribute.

The image on the surface of the button is defined either by the android:src attribute in the <ImageButton> XML element or by the setImageResource(int) method.

Android ImageButton usage?

Android ImageButton usage in xml layout is as follows:

Adding custom image source in android button?

We can provide simple bitmap as ImageButton's android:src attribute or color as android:background attribute of Android ImageButton but we should avoid it. Instead of supplying simple bitmap we should use selector to define state list for our button that can use simple bitmap for android:src and color for android:background attribute.

To create a state list drawable for your button background create three bitmaps for the button background that represent the normal, pressed, and focused button states. Place the bitmaps into the res/drawable/ directory of your project

Create a new XML file in the res/drawable/ directory and name it button_selector.xml. Insert the following XML:

res -> drawable -> button_selector.xml

Last step is to set android:src attribute of desired ImageButton as follows:

How to handle click event of android ImageButton?

There are several ways to handle click event of an android ImageButton. We are going to demonstrate 4 different way of handling click event of an Android ImageButton:

  1. A simple way to handle click event of a button is to define onClick attribute of ImageButton as follows:

    Now create a method named handleIbtnHomeClick inside Activity class that hold the ImageButton layout. This method must be public, Return void and accept View as a parameter as follows:

  2. We can also declare the click event handler programmatically rather than in an XML layout. To declare the event handler programmatically, create an View.OnClickListener object and assign it to the button by calling setOnClickListener(View.OnClickListener) as follows:

  3. Third way to handle click event of a button, implements View.OnClickListener, and override onClick method as follows:

    Next step is to assign onClickListener for the button as follows:

  4. Other way to handle onClick event of a button is to create a separate class that implements View.OnClickListener as follows:

    Next step is to assign onClickListener for the button as follows:

Example of Android ImageButton

Let's quickly implement a sample for Android ImageButton, which demonstrate whatever we discussed about Android ImageButton.


Android image button

Step 1: Create a new project in Android Studio and name it Android ImageButton.

Step 2: Open res -> layout -> activity_main.xml and add following code


Step 3: Open res -> drawable and place 3 different images for different states of button. Images of my sample is home_normal.png, home_focussed.png, home_pressed.png

Step 4: Create res -> drawable -> button_selector.xml and add following code


Step 5: Create a class class that implements View.OnClickListener interface. Replace the code of with below given code:

Step 6: Add below given code to your

Step 7: Clean and run the project to see the result.

Share & Like

Tutorial topics

About is for Java, J2ee, Html5 and android developers. All tutorials are well explained and are easy to understand. We have tested every tutorials on our developement environment before posting it in public domain.