How to Create List in Jetpack Compose in Android
In Jetpack Compose, you create a list using
LazyColumn which efficiently displays a vertical scrolling list. Use items inside LazyColumn to provide the list data and define how each item looks.Syntax
The basic syntax to create a list in Jetpack Compose uses LazyColumn which is a composable that shows a vertical scrolling list. Inside it, items takes a list and a lambda to define each row's UI.
LazyColumn: Container for the scrollable list.items(list): Iterates over the list to create each item.- Inside
items, define the UI for each list element.
kotlin
LazyColumn {
items(myList) { item ->
Text(text = item)
}
}Output
A vertical scrolling list showing each string from myList as text.
Example
This example shows a simple list of strings displayed vertically using LazyColumn. Each item is shown as a Text composable.
kotlin
import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.material3.Text import androidx.compose.runtime.Composable @Composable fun SimpleList() { val fruits = listOf("Apple", "Banana", "Cherry", "Date", "Elderberry") LazyColumn { items(fruits) { fruit -> Text(text = fruit) } } }
Output
A scrollable vertical list showing: Apple, Banana, Cherry, Date, Elderberry each on its own line.
Common Pitfalls
Common mistakes when creating lists in Jetpack Compose include:
- Using
Columninstead ofLazyColumnfor large lists, which causes performance issues becauseColumnrenders all items at once. - Not providing unique keys when list items can change, which can cause UI glitches.
- Forgetting to import
itemsfromandroidx.compose.foundation.lazy.items.
kotlin
/* Wrong: Using Column for large list */ import androidx.compose.foundation.layout.Column import androidx.compose.material3.Text Column { myList.forEach { item -> Text(text = item) } } /* Right: Use LazyColumn for efficient scrolling */ LazyColumn { items(myList) { item -> Text(text = item) } }
Output
Wrong approach renders all items at once causing lag; right approach renders only visible items efficiently.
Quick Reference
Here is a quick cheat sheet for creating lists in Jetpack Compose:
| Concept | Description |
|---|---|
| LazyColumn | Scrollable vertical list container |
| items(list) | Iterates over list to create each item UI |
| key | Optional unique key for each item to optimize recomposition |
| rememberLazyListState() | State to control or observe scroll position |
| Modifier.fillMaxSize() | Make list fill available space |
Key Takeaways
Use LazyColumn with items to create efficient vertical lists in Jetpack Compose.
Avoid using Column for large lists to prevent performance issues.
Always import androidx.compose.foundation.lazy.items for list iteration.
Provide unique keys for dynamic lists to avoid UI glitches.
LazyColumn only renders visible items, improving app performance.