What Is The Jetpack Compose Equivalent Of Recyclerview Or Listview?

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

Solution 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.

Solution 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:

@Composablefun<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.