jetpack compose - Image clickable

Compose Image Clickable

The Image widget allows android developers to display an image object to the app user interface using the jetpack compose library. Android app developers can show image objects to the Image widget from various sources such as painter resources, vector resources, bitmap, etc. Image is a very essential component of the jetpack compose library. Android app developers can change many properties of an Image widget by its modifiers such as size, shape, etc.

We also can specify the Image object scaling algorithm, content description, etc. But how can we set a click event to an Image widget in a jetpack compose application? There is no built-in property/parameter/argument to set up an onClick event directly to the Image widget. This android application development tutorial will demonstrate to us how we can add a click event to the Image widget and make it clickable.

Click event of a widget allow app users to execute a task such as showing a toast message by clicking a widget’s area. To achieve the click functionality in an Image widget we have to do a simple trick. In the following code snippets, we put two Image objects inside a Column layout. Then we assign the modifier of those Image objects. This modifier object has an argument/parameter/property name ‘clickable’. We can assign some values inside this clickable property to set up a click event in an Image widget. Inside the clickable function, we can put an onClick event, a click label, and an enabled value. The ‘enabled’ value allows us to dynamically enable and disable Image clickable functionality in runtime.

Finally, we can set the Image widget clickable functionality by using its modifier’s ‘clickable’ object. Copy the following code and paste it into your android studio to test the code.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        val context = LocalContext.current

        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(Color(0xFFFEFEFA))
                .padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(32.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(
                painter = painterResource(id = R.drawable.flowers3),
                contentDescription = "Localized description",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(150.dp)
                    .clickable(
                        enabled = true,
                        onClickLabel = "Clickable image",
                        onClick = {
                            Toast
                                .makeText(
                                    context,
                                    "Image clicked",
                                    Toast.LENGTH_SHORT
                                ).show()
                        }
                    )
            )

            Image(
                painter = painterResource(id = R.drawable.flowers3),
                contentDescription = "Localized description",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(150.dp)
                    .clickable {
                        Toast
                            .makeText(
                                context,
                                "Second image clicked",
                                Toast.LENGTH_SHORT
                            ).show()
                    }
            )
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}