What is the Jetpack Compose equivalent of RecyclerView or ListView?

Question

In Jetpack Compose, how can I display a large list of data while laying out only the visible items, instead of composing and laying out every item on the initial layout pass? This would be similar to RecyclerView and ListView in the View toolkit.

One could use a for loop to place all of the components inside of a Column in a VerticalScroller, but this would result in dropped frames and poor performance on larger numbers of items.

Answer 1

The equivalent component to RecyclerView or ListView in Jetpack Compose is LazyColumn for a vertical list and LazyRow for a horizontal list. These compose and lay out only the currently visible items.

You can use it by formatting your data as a list and passing it with a @Composable callback that emits the UI for a given item in the list. For example:

val myData = listOf("Hello,", "world!")
LazyColumn {
    items(myData) { item ->
        Text(text = item)
    }
}

val myData = listOf("Hello,", "world!")
LazyRow { 
    items(myData) { item ->
        Text(text = item)
    }
}

You can also specify individual items one at a time:

LazyColumn {
    item {
        Text("Hello,")
    }
    item {
        Text("world!")
    }
}

LazyRow { 
    item {
        Text("Hello,")
    }
    item {
        Text("world!")
    }
}

There are also indexed variants, which provide the index in the collection in addition to the item itself:

val myData = listOf("Hello,", "world!")
LazyColumn {
    itemsIndexed(myData) { index, item ->
        Text(text = "Item #$index is $item")
    }
}

val myData = listOf("Hello,", "world!")
LazyRow { 
    itemsIndexed(myData) { index, item ->
        Text(text = "Item #$index is $item")
    }
}

These APIs were, in previous releases, known as AdapterList, LazyColumnItems/LazyRowItems, and LazyColumnFor/LazyRowFor.

Answer 2

Update in dev.16

• [ScrollableColumn] for vertically scrolling list
• [ScrollableRow] for horizontally scrolling list

Check it's implementation from ListCardViewTemplate

---

You can get the same essence of RecyclerView or ListView in JetpackCompose using AdapterList that's renamed in dev.14 preview version.

• [LazyColumnItems] for vertically scrolling list
• [LazyRowItems] for horizontally scrolling list

Check what's documentation says:

It was also moved into a lazy sub-package and split into two files. Plus I renamed params:

1. data -> items. this seems to be more meaningful then just raw data
2. itemCallback -> itemContent. this is more meaningful and we generally don't use word callback in the lambda names, especially for composable lambdas

Check how to use it:

@Composable
fun <T> LazyColumnItems(
  items: List<T>,
  modifier: Modifier = Modifier,
  itemContent: @Composable (T) -> Unit
) {
    LazyItems(items, modifier, itemContent, isVertical = true)
}

In .KT

LazyColumnItems(items = (0..50).toList()) { item ->
    cardViewImplementer(item)
 }

From my perspective LazyColumnItem or LazyRowItem is not working properly if your item layout is complex because it's stuck the list as a comparison to VerticalScroller working fine in this scenario.

Answer 3

LazyColumn and LazyRow are euquavalant to Recycleview.

/*
*
*  LazyColumn produces a vertically scrolling list,
*  LazyRow produces a horizontally scrolling list.
*
* */

@Composable
fun addUserList(userDataList: List<User>) {

    val context = LocalContext.current

    Column(
        modifier = Modifier
            .fillMaxSize()
            .fillMaxWidth()
            .fillMaxHeight()
    ) {

        LazyColumn(
            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 16.dp),
            verticalArrangement = Arrangement.spacedBy(3.dp),
        ) {

            // header
            item {
                Text(text = "I'm header.")
            }

            // main content
            items(
                userDataList,
                itemContent = { user ->
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .clickable {
                                context.showToast("you clicked ${user.name}")
                            },
                        verticalAlignment = Alignment.CenterVertically,
                        horizontalArrangement = Arrangement.spacedBy(16.dp),


                        ) {
                        //Text(text = user.name)
                        UserView2(user = user)


                    }

                    // add diver color
                    Divider(color = Color.LightGray)

                },

                )


            // footer
            item {
                Text(
                    text = "I'm footer.",
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center
                )
            }
        }
    }
}

//===============================//

Make sure you added glide compose dependency.

implementation "com.github.bumptech.glide:compose:1.0.0-alpha.1"

Row View :

// This is implementation for row view or equavalant to view in adapter which inflate for each row/record.

@OptIn(ExperimentalGlideComposeApi::class)
@Composable
fun UserView2(user: User) {
    GlideImage(
        model = "https://datanapps.com/public/dnarestapi/user/renold1.png",
        contentDescription = "getString(R.id.picture_of_cat)",
        // shows an error ImageBitmap when the request failed.

        modifier = Modifier
            .background(color = Color.Cyan, shape = CircleShape)
            .padding(PaddingValues(1.dp))
            .clickable(enabled = true) { }
            .width(50.dp)
            .height(50.dp),
    )
    Text(text = user.name, color = Color.Blue)
    Text(text = user.email, color = Color.Cyan)
}

Read More :

Compose List >> https://developer.android.com/jetpack/compose/lists

Glide compose >> https://bumptech.github.io/glide/int/compose.html

Compose list Video >> https://www.youtube.com/watch?v=1ANt65eoNhQ&t=1s&ab_channel=AndroidDevelopers

Output :