Android ImageButton Example

android.widget.ImageButton is used to create a button with image in android app. It is similar with android Button object. You can also set an onClickListener to it to process button click event. But ImageButton do not has text property, if you want to display both text and image in a button, you need to use other solutions. We will introduce how to implement that in later example. This example will just introduce ImageButton.

1. Android ImageButton Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/Hyu-jnkL6p8.

There are two ImageButton objects at the center of the screen. When you click the first one, the button image will be changed by the click counter. And a toast message will also popup at the screen bottom. When you click the second imagebutton, it will open a browser and links to amazon.com website.

2. Android ImageButton Example Files.

The core source files for this example is MainActivity.java and activity_main.xml.

2.1 Main Activity.

MainActivity.java

package com.dev2qa.imagebutton;

import android.content.Intent;
import android.graphics.drawable.Drawable;
import android.media.MediaPlayer;
import android.net.Uri;
import android.provider.MediaStore;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;

import java.io.File;

public class MainActivity extends AppCompatActivity {

    // This is an integer counter used to decide which picture to display in the image button.
    private int counter = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        setTitle("dev2qa.com - Android ImageButton Example.");

        // Get the ImageButton object.
        final ImageButton imageButton = (ImageButton)findViewById(R.id.imageButton);

        // When the imageButton is clicked.
        imageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                // This string buffer will be used to save toast message.
                StringBuffer msgBuf = new StringBuffer();

                // This drawable object will be used to load different image.
                Drawable drawable = null;

                if(counter%2==0)
                {
                    drawable = getDrawable(R.drawable.normal_face_icon);

                    msgBuf.append("You clicked the smile face button.");
                }else
                {
                    drawable = getDrawable(R.drawable.smile_face_icon);
                    msgBuf.append("You clicked the normal face button.");
                }

                // Set drawable object to imagebutton.
                imageButton.setImageDrawable(drawable);

                counter++;

                // Popup toast message at the screen bottom.
                Toast.makeText(MainActivity.this, msgBuf.toString(), Toast.LENGTH_SHORT).show();
            }
        });


        // Get the amazon imagebutton.
        ImageButton imageButtonAmazon = (ImageButton)findViewById(R.id.imageButtonAmazon);
        // When click this imagebutton, it will start a new intent to open browser to access amazon.com.
        imageButtonAmazon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("http://www.amazon.com"));
                startActivity(browserIntent);
            }
        });

    }
}

2.2 Main Activity Layout Xml File.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/smile_face_icon" />

    <ImageButton
        android:id="@+id/imageButtonAmazon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/amazon_icon"
        android:layout_marginTop="20dp"/>
</LinearLayout>