ListView in Jetpack Compose using Android Studio

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.

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