Jetpack Compose Listview OnItem Click Listener Events

Last updated Aug 24, 2022

In this Jetpack Compose tutorial we will learn about How to capture Listview Item Click Events with Compose Listview. In Android application Listview will used to display large amount of data. This data might be came from Internet or local data, we will use LazyRow and LazyColumn Jetpack Compose widgets to display these data. 

To capture each list item data on Click event we will add Click Listener on Modifier property

Let get started about handle Listview ItemClickListener with Modifier Clickable() property.


Step 1: Create Simple Compose application. To create new Jetpack project in Android studio please refer how to create first Project in Android studio using Jetpack compose


Step 2: Create Listview with multiple data. Read Create Listview with compose in android 


Step 3: Let Create List Item which will display image and title based on previous example

Card(
                        elevation = (5f.dp),
                        modifier = Modifier
                            .padding(8.dp)

                    ) {
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(all = 8.dp), verticalAlignment = Alignment.CenterVertically) {
                            val bitmap = remember { mutableStateOf(null) }
                            val context = LocalContext.current
                            Image(
                                // on below line we are adding the image url
                                // from which we will  be loading our image.
                                painter = rememberAsyncImagePainter(item.icon),

                                // on below line we are adding content
                                // description for our image.
                                contentDescription = "gfg image",


                                // on below line we are adding modifier for our
                                // image as wrap content for height and width.
                                modifier = Modifier
                                    .height(100.dp)
                                    .width(100.dp)
                                    .wrapContentWidth()
                            )
                            Spacer(modifier = Modifier.width(50.dp))
                            Text(text = item.title, fontSize= TextUnit(value = 20f, type = TextUnitType.Sp))
                        }
                    }
 

 

This will display each individual list item data. Let add click event by set clickable property to the Card compose Modifier

Card(
                        elevation = (5f.dp),
                        modifier = Modifier
                            .padding(8.dp).
                            clickable {
                                    Toast.makeText(applicationContext,"OnItem Click",Toast.LENGTH_SHORT).show()
                                }

                    )

 

Step 4:  Let run application and click on each item you can capture each item click event and we can get the current item data

Compose Listview Click Listener example

 

Complete code for Listview OnItemClickListener example

package com.example.listviewclick
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Card
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.ExperimentalUnitApi
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.TextUnitType
import androidx.compose.ui.unit.dp
import coil.compose.rememberAsyncImagePainter
import androidx.compose.foundation.layout.fillMaxSize
import com.example.listviewclick.ui.theme.LIstviewClickTheme

class MainActivity : ComponentActivity() {

        val platformList = ArrayList<Platform>()
        @OptIn(ExperimentalUnitApi::class)
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)


            platformList.add(  Platform(title = "Android", icon = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Android_robot_head.svg/300px-Android_robot_head.svg.png"))
            platformList.add(  Platform(title = "Kotlin", icon = "https://pbs.twimg.com/profile_images/1399329694340747271/T5fbWxtN_400x400.png"))
            platformList.add(  Platform(title = "Java", icon = "https://upload.wikimedia.org/wikipedia/en/thumb/3/30/Java_programming_language_logo.svg/1200px-Java_programming_language_logo.svg.png"))
            platformList.add(  Platform(title = "Flutter", icon = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Android_robot_head.svg/300px-Android_robot_head.svg.png"))
            setContent {
                LIstviewClickTheme() {
                    // A surface container using the 'background' color from the theme
                    Surface(
                        modifier = Modifier.fillMaxSize(),
                        color = MaterialTheme.colors.background
                    ) {
                        lazyColumn(platforms =platformList )
                    }
                }
            }
        }

        @ExperimentalUnitApi
        @Composable
        fun lazyColumn(platforms:ArrayList<Platform>) {
            LazyColumn(){
                items(platforms, itemContent = {item ->
                    Card(
                        elevation = (5f.dp),
                        modifier = Modifier
                            .padding(8.dp).
                                clickable {
                                    Toast.makeText(applicationContext,"OnItem Click",Toast.LENGTH_SHORT).show()
                                }

                    ) {
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(all = 8.dp), verticalAlignment = Alignment.CenterVertically) {
                            val bitmap = remember { mutableStateOf(null) }
                            val context = LocalContext.current
                            Image(
                                // on below line we are adding the image url
                                // from which we will  be loading our image.
                                painter = rememberAsyncImagePainter(item.icon),

                                // on below line we are adding content
                                // description for our image.
                                contentDescription = "gfg image",


                                // on below line we are adding modifier for our
                                // image as wrap content for height and width.
                                modifier = Modifier
                                    .height(100.dp)
                                    .width(100.dp)
                                    .wrapContentWidth()
                            )
                            Spacer(modifier = Modifier.width(50.dp))
                            Text(text = item.title, fontSize= TextUnit(value = 20f, type = TextUnitType.Sp))
                        }
                    }
                })
            }
        }
    }
 

 

Conclusion: In this Compose tutorial we covered how to capture Listview Item Click Events with Modifier Clickable() property

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

565 Views
Projects By category
Categories