0
0
Android-kotlinHow-ToBeginner ยท 3 min read

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 Column instead of LazyColumn for large lists, which causes performance issues because Column renders all items at once.
  • Not providing unique keys when list items can change, which can cause UI glitches.
  • Forgetting to import items from androidx.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:

ConceptDescription
LazyColumnScrollable vertical list container
items(list)Iterates over list to create each item UI
keyOptional 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.