LazyRow for horizontal lists in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this LazyRow display?

Consider this Kotlin Compose code snippet using LazyRow. What will the user see on the screen?

Android Kotlin

LazyRow {
  items(3) { index ->
    Text(text = "Item $index")
  }
}

A A horizontal list showing: Item 0, Item 1, Item 2

B An empty screen with no items

C A horizontal list showing only one item: Item 3

D A vertical list showing: Item 0, Item 1, Item 2

💡 Hint

LazyRow arranges items horizontally, and items(3) creates 3 items indexed 0 to 2.

LazyRow creates a horizontal scrolling list. The items(3) block creates 3 items with indices 0, 1, and 2. Each item shows text "Item" plus its index.

📝 Syntax

intermediate

Which option correctly adds padding between items in LazyRow?

You want to add 8.dp horizontal space between each item in a LazyRow. Which code snippet does this correctly?

A LazyRow(spacing = 8.dp) { items(5) { Text("Item") } }

B LazyRow(padding = PaddingValues(horizontal = 8.dp)) { items(5) { Text("Item") } }

C LazyRow(horizontalPadding = 8.dp) { items(5) { Text("Item") } }

D LazyRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) { items(5) { Text("Item") } }

💡 Hint

Use horizontalArrangement with spacedBy to add space between items.

The horizontalArrangement parameter with Arrangement.spacedBy(8.dp) adds 8.dp space between each item horizontally. Other options are invalid parameters.

❓ lifecycle

advanced

What happens if you scroll a LazyRow with many items?

You have a LazyRow with 1000 items. What is the behavior regarding item creation and memory?

A All 1000 items are composed and kept in memory at once, causing high memory use.

B Only visible items are composed and kept in memory; off-screen items are disposed to save memory.

C LazyRow loads items in batches of 100 and discards others immediately.

D LazyRow duplicates items to fill the screen even if fewer items exist.

💡 Hint

LazyRow is designed to be efficient with large lists by composing only visible items.

LazyRow composes only the items visible on screen plus a small buffer. This optimizes memory and performance for large lists.

❓ navigation

advanced

How to detect which item is visible in LazyRow during scroll?

You want to know the index of the first visible item in a LazyRow while the user scrolls. Which approach is correct?

A Use rememberLazyListState() and check state.firstVisibleItemIndex inside LaunchedEffect.

B Use Modifier.onGloballyPositioned to get item positions and calculate visible index manually.

C Use a ScrollListener on LazyRow to get scroll offset and guess visible item.

D LazyRow does not support detecting visible items during scroll.

💡 Hint

LazyListState provides info about visible items and scroll position.

rememberLazyListState() holds the scroll state of LazyRow. Its firstVisibleItemIndex property gives the index of the first visible item, which can be observed in LaunchedEffect or snapshotFlow.

🔧 Debug

expert

Why does this LazyRow not scroll horizontally?

This LazyRow code does not scroll horizontally as expected. What is the cause?

Android Kotlin

LazyRow(modifier = Modifier.fillMaxWidth()) {
  items(5) { index ->
    Text(text = "Item $index", modifier = Modifier.fillMaxWidth())
  }
}

A items(5) is too few items to enable scrolling.

B LazyRow requires a fixed height modifier to enable scrolling.

C Each item uses fillMaxWidth(), so items take full width and block horizontal scrolling.

D LazyRow needs horizontalScroll modifier to scroll.

💡 Hint

Check the width modifiers on items inside LazyRow.

Using Modifier.fillMaxWidth() inside each item makes each item as wide as the LazyRow itself, so items stack vertically and no horizontal scrolling occurs. Items should have fixed or wrap content width.

Practice

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

easy

A. To display a horizontally scrollable list that loads only visible items

B. To create a vertical list with fixed item sizes

C. To handle user input events in Compose

D. To manage app navigation between screens

Solution

1. Step 1: Understand LazyRow's role

   LazyRow is designed to show horizontal lists efficiently by loading only the items visible on screen.

2. Step 2: Compare with other options

   Options A, B, and C describe unrelated features: navigation, vertical lists, and input handling, not LazyRow's purpose.

3. Final Answer:

   To display a horizontally scrollable list that loads only visible items -> Option A

4. Quick Check:

   LazyRow = horizontal efficient list [OK]

Hint: LazyRow is for horizontal scrolling lists only [OK]

Common Mistakes:

• Confusing LazyRow with LazyColumn (vertical list)
• Thinking LazyRow manages navigation
• Assuming LazyRow handles input events

2. Which of the following is the correct syntax to create a LazyRow with a list of strings named itemsList?

easy

A. LazyRow { for(item in itemsList) { Text(item) } }

B. LazyRow(itemsList) { Text(it) }

C. LazyRow { items(itemsList) { item -> Text(item) } }

D. LazyRow { itemList.forEach { Text(it) } }

Solution

1. Step 1: Recall LazyRow usage with items()

   LazyRow uses the items() function to iterate over a list and display each item.

2. Step 2: Check syntax correctness

   LazyRow { items(itemsList) { item -> Text(item) } } correctly uses items(itemsList) { item -> Text(item) }. Options B, C, and D use invalid or unsupported syntax for LazyRow.

3. Final Answer:

   LazyRow { items(itemsList) { item -> Text(item) } } -> Option C

4. Quick Check:

   LazyRow + items() = LazyRow { items(itemsList) { item -> Text(item) } } [OK]

Hint: Use items() inside LazyRow for lists [OK]

Common Mistakes:

• Passing list directly as parameter to LazyRow
• Using for loops inside LazyRow instead of items()
• Misspelling items() or using wrong variable names

3. What will be displayed by this code snippet?

val colors = listOf("Red", "Green", "Blue")
LazyRow {
  items(colors) { color ->
    Text(text = color)
  }
}

medium

A. A vertical list showing Red, Green, Blue

B. A horizontal scrollable row showing Red, Green, Blue texts

C. An error because colors is immutable

D. Nothing, because LazyRow requires a modifier

Solution

1. Step 1: Analyze the code behavior

   The code creates a LazyRow with items from the colors list, displaying each color as Text horizontally.

2. Step 2: Evaluate options

   A horizontal scrollable row showing Red, Green, Blue texts correctly describes a horizontal scrollable row showing the color names. A vertical list showing Red, Green, Blue is wrong because LazyRow is horizontal, not vertical. An error because colors is immutable is wrong; immutable lists are fine. Nothing, because LazyRow requires a modifier is incorrect; modifier is optional.

3. Final Answer:

   A horizontal scrollable row showing Red, Green, Blue texts -> Option B

4. Quick Check:

   LazyRow + items(colors) = horizontal list [OK]

Hint: LazyRow always scrolls horizontally [OK]

Common Mistakes:

• Thinking LazyRow creates vertical lists
• Assuming immutable lists cause errors
• Believing modifier is mandatory for display

4. Identify the error in this LazyRow code:

LazyRow {
  items(listOf("A", "B", "C")) { item ->
    Text item
  }
}

medium

A. LazyRow cannot use listOf() directly

B. items() requires a modifier parameter

C. Text composable requires named parameter for text

D. Missing parentheses in Text composable

Solution

1. Step 1: Check Text composable usage

   Text is missing parentheses: Text item should be Text(item).

2. Step 2: Verify other parts

   items() can accept listOf() directly, and modifier is optional.

3. Final Answer:

   Missing parentheses in Text composable -> Option D

4. Quick Check:

   Text(item) syntax required [OK]

Hint: Text(item) always needs parentheses [OK]

Common Mistakes:

• Missing parentheses in Text(item)
• Thinking items() requires modifier parameter
• Assuming listOf() cannot be used inline

5. You want to create a LazyRow that shows a horizontal list of numbers from 1 to 5, but only even numbers should be displayed. Which code snippet correctly implements this?

hard

A. LazyRow { items((1..5).filter { it % 2 == 0 }) { Text(text = it.toString()) } }

B. LazyRow { items(1..5) { Text(text = it.toString()) } }

C. LazyRow { items(1..5) { Text(text = if (it % 2 == 0) it.toString() else "odd") } }

D. LazyRow { items((1..5).map { if (it % 2 == 0) it else null }) { Text(text = it.toString()) } }

Solution

1. Step 1: Filter the list before passing to items()

   LazyRow { items((1..5).filter { it % 2 == 0 }) { Text(text = it.toString()) } } filters the range to only even numbers, so items() receives only 2 and 4.

2. Step 2: Check other options for correctness

   LazyRow { items(1..5) { Text(text = it.toString()) } } displays all numbers 1-5. LazyRow { items(1..5) { Text(text = if (it % 2 == 0) it.toString() else "odd") } } displays 'odd' for odd numbers. LazyRow { items((1..5).map { if (it % 2 == 0) it else null }) { Text(text = it.toString()) } } maps odd numbers to null, which causes runtime errors.

3. Final Answer:

   LazyRow { items((1..5).filter { it % 2 == 0 }) { Text(text = it.toString()) } } -> Option A

4. Quick Check:

   Filter list before items() = LazyRow { items((1..5).filter { it % 2 == 0 }) { Text(text = it.toString()) } } [OK]

Hint: Filter list before items() to show selective items [OK]

Common Mistakes:

• Forgetting the filtering condition entirely
• Mapping to null causing errors
• Displaying placeholder text for unwanted items