Create ImageButton in Kotlin programmatically

In this short code example below we will learn how to create ImageButton in Kotlin programmatically.

A short code snippet in Kotlin below will cover:

• Create ImageView in a ConstraintLayout
• Load image from a resource
• Set onClickListener on ImageButton
• Change ImageButton image when the button is tapped

For this example to work and to load an image, you will need to add an image into the /app/src/main/res/drawable folder in your project. In my case the name of the image is android_logo.png and it is inside of the drawable folder.

ImageButton Example in Kotlin

Please note that in the code below, when I set an image on the imageButton with the setImageResource() function, I specify the name of the image I am loading by using the following format: R.id.<name of image file here>. Like so:

imageView.setImageResource(R.drawable.android_logo)

Here is complete code example:

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.constraint.ConstraintLayout
import android.view.View
import android.widget.ImageButton

class ImageButtonExample : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_image_button_example)
        val constraintLayout = findViewById(R.id.constraintLayout) as ConstraintLayout
        val imageButton = ImageButton(this)
        imageButton.setImageResource(R.drawable.android_logo)
        imageButton.setOnClickListener(View.OnClickListener {
            imageButton.setImageResource(R.drawable.android_logo_black)
        })
        constraintLayout.addView(imageButton)
    }
}

Layout XML File

Below is the activity_image_button_example.xml file which is being used in the setContentView in the code example above.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/constraintLayout"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.appsdeveloperblog.kotlin.examples.ImageButtonExample">

</android.support.constraint.ConstraintLayout>

When you run this example, you should initially see an ImageButton with an image set with the line:

imageButton.setImageResource(R.drawable.android_logo)

and when the ImageButton is tapped the image on the button should switch to the one set inside of setOnClickListener:

imageButton.setImageResource(R.drawable.android_logo_black)

 

And this is it! :). Now you should be able to create buttons in your Android mobile app build with Kotlin that have nice images on them.

If you are just starting to learn how to build mobile apps for Android with Kotlin, check out the below books and video courses which you might help you with your learning progress.

Kotlin Video Lessons