JetPack Compose : ListView Example with ItemClick Listener

 

 1. Add the required dependencies to your project's build.gradle file:

 

In root Project gradle file

buildFeatures {
        compose true
} 

In app module gradle file

dependencies {
    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.compose.ui:ui:1.0.4'
    implementation 'androidx.compose.material:material:1.2.1'
    implementation 'androidx.compose.ui:ui-tooling:1.0.4'
}

 2. Create a new Composable function in your activity or fragment

package com.rajeshvijayakumr.jetpackcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class ListViewActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val items = listOf(
            "Item 1", "Item 2", "Item 3",
            "Item 4", "Item 5", "Item 6"
        )

        setContent {
            MyScreen(items = items)
        }
    }
}

@Composable
fun MyScreen(items: List<String>) {
    LazyColumn {
        items(items) { item ->
            ListItem(item = item)
        }
    }
}

@Composable
fun ListItem(item: String) {
    val context = LocalContext.current
    // Use Clickable modifier to handle item click
    Column(
        modifier = Modifier
            .clickable { showToast(context, item) }
            .fillMaxWidth()
            .fillMaxWidth()
            .padding(6.dp)
            .background(
                colorResource(id = android.R.color.holo_blue_dark),
                shape = RectangleShape
            ),
        verticalArrangement = Arrangement.Center,
    ) {

            Text(
                text = item,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(9.dp)
                    .height(60.dp)
                    .wrapContentSize(align = Alignment.CenterStart),
                color = Color.White,
                textAlign = TextAlign.Start

            )
    }
}

fun showToast(context: Context, item: String) {
    Toast.makeText(
        context,
        "Clicked: $item",
        Toast.LENGTH_SHORT
    ).show()
}

In the above example, MyScreen is a composable that takes a list of items and creates a LazyColumn with items to iterate over the list. For each item, it calls the ListItem composable, passing the item as a parameter.

ListItem is a custom composable that represents each item in the list. You can define the content and layout for each item inside this composable. In this example, it's a Column with a Text component displaying the item's text. You can add additional custom content for each item as needed.

In the MainActivity, the list of items is provided to the MyScreen composable, which sets the content view of the activity using setContent.

When you run the app, you should see a list of items displayed vertically, and you can customize the content and layout of each item in the ListItem composable based on your requirements.

 Output ScreenShot

 

 

 

 

 

 

 

 

 

Source Code : Click Here to Github Link