LazyColumn for lists in Android Kotlin - Mini App: Build & Ship

Build: Simple List Screen

This screen shows a scrollable list of 20 items using LazyColumn. Each item displays its number.

Target UI

Simple List Screen
------------------
| Item 1         |
| Item 2         |
| Item 3         |
| ...            |
| Item 20        |
------------------

Use LazyColumn to display a vertical scrollable list

Show 20 items labeled from Item 1 to Item 20

Each item should be a Text composable with padding

The list should scroll smoothly

Starter Code

Android Kotlin

import androidx.compose.foundation.layout.padding
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.unit.dp

@Composable
fun SimpleListScreen() {
    // TODO: Add LazyColumn here to show list of items
}

Task 1

Task 2

Task 3

Task 4

Solution

Android Kotlin

import androidx.compose.foundation.layout.padding
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.unit.dp

@Composable
fun SimpleListScreen() {
    val itemsList = List(20) { index -> "Item ${index + 1}" }
    LazyColumn {
        items(itemsList) { item ->
            Text(
                text = item,
                modifier = Modifier.padding(16.dp),
                style = MaterialTheme.typography.bodyLarge
            )
        }
    }
}

We create a list of 20 strings labeled "Item 1" to "Item 20" using List constructor. Then, we use LazyColumn to display the list vertically and scrollable. The items() function iterates over the list and shows each item as a Text composable with padding for spacing. This approach is efficient because LazyColumn only renders visible items, making scrolling smooth even for large lists.

Final Result

Completed Screen

Simple List Screen
------------------
| Item 1         |
| Item 2         |
| Item 3         |
| Item 4         |
| Item 5         |
| Item 6         |
| Item 7         |
| Item 8         |
| Item 9         |
| Item 10        |
| Item 11        |
| Item 12        |
| Item 13        |
| Item 14        |
| Item 15        |
| Item 16        |
| Item 17        |
| Item 18        |
| Item 19        |
| Item 20        |
------------------

User can scroll vertically through the list smoothly

Each item is clearly visible with padding around text

Stretch Goal

Add a header at the top of the list that says 'My Items' in bold text.

💡 Hint

Use LazyColumn's item { } block before items { } to add a header composable.