items & itemsIndexed
Render a collection of data rows.
items & itemsIndexed is a free Jetpack Compose Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
From Data to Rows
Your data usually lives in a list, like a List of strings or objects. The items block turns each element into a row on screen.
The items Function
Call items with your collection and a lambda. Compose runs the lambda for each element it needs to show.
LazyColumn {
items(fruits) { fruit ->
Text(fruit)
}
}The Element Parameter
The lambda receives one element at a time. Name it clearly, like fruit or user, then build UI from that single value.
items(users) { user ->
Text(user.name)
}Build a Whole Row
The lambda can hold any layout, not just Text. Wrap several composables in a Row to make a richer list item.
items(users) { user ->
Row { Text(user.name); Text(user.age.toString()) }
}When You Need the Position
Sometimes you want the row's index, like showing a rank number or alternating colors. Plain items doesn't give you that.
Meet itemsIndexed
Use itemsIndexed when you need the position. Its lambda receives both the index and the element together.
itemsIndexed(songs) { index, song ->
Text("$index: $song")
}Index Comes First
Order matters: in itemsIndexed the index is the first parameter and the element is the second. Swapping them is a common slip.
itemsIndexed(tasks) { i, task ->
Text("Step ${i + 1}: $task")
}Numbering Made Easy
Index starts at zero, so add one for human-friendly numbering. This makes ranked or step-by-step lists feel natural.
Add a Single Fixed Row
Need one standalone row, like a header or footer? Use item (singular) for a single piece of content among your items blocks.
LazyColumn {
item { Text("My List") }
items(data) { Text(it) }
}Mix and Match Freely
Inside one LazyColumn you can combine several item and items calls. They render in the order you declare them.
Pick the Right Tool
Reach for items when the element is enough, and itemsIndexed when you also need each row's position. That's the whole choice.
Quick Check
Pick the right builder for the job.
Recap: items and itemsIndexed
Use items to map data to rows, itemsIndexed when you need the position, and item for a single fixed row. Mix them freely. 🎯
Frequently asked questions
Is the “items & itemsIndexed” lesson free?
Yes — the full text of “items & itemsIndexed” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.
What will I learn in “items & itemsIndexed”?
Render a collection of data rows. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Jetpack Compose Academy?
No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “items & itemsIndexed” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Jetpack Compose Academy lesson?
Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.