Lesson 14: Lists in Compose: LazyColumn and LazyRow

Lists in Compose: LazyColumn and LazyRow

Our task list app needs to show a list of tasks. A plain Column would technically work, but it renders every item immediately, even ones off-screen — fine for 5 items, a real problem for 500.

LazyColumn — only renders what's visible

data class Task(val id: Int, val title: String)

val tasks = listOf(
    Task(1, "Buy groceries"),
    Task(2, "Finish report"),
    Task(3, "Call the dentist")
)

@Composable
fun TaskListScreen() {
    LazyColumn {
        items(tasks) { task ->
            Text(
                text = task.title,
                modifier = Modifier.padding(16.dp)
            )
        }
    }
}

LazyColumn only creates and measures the items currently visible on screen (plus a small buffer), recycling views as you scroll — exactly like RecyclerView did in the old View system, but with none of the manual adapter boilerplate that used to require.

Adding dividers between items

LazyColumn {
    items(tasks) { task ->
        Text(text = task.title, modifier = Modifier.padding(16.dp))
        HorizontalDivider()
    }
}

LazyRow — the same idea, horizontally

LazyRow {
    items(tasks) { task ->
        Card(modifier = Modifier.padding(8.dp)) {
            Text(task.title, modifier = Modifier.padding(16.dp))
        }
    }
}

Useful for horizontally scrolling carousels — featured items, categories, recent images.

Try it yourself

Turn your TaskListScreen into a proper card list: wrap each task's Text in a Card with some padding and a bit of elevation, so each task looks like a distinct tile rather than plain stacked text.

Next: Lesson 15 — navigating between multiple screens.