LazyColumn with items in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this LazyColumn code?

Consider this Kotlin Compose code snippet using LazyColumn:

LazyColumn {
  items(listOf("Apple", "Banana", "Cherry")) { fruit ->
    Text(text = fruit)
  }
}

What will the user see on the screen?

Android Kotlin

LazyColumn {
  items(listOf("Apple", "Banana", "Cherry")) { fruit ->
    Text(text = fruit)
  }
}

A A vertical scrollable list showing the words: Apple, Banana, Cherry each on its own line.

B A horizontal scrollable list showing the words: Apple, Banana, Cherry in a row.

C A single Text showing all fruits concatenated: "AppleBananaCherry".

D An empty screen with no text visible.

💡 Hint

Remember, LazyColumn creates a vertical list by default.

The LazyColumn displays items vertically. Each Text composable shows one fruit on its own line, so the user sees Apple, Banana, and Cherry stacked vertically.

📝 Syntax

intermediate

Which option correctly uses LazyColumn with items?

Which of these Kotlin Compose snippets correctly compiles and displays a list of numbers 1 to 3?

A

LazyColumn {
  item(listOf(1, 2, 3)) { number ->
    Text(text = number.toString())
  }
}

B

LazyColumn {
  items(listOf(1, 2, 3)) { number ->
    Text(text = number.toString())
  }
}

C

LazyColumn {
  items(1..3) { number ->
    Text(text = number.toString())
  }
}

D

LazyColumn {
  items(listOf(1, 2, 3)) { number ->
    Text(number.toString())
  }
}

💡 Hint

Check the function name and parameter types carefully.

Option B correctly uses items with a list and converts the number to string for Text. Option B uses item which expects a single item, not a list. Option B passes a range but items expects a collection. Option B passes an integer directly to Text which expects a string.

❓ lifecycle

advanced

What happens if the list passed to LazyColumn changes?

Given this code:

val fruits = remember { mutableStateListOf("Apple", "Banana") }

LazyColumn {
  items(fruits) { fruit ->
    Text(text = fruit)
  }
}

// Later fruits.add("Cherry") is called

What will happen in the UI after adding "Cherry" to fruits?

Android Kotlin

val fruits = remember { mutableStateListOf("Apple", "Banana") }

LazyColumn {
  items(fruits) { fruit ->
    Text(text = fruit)
  }
}

// fruits.add("Cherry") called later

A Only the first two items will show; Cherry will be ignored.

B The UI will not update until the whole composable is recomposed manually.

C The app will crash because the list is modified after composition.

D The UI will automatically update and show Apple, Banana, and Cherry in the list.

💡 Hint

Think about how Compose tracks changes in mutableStateListOf.

Using mutableStateListOf makes the list observable. When an item is added, Compose automatically recomposes the LazyColumn to show the new item.

❓ navigation

advanced

How to handle item clicks in LazyColumn?

You want to show a list of names in a LazyColumn. When a user taps a name, you want to navigate to a detail screen with that name.

Which code snippet correctly handles item clicks?

A

LazyColumn {
  items(names) { name ->
    Text(text = name, modifier = Modifier.clickable { navigateToDetail(name) })
  }
}

B

LazyColumn {
  items(names) { name ->
    Text(text = name)
  }
  clickable { navigateToDetail(name) }
}

C

LazyColumn {
  items(names) { name ->
    Text(text = name)
  }
}

Modifier.clickable { navigateToDetail(name) }

D

LazyColumn {
  items(names) { name ->
    Text(text = name, onClick = { navigateToDetail(name) })
  }
}

💡 Hint

Remember how to add click behavior to composables using modifiers.

Option A correctly adds a clickable modifier to each Text item. Option A tries to add clickable outside items which is invalid. Option A applies clickable modifier outside composable tree. Option A uses an invalid onClick parameter on Text which does not exist.

🔧 Debug

expert

Why does this LazyColumn cause a runtime error?

Examine this code:

val items = listOf("One", "Two", "Three")

LazyColumn {
  items(items.size) { index ->
    Text(text = items[index])
  }
}

When running, the app crashes with an IndexOutOfBoundsException. Why?

Android Kotlin

val items = listOf("One", "Two", "Three")

LazyColumn {
  items(items.size) { index ->
    Text(text = items[index])
  }
}

A Because the index goes out of bounds since items.size is not the correct count.

B Because items(size) is valid but the lambda parameter should be named differently.

C Because items(size) expects a list, not an integer size, causing wrong iteration.

D Because the list is immutable and cannot be used in LazyColumn.

💡 Hint

Check the expected parameter types for items in LazyColumn.

The items function expects a collection or a list, not an integer size. Passing items.size (an Int) causes the function to treat it as a count, but the lambda parameter is the item, not the index. Accessing items[index] then causes an index error.