How to create a RecyclerView in Jetpack Compose?

In Jetpack Compose, there is no RecyclerView in the traditional sense. Lists are displayed using LazyColumn (for vertical lists) and LazyRow (for horizontal lists). They provide similar efficiency through element reuse.

Example of using LazyColumn:

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun SimpleList(itemsList: List<String>) {
    LazyColumn {
        items(itemsList) { item ->
            Text(text = item)
        }
    }
}

Explanation:

• LazyColumn: A composable function that displays items in a vertical list, creating them as needed.
• items(itemsList) { item -> ... }: An extension for LazyListScope that allows iterating over a data list (itemsList) and calling the provided Composable lambda for each element (item). This block defines how each list item looks.
• Text(text = item): A simple child composable that displays the text of the current list item.

Key features of LazyColumn/LazyRow:

• Efficiency: Items are created and composed only when they become visible on the screen or are close to the edge. This reduces memory consumption and improves performance for large lists.
• Simplicity: A simplified API compared to RecyclerView, without the need to create an adapter, ViewHolder, or manage the lifecycle of these components.
• Composable first: Fully integrates with other Compose functions.

You can use itemsIndexed to access the index of each element:

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun IndexedList(itemsList: List<String>) {
    LazyColumn {
        itemsIndexed(itemsList) { index, item ->
            Text(text = "Item at index $index: $item")
        }
    }
}

For more complex behaviors (e.g., different view types), you can use overloads of items or item:

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

sealed class ListItem {
    data class TextItem(val content: String) : ListItem()
    data class ImageItem(val url: String) : ListItem()
}

@Composable
fun MixedList(itemsList: List<ListItem>) {
    LazyColumn {
        items(itemsList) { item ->
            when (item) {
                is ListItem.TextItem -> Text(text = item.content)
                is ListItem.ImageItem -> {
                    // Here you can display an image, for example with an Image function
                    Text(text = "Image: ${item.url}") // Placeholder
                }
            }
        }
    }
}