LazyRow for horizontal lists in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a horizontal list using LazyRow.

Android Kotlin

LazyRow {
    items(10) { index ->
        Text(text = "Item $index", modifier = Modifier.padding(8.dp))
    }
    [1] {
        Text(text = "End of list", modifier = Modifier.padding(8.dp))
    }
}

Drag options to blanks, or click blank then click option'

AitemContent

BitemsIndexed

Citem

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'itemsIndexed' instead of 'item' for a single item.

Using 'content' which is not a valid function here.

The LazyRow uses the 'item' function to add a single item outside the list of repeated items.

2fill in blank

medium

Complete the code to add horizontal padding around each item in LazyRow.

Android Kotlin

LazyRow {
    items(5) { index ->
        Text(text = "Item $index", modifier = Modifier.[1](16.dp))
    }
}

Drag options to blanks, or click blank then click option'

Apadding

Bmargin

Coffset

Dspacing

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'margin' which does not exist in Compose modifiers.

Using 'offset' which moves the item but does not add padding.

In Jetpack Compose, 'padding' adds space inside the modifier around the content.

3fill in blank

hard

Fix the error in the LazyRow code to correctly display a list of strings horizontally.

Android Kotlin

val items = listOf("Apple", "Banana", "Cherry")
LazyRow {
    [1](items) { item ->
        Text(text = item, modifier = Modifier.padding(8.dp))
    }
}

Drag options to blanks, or click blank then click option'

Aitems

Bitem

CitemsIndexed

DitemContent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'item' which only adds one item, not a list.

Using 'itemContent' which is not a valid function.

The 'items' function is used to display a list of elements in LazyRow.

4fill in blank

hard

Fill both blanks to create a LazyRow with 3 items and add horizontal spacing between them.

Android Kotlin

LazyRow(horizontalArrangement = Arrangement.[1](8.dp)) {
    items(3) { index ->
        Text(text = "Item $index", modifier = Modifier.[2](8.dp))
    }
}

Drag options to blanks, or click blank then click option'

AspacedBy

Bpadding

CspaceEvenly

Dmargin

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'margin' which is not a Compose modifier.

Using 'spaceEvenly' which spaces items evenly but does not accept dp.

Use 'spacedBy' to add spacing between items in LazyRow and 'padding' to add space inside each item.

5fill in blank

hard

Fill all three blanks to create a LazyRow that displays a list of names with keys and adds padding around each item.

Android Kotlin

val names = listOf("Anna", "Bob", "Cara")
LazyRow {
    items(
        items = names,
        key = [1],
    ) { name ->
        Text(text = name, modifier = Modifier.[2](12.dp).[3]())
    }
}

Drag options to blanks, or click blank then click option'

A{ it }

Bpadding

CfillMaxWidth

DfillMaxHeight

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong key lambda causing recomposition issues.

Using 'fillMaxWidth' which stretches horizontally instead of vertically.

The key is a lambda returning the item itself '{ it }'. Padding adds space around the Text, and fillMaxHeight makes the item fill the vertical space.

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