ImageButton in Android, Explained

ImageButton is a simple button which only display a picture on it. It works similarly like other push Button. The only difference is that it displays an image on it.

By default, the ImageButton looks same as normal button and it perform an action when user click or touches it, but only difference is we will add a custom image to the button instead of text.

And ImageButton is subclass of the ImageView.

public class ImageButton
extends ImageView 

ImageButton Displays a button with an image (instead of text) that can be pressed or clicked by the user. By default, an ImageButton looks like a regular Button, with the standard button background that changes color during different button states. The image on the surface of the button is defined either by the android:src attribute in the <ImageButton> XML element or by the ImageView.setImageResource(int) method.

To remove the standard button background image, define your own background image or set the background color to be transparent.

To indicate the different button states (focused, selected, etc.), you can define a different image for each state. E.g., a blue image by default, an orange one for when focused, and a yellow one for when pressed. An easy way to do this is with an XML drawable "selector." For example:

<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
           android:drawable="@drawable/button_pressed" /> <!-- pressed -->
     <item android:state_focused="true"
           android:drawable="@drawable/button_focused" /> <!-- focused -->
     <item android:drawable="@drawable/button_normal" /> <!-- default -->
 </selector>

Save the XML file in your project res/drawable/ folder and then reference it as a drawable for the source of your ImageButton (in the android:src attribute). Android will automatically change the image based on the state of the button and the corresponding images defined in the XML.

The order of the <item> elements is important because they are evaluated in order. This is why the "normal" button image comes last, because it will only be applied after android:state_pressed and android:state_focused have both evaluated false.

In android, we can add a image to the button by using <ImageButton> attribute android:src in XML layout file or by using setImageResource() method.

In android, we can create ImageButton control in two ways either in XML layout file or create it in Activity file programmatically.

Create ImageButton in XML Layout File

Below code snippet, here we defined ImageButton control and we are showing the image from drawable folder using android:src attribute in xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageButton
        android:id="@+id/addBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/add_icon" />
</LinearLayout>

Create ImageButton Control in Activity File

In android, we can create ImageButton control programmatically in activity file based on our requirements. Following is the example of creating ImageButton control dynamically in activity file.

LinearLayout layout = (LinearLayout)findViewById(R.id.l_layout);
ImageButton btn = new ImageButton(this);
btn.setImageResource(R.drawable.add_icon);
layout.addView(btn);