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.