Jetpack Compose is a modern Android UI toolkit that simplifies and accelerates UI development. To create a ListView in Jetpack Compose using Android Studio, you will use the LazyColumn component. This component is designed for efficient rendering of large lists by only creating and rendering the visible items on the screen.
Page Contents
Prerequisites
Before we begin, make sure you have set up Jetpack Compose in your Android project. You can follow the official documentation to get started: Jetpack Compose Setup
Creating a Basic List
Here’s a step-by-step guide on how to create a basic list:
Create a Composable function that will define your list. Inside this function, you will use LazyColumn:
@Composable fun ListViewInCompose() { LazyColumn( modifier = Modifier.fillMaxSize() ) { // List items will be added here } }
Inside the LazyColumn block, you can add your list items using the items function. This function takes a list of data and a lambda that defines how each item should be displayed:
Here’s the complete example of how your code might look:
Create ListView in Jetpack Compose using items function
package com.techpassmaster.jetpackcomposeseries import android.os.Bundle import android.widget.Toast import androidx.activity.ComponentActivity import androidx.activity.compose.setContent 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.Divider import androidx.compose.material.MaterialTheme import androidx.compose.material.Surface import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.techpassmaster.jetpackcomposeseries.ui.theme.JetpackComposeSeriesTheme import androidx.compose.material.Text class ListViewActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { JetpackComposeSeriesTheme { // A surface container using the 'background' color from the theme Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background ) { ListViewInCompose() } } } } } @Preview @Composable fun ListViewInCompose() { val personList = listOf( "Ruth", "Jackson", "Debra", "Allen", "Gerald", "Harris", "Raymond", "Carter", "Jacqueline", "Torres", "Joseph", "Nelson", "Carlos", "Sanchez", "Ralph", ) val context = LocalContext.current LazyColumn { items(items = personList, itemContent = { person -> Text( text = person, modifier = Modifier .padding(16.dp) .clickable { Toast .makeText(context, "$person", Toast.LENGTH_SHORT) .show() } ) Divider() } ) } }
Create ListView in Jetpack Compose using itemsIndexed function
package com.techpassmaster.jetpackcomposeseries import android.os.Bundle import android.widget.Toast import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.material.Divider import androidx.compose.material.MaterialTheme import androidx.compose.material.Surface import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.techpassmaster.jetpackcomposeseries.ui.theme.JetpackComposeSeriesTheme import androidx.compose.material.Text class ListViewActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { JetpackComposeSeriesTheme { // A surface container using the 'background' color from the theme Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background ) { ListViewInCompose() } } } } } @Preview @Composable fun ListViewInCompose() { val personList = listOf( "Ruth", "Jackson", "Debra", "Allen", "Gerald", "Harris", "Raymond", "Carter", "Jacqueline", "Torres", "Joseph", "Nelson", "Carlos", "Sanchez", "Ralph", ) val context = LocalContext.current LazyColumn { itemsIndexed(personList) { index, item -> Text( text = "${index+1}. $item", modifier = Modifier .padding(16.dp) .clickable { Toast .makeText(context, "$index - $item", Toast.LENGTH_SHORT) .show() } ) Divider() } } }
With this example, you’ve learned how to create a basic list using Jetpack Compose. You can further customize the appearance and behavior of your list, but this simple guide should give you a solid starting point. Happy coding!
You May Also Like ⇣
- Text in Jetpack Compose
- Clickable Text in Jetpack Compose
- Underline Text in Jetpack Compose
- Bold Italic Underline in Jetpack Compose