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.

Practice

1. What is the main purpose of using LazyColumn in Android Jetpack Compose?

easy

A. To display a vertically scrolling list efficiently by loading only visible items

B. To create a horizontal scrolling list

C. To display a static grid layout

D. To handle user input events

Solution

1. Step 1: Understand LazyColumn's role

   LazyColumn is designed to show vertical lists efficiently by loading only the items visible on screen.

2. Step 2: Compare options

   Options A, B, and C are incorrect: A handles input events, B creates horizontal lists, C is for grids.

3. Final Answer:

   To display a vertically scrolling list efficiently by loading only visible items -> Option A

4. Quick Check:

   LazyColumn = Efficient vertical list [OK]

Hint: LazyColumn loads only visible items for smooth scrolling [OK]

Common Mistakes:

• Confusing LazyColumn with LazyRow (horizontal list)
• Thinking LazyColumn creates grids
• Assuming it handles input events

2. Which of the following is the correct syntax to display a list of strings named names inside a LazyColumn using items?

easy

A. LazyColumn { item(names) { name -> Text(name) } }

B. LazyColumn { items(names) { name -> Text(name) } }

C. LazyColumn { itemsOf(names) { name -> Text(name) } }

D. LazyColumn { itemsList(names) { name -> Text(name) } }

Solution

1. Step 1: Recall correct function name

   The function to display each element in a list inside LazyColumn is items, not item, itemsOf, or itemsList.

2. Step 2: Check lambda syntax

   The lambda receives each element (here name) and displays it with Text(name).

3. Final Answer:

   LazyColumn { items(names) { name -> Text(name) } } -> Option B

4. Quick Check:

   Use items() with list and lambda [OK]

Hint: Use items() to iterate list inside LazyColumn [OK]

Common Mistakes:

• Using item() instead of items() for lists
• Wrong function names like itemsOf or itemsList
• Incorrect lambda parameter usage

3. What will be displayed by this code snippet?

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

medium

A. No output because of syntax error

B. A horizontal list showing Apple, Banana, Cherry

C. Only the first fruit 'Apple' is shown

D. A vertical list showing Apple, Banana, Cherry each on its own line

Solution

1. Step 1: Understand items usage

   The items function iterates over the fruits list and displays each element inside the LazyColumn.

2. Step 2: Check UI behavior

   LazyColumn shows a vertical scrolling list, so each fruit appears on its own line vertically.

3. Final Answer:

   A vertical list showing Apple, Banana, Cherry each on its own line -> Option D

4. Quick Check:

   items() + LazyColumn = vertical list [OK]

Hint: LazyColumn with items shows vertical list of all elements [OK]

Common Mistakes:

• Thinking LazyColumn creates horizontal lists
• Assuming only first item shows
• Confusing syntax causing no output

4. Identify the error in this LazyColumn code:

val numbers = listOf(1, 2, 3)
LazyColumn {
  items(numbers) { number ->
    Text(number)
  }
}

medium

A. Text() expects a String, but number is Int causing a type mismatch

B. items() cannot accept a list of integers

C. LazyColumn must use item() not items() for lists

D. No error, code works fine

Solution

1. Step 1: Check Text() parameter type

   The Text composable expects a String, but number is an Int, causing a type mismatch error.

2. Step 2: Confirm correct usage of items()

   The items function accepts lists of any type, so no error there.

3. Final Answer:

   Text() expects a String, but number is Int causing a type mismatch -> Option A

4. Quick Check:

   Text() needs String, not Int [OK]

Hint: Convert Int to String inside Text() to fix [OK]

Common Mistakes:

• Assuming items() rejects Int lists
• Using item() instead of items() for lists
• Ignoring type mismatch in Text()

5. You want to display a list of user names with their index number in a LazyColumn. Which code correctly shows the index and name together?

hard

A. LazyColumn { items(users) { index, user -> Text("$index: $user") } }

B. LazyColumn { items(users) { user -> Text("$index: $user") } }

C. LazyColumn { itemsIndexed(users) { index, user -> Text("$index: $user") } }

D. LazyColumn { itemsIndexed(users) { user -> Text(user) } }

Solution

1. Step 1: Identify function for index and item

   To get both index and item, use itemsIndexed which provides both parameters in the lambda.

2. Step 2: Check lambda parameters and usage

   LazyColumn { itemsIndexed(users) { index, user -> Text("$index: $user") } } correctly uses index, user and displays them with string interpolation.

3. Final Answer:

   LazyColumn { itemsIndexed(users) { index, user -> Text("$index: $user") } } -> Option C

4. Quick Check:

   Use itemsIndexed() for index + item [OK]

Hint: Use itemsIndexed() to get index and item in LazyColumn [OK]

Common Mistakes:

• Using items() when index is needed
• Wrong lambda parameters count
• Trying to access index without itemsIndexed()