Android Image Button - How to Handle Image Button click events with kotlin code

Last updated Dec 12, 2021

In this Android example tutorial, we'll look at how to create an ImageButton, and handle the onClick and long click events, and explore its various properties in Android Studio using the Kotlin programming language.

What is ImageButton?
ImageButton is a view that shows a button with an image in the background and behaves exactly like a button when clicked. ImageButtons, ToggleButtons, and other button types are available in Android.

Implementation:

To begin, Create a new project in android studio with the name ImageButton_Kotlin. Then press the Finish button.
Open the activity main.xml file and add the LinearLayout with orientation (Vertical or horizontal).

    <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="#22FFAA00"
    tools:context=".MainActivity"></LinearLayout>


 

 In activity_main.xml, insert an ImageButton view inside a LinearLayout.

  <ImageButton
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:id="@+id/fbBtn"
        ></ImageButton>

 

Add an image to the ImageButton using the src property and set the scaleType property to centerCrop.
Open browser and download an image, then copy it from the folder and paste it inside

app > res > drawable


and then use like this "@drawable/image_name".

Note: Use the background property for the image to make it look more appropriate.

 

 android:background="@drawable/facebook"


** Differences between using the src and background properties in below image.

Android ImageButton Image


FaceBook ImageButton uses src property and Twitter uses background property.
 

ImageButton has the following attributes
    id, padding, background, layout_margin, layout_marginLeft, layout_marginRight, layout_marginEnd, layout margin, paddingLeft and so on....

        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp"
        android:padding="10dp"
        android:paddingLeft="10dp"
        android:layout_margin="10dp"

 

Now, let's put our ImageButton to use inside Activity. Any view, from layout to activity, can be used by using its unique id: "id" property with findViewById() method.

 

val fbBtn = findViewById(R.id.fbBtn)  

 


 R.id.fbBtn is the id of the button defined in the activity main.xml file.
 

By implementing onClickListener, we can now add an event listener to the ImageButton instance.

fbBtn.setOnClickListener {
            Toast.makeText(
                this@MainActivity,
                "Welcome to FaceBook", Toast.LENGTH_SHORT
            ).show()
        }

 

Using setOnLongClickListener, we will add long press functionality to ImageButton.

fbBtn.setOnLongClickListener{
            Toast.makeText(
                this@MainActivity,
                "Facebook Button Long Press", Toast.LENGTH_SHORT
            ).show()
            true
        }


If we set the value to true, long press is enabled; if false, long press is disabled.
 

  1. OnClick of ImageButton in the above code will display a Toast of " Welcome to FaceBook ".
    Note: Toast is a small message that appears on the screen for some time.
     
  2. Now run the application, you will see the output shown below.

 

OUTPUT:

Kotlin ImageButton Example


 Fig: Two ImageButton View (Facebook and Twitter).

 

ImageButton Example Output


Fig: OnClickEvent on Facebook Button.

ImageButton Example1

 

Fig: OnLongClickEvent on Facebook Button.



Complete source code  for Android ImageButton example:

 

activity_main.xml file

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="#22FFAA00"
    tools:context=".MainActivity">

    <ImageButton
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:id="@+id/fbBtn"
        android:layout_marginRight="20dp"
        android:background="@drawable/facebook"
        android:scaleType="centerCrop"></ImageButton>
    <ImageButton
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:id="@+id/twitterBtn"
        android:layout_marginLeft="20dp"
        android:background="@drawable/twitter"></ImageButton>

</LinearLayout>


 

MainActivity.kt file

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageButton
import android.widget.Toast

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val fbBtn = findViewById(R.id.fbBtn)
        val twitterBtn = findViewById(R.id.twitterBtn)

        fbBtn.setOnClickListener {
            Toast.makeText(
                this@MainActivity,
                "Welcome to FaceBook", Toast.LENGTH_SHORT
            ).show()
        }

        fbBtn.setOnLongClickListener{
            Toast.makeText(
                this@MainActivity,
                "Facebook Button Long Press", Toast.LENGTH_SHORT
            ).show()
            true
        }

        twitterBtn.setOnClickListener {
            Toast.makeText(
                this@MainActivity,
                "Welcome to Twitter", Toast.LENGTH_SHORT
            ).show()
        }
        twitterBtn.setOnLongClickListener{
            Toast.makeText(
                this@MainActivity,
                "Twitter Button Long Press", Toast.LENGTH_SHORT
            ).show()
            true
        }
    }
}

 

Conclusion:
 
We've gone over how to add an ImageButton to Android and handle the onClick and LongClick events with Kotlin code.

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

820 Views