How to Use LazyRow in Compose in Android: Simple Guide

Use LazyRow in Jetpack Compose to create a horizontally scrolling list of items. Inside LazyRow, use items or item blocks to define the content. This component efficiently renders only visible items, improving performance for long lists.

Syntax

The LazyRow composable creates a horizontal scrolling list. You place your list items inside it using items for multiple elements or item for a single element. You can customize spacing, padding, and alignment.

• LazyRow { items(list) { item -> ... } }: Displays a list horizontally.
• contentPadding: Adds padding around the list.
• horizontalArrangement: Controls spacing between items.

kotlin

LazyRow(
  contentPadding = PaddingValues(horizontal = 16.dp),
  horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
  items(listOf("A", "B", "C")) { item ->
    Text(text = item)
  }
}

Output

A horizontal row showing items: A, B, C spaced evenly with padding on sides.

Example

This example shows a simple LazyRow displaying colored boxes with labels. It demonstrates horizontal scrolling and spacing.

kotlin

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun ColorLazyRow() {
  val colors = listOf(Color.Red, Color.Green, Color.Blue, Color.Yellow, Color.Cyan)
  LazyRow(
    contentPadding = PaddingValues(horizontal = 16.dp),
    horizontalArrangement = Arrangement.spacedBy(12.dp),
    modifier = Modifier.fillMaxWidth().height(100.dp)
  ) {
    items(colors) { color ->
      Box(
        modifier = Modifier
          .size(80.dp)
          .background(color)
      )
    }
  }
}

Output

A horizontal scrollable row of colored square boxes spaced evenly with side padding.

Common Pitfalls

Common mistakes when using LazyRow include:

• Not setting a fixed height or size on the LazyRow or its items, causing layout issues.
• Forgetting to add contentPadding or horizontalArrangement for spacing, making items stick together.
• Using Row instead of LazyRow for large lists, which can cause performance problems.

kotlin

/* Wrong: No fixed height, no spacing */
LazyRow {
  items(listOf("One", "Two", "Three")) { item ->
    Text(text = item)
  }
}

/* Right: Fixed height and spacing */
LazyRow(
  modifier = Modifier.height(80.dp),
  horizontalArrangement = Arrangement.spacedBy(10.dp),
  contentPadding = PaddingValues(horizontal = 16.dp)
) {
  items(listOf("One", "Two", "Three")) { item ->
    Text(text = item)
  }
}

Output

The wrong code may cause layout overflow or cramped items; the right code shows spaced items with proper height.

Quick Reference

Use this cheat sheet for LazyRow basics:

Property	Description
items(list) { }	Displays multiple items horizontally.
item { }	Displays a single item.
contentPadding	Adds padding around the list content.
horizontalArrangement	Controls spacing between items.
modifier	Use to set size, background, or other UI properties.

Key Takeaways

Use LazyRow to create efficient horizontal scrolling lists in Compose.

Always set fixed height and spacing to avoid layout issues.

Use items or item blocks inside LazyRow to define content.

LazyRow only renders visible items, improving performance for long lists.

Add contentPadding and horizontalArrangement for better spacing and appearance.