LazyRow for horizontal lists in Android Kotlin - Mini App: Build & Ship

Build: HorizontalImageList

This screen shows a horizontal scrolling list of images with labels below each image. Users can scroll left and right to see more items.

Target UI

HorizontalImageList Screen

[Image1] Label1  [Image2] Label2  [Image3] Label3  [Image4] Label4  [Image5] Label5

Use horizontal scrolling to see more images.

Use LazyRow to display a horizontal list

Each item shows an image and a text label below it

Images should be 100dp by 100dp with rounded corners

Add horizontal spacing of 12dp between items

The list should be scrollable horizontally

Starter Code

Android Kotlin

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

@Composable
fun HorizontalImageList() {
    val items = listOf(
        Pair("Label1", R.drawable.image1),
        Pair("Label2", R.drawable.image2),
        Pair("Label3", R.drawable.image3),
        Pair("Label4", R.drawable.image4),
        Pair("Label5", R.drawable.image5)
    )

    // TODO: Add LazyRow here to show images horizontally
}

Task 1

Task 2

Task 3

Task 4

Solution

Android Kotlin

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

@Composable
fun HorizontalImageList() {
    val items = listOf(
        Pair("Label1", R.drawable.image1),
        Pair("Label2", R.drawable.image2),
        Pair("Label3", R.drawable.image3),
        Pair("Label4", R.drawable.image4),
        Pair("Label5", R.drawable.image5)
    )

    LazyRow(
        contentPadding = PaddingValues(horizontal = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(12.dp),
        modifier = Modifier.fillMaxWidth()
    ) {
        items(items) { item ->
            Column(
                modifier = Modifier.width(100.dp),
                verticalArrangement = Arrangement.Center
            ) {
                Image(
                    painter = painterResource(id = item.second),
                    contentDescription = item.first,
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .size(100.dp)
                        .clip(RoundedCornerShape(8.dp))
                )
                Spacer(modifier = Modifier.height(4.dp))
                Text(
                    text = item.first,
                    style = MaterialTheme.typography.bodyMedium,
                    modifier = Modifier.fillMaxWidth(),
                    maxLines = 1
                )
            }
        }
    }
}

We use LazyRow to create a horizontal scrolling list. The items function iterates over the list of pairs containing labels and image resource IDs. Each item is shown in a Column with a fixed width of 100dp.

The Image composable displays the image with a size of 100dp by 100dp and rounded corners using clip and RoundedCornerShape. Below the image, a Text shows the label.

We add horizontal spacing of 12dp between items using horizontalArrangement = Arrangement.spacedBy(12.dp). Padding is added on the sides for better layout.

This creates a neat horizontal list that users can scroll left and right to see all images with labels.

Final Result

Completed Screen

HorizontalImageList Screen

[Image1] Label1  [Image2] Label2  [Image3] Label3  [Image4] Label4  [Image5] Label5

(Scroll horizontally to see more)

User can swipe left or right to scroll through the images horizontally

Each image is shown with a label below it

Images have rounded corners and consistent size

Stretch Goal

Add a click effect that shows a Toast with the label of the clicked image

💡 Hint

Use Modifier.clickable and Toast.makeText inside the click handler

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