How to Create an ImageButton in Android?

Nowadays, image buttons play a big role in making the android application more interactive and user-friendly. Be it any social media app like Instagram or Facebook or any shopping app or streaming app, each application uses this feature widely. In this article, we will take a look at the implementation of this section in Android. 

We will be building a simple application in which we will be implementing an ImageButton and will be using it to create toasts and intents. After clicking on the image, it will behave in a similar manner to a  button and perform the desired task. (A sample video is given below to get an idea about what we are going to create in this article)

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Project just refer to this article on How to Create New Project in Android Studio. The code has been given in both Java and Kotlin Programming Language for Android.

Step 2: Add the Required Image to the Drawable Folder.

Drawable folder contains custom drawables or vector drawables or png’s that will automatically gain resource id usable in application. Usually it contains app graphics. 

Here, we’ll copy the image file that we’ve chosen and head over to the Android studio. Then open Project files and select Android files. Navigate to the app > res > drawable. Right-click on the drawable folder and open it in explorer. Paste the copied image here and close it. You will now be able to locate your image inside the drawable folder in android studio.

Step 3: Working with the activity_main.xml File

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:layout_editor_absoluteX="1dp"
    tools:layout_editor_absoluteY="1dp">

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_marginTop="200dp"
        android:layout_marginLeft="70dp"
        android:layout_marginRight="70dp"
        android:scaleType="fitCenter"
        app:srcCompat="@drawable/gfg" />
</LinearLayout>

Step 4: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail.

Java

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.widget.ImageButton;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    // Declaring the variable for image button
    ImageButton gfgImageButton;

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

        // Initializing the variable for image button
        gfgImageButton =  (ImageButton) findViewById(R.id.imageButton);

        // Below code is for setting a click listener on the image
        gfgImageButton.setOnClickListener(view -> {
            // Creating a toast to display the message
            Toast.makeText(MainActivity.this, "Welcome to GeeksforGeeks", Toast.LENGTH_SHORT).show();
            String url = "https://www.geeksforgeeks.org/";
            // Creating an explicit intent to open the
            // link stored in variable url
            Intent i = new Intent(Intent.ACTION_VIEW);
            i.setData(Uri.parse(url));
            startActivity(i);
        });
    }
}

Kotlin

import android.content.Intent
import android.net.Uri
import android.os.Bundle
import android.widget.ImageButton
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    // Declaring the variable for image button
    lateinit var gfgImageButton: ImageButton

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Initializing the variable for image button
        gfgImageButton = findViewById(R.id.imageButton)

        // Below code is for setting a click listener on the image
        gfgImageButton.setOnClickListener {
            // Creating a toast to display the message
            Toast.makeText(this, "Welcome to GeeksforGeeks", Toast.LENGTH_SHORT).show()
            val url = "https://www.geeksforgeeks.org/"
            // Creating an explicit intent to open the
            // link stored in variable url
            val i = Intent(Intent.ACTION_VIEW)
            i.data = Uri.parse(url)
            startActivity(i)
        }
    }
}

Output: