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