How to Use LazyColumn in Jetpack Compose for Android

Use LazyColumn in Jetpack Compose to display a vertical scrolling list that loads items lazily as you scroll. Wrap your list items inside items or itemsIndexed blocks inside LazyColumn to efficiently render only visible elements.

Syntax

The LazyColumn composable creates a vertically scrolling list that only composes and lays out visible items, improving performance for large lists. Inside LazyColumn, use items or itemsIndexed to provide the list data and define how each item looks.

Key parts:

• LazyColumn { ... }: The container for the lazy vertical list.
• items(list) { item -> ... }: Iterates over the list to display each item.
• Composable content inside items defines the UI for each list element.

kotlin

LazyColumn {
  items(list) { item ->
    Text(text = item)
  }
}

Output

A vertical scrolling list showing each string from the list as a Text item.

Example

This example shows a simple list of names displayed using LazyColumn. It demonstrates how to pass a list and create a Text composable for each item.

kotlin

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun NameList(names: List<String>) {
  LazyColumn(modifier = Modifier.fillMaxSize()) {
    items(names) { name ->
      Text(text = name, style = MaterialTheme.typography.bodyLarge)
    }
  }
}

@Preview(showBackground = true)
@Composable
fun PreviewNameList() {
  NameList(listOf("Alice", "Bob", "Charlie", "Diana"))
}

Output

A vertical list showing the names: Alice, Bob, Charlie, Diana each on its own line.

Common Pitfalls

Common mistakes when using LazyColumn include:

• Using Column instead of LazyColumn for large lists, causing performance issues because all items are composed at once.
• Not providing unique keys when list items can change, which can cause incorrect item recompositions.
• Forgetting to set a modifier like Modifier.fillMaxSize() or Modifier.fillMaxWidth(), which may cause layout issues.

kotlin

/* Wrong: Using Column for large list */
Column {
  names.forEach { name ->
    Text(text = name)
  }
}

/* Right: Using LazyColumn for large list */
LazyColumn {
  items(names) { name ->
    Text(text = name)
  }
}

Output

Wrong approach renders all items immediately, causing lag; right approach renders items lazily as you scroll.

Quick Reference

Tips for using LazyColumn effectively:

• Use items or itemsIndexed to display lists.
• Provide stable keys with key parameter if list items can reorder.
• Use modifiers to control size and padding.
• Combine with rememberLazyListState() for scroll position control.

Key Takeaways

Use LazyColumn to efficiently display vertical lists with lazy loading in Compose.

Wrap your data items inside items or itemsIndexed blocks within LazyColumn.

Avoid using Column for large lists to prevent performance issues.

Provide unique keys for list items when their order can change.

Use modifiers to control layout size and appearance of LazyColumn.