LazyColumn with items in Android Kotlin - Mini App: Build & Ship

Build: Simple List Screen

Displays a scrollable vertical list of text items using LazyColumn.

Target UI

---------------------
| Simple List Screen |
---------------------
| Item 1            |
| Item 2            |
| Item 3            |
| Item 4            |
| Item 5            |
| ...               |
---------------------

Use LazyColumn to display a vertical list

Show at least 10 items labeled 'Item 1' to 'Item 10'

Each item is a Text composable with padding

Screen has a top app bar with title 'Simple List Screen'

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.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun SimpleListScreen() {
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Simple List Screen") })
        }
    ) { paddingValues ->
        // TODO: Add LazyColumn here
    }
}

Task 1

Task 2

Task 3

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.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun SimpleListScreen() {
    val itemsList = List(10) { index -> "Item ${index + 1}" }
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Simple List Screen") })
        }
    ) { paddingValues ->
        LazyColumn(modifier = Modifier.padding(paddingValues)) {
            items(itemsList) { item ->
                Text(text = item, modifier = Modifier.padding(16.dp))
            }
        }
    }
}

This solution creates a list of 10 strings labeled from "Item 1" to "Item 10" using Kotlin's List constructor.

Inside the Scaffold's content, a LazyColumn is added with padding from the Scaffold to avoid overlap with the top bar.

The items() function is used to display each string as a Text composable with 16.dp padding for spacing.

This creates a scrollable vertical list with a top app bar titled "Simple List Screen".

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           |
---------------------

User can scroll vertically to see all items

Top app bar remains fixed at the top

Stretch Goal

Add a divider line between each item in the LazyColumn

💡 Hint

Use the itemsIndexed function and add a Divider composable after each item except the last