LazyGrid in Android Kotlin - Mini App: Build & Ship

Build: Photo Gallery Grid

Displays a scrollable grid of photos with titles using LazyVerticalGrid.

Target UI

Photo Gallery Grid

+-----------------------------+
| [Photo1] [Photo2] [Photo3]  |
| Title1   Title2   Title3    |
| [Photo4] [Photo5] [Photo6]  |
| Title4   Title5   Title6    |
| ...                         |
+-----------------------------+

Use LazyVerticalGrid with 3 columns

Display a list of 12 photos with titles below each photo

Each grid item shows an image placeholder and a text title

Make the grid vertically scrollable

Use Compose Material3 theme

Starter Code

Android Kotlin

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.grid.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun PhotoGalleryGrid() {
    // TODO: Implement LazyVerticalGrid with 3 columns
    // TODO: Display 12 photo items with title below each
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

Android Kotlin

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun PhotoGalleryGrid() {
    val photos = List(12) { "Photo ${it + 1}" }

    LazyVerticalGrid(
        columns = GridCells.Fixed(3),
        modifier = Modifier
            .fillMaxSize()
            .padding(8.dp),
        contentPadding = PaddingValues(8.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp),
        horizontalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        items(photos) { photo ->
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.fillMaxWidth()
            ) {
                Surface(
                    modifier = Modifier
                        .size(100.dp)
                        .background(Color.LightGray),
                    color = Color.LightGray
                ) {
                    // Image placeholder box
                }
                Spacer(modifier = Modifier.height(4.dp))
                Text(text = photo, style = MaterialTheme.typography.bodyMedium)
            }
        }
    }
}

This solution uses LazyVerticalGrid with 3 fixed columns to create a scrollable grid layout. We create a list of 12 photo titles named "Photo 1" to "Photo 12". Each grid item is a Column with a gray Surface box as an image placeholder sized 100dp by 100dp, and below it a Text showing the photo title. Padding and spacing are added for neat layout. The grid scrolls vertically by default.

Final Result

Completed Screen

Photo Gallery Grid

+---------------------------------------+
| [Gray Box]  [Gray Box]  [Gray Box]    |
| Photo 1    Photo 2     Photo 3        |
| [Gray Box]  [Gray Box]  [Gray Box]    |
| Photo 4    Photo 5     Photo 6        |
| [Gray Box]  [Gray Box]  [Gray Box]    |
| Photo 7    Photo 8     Photo 9        |
| [Gray Box]  [Gray Box]  [Gray Box]    |
| Photo 10   Photo 11    Photo 12       |
| ...                                   |
+---------------------------------------+

User can scroll vertically to see all 12 photos

Each photo is represented by a gray square placeholder with a title below

Grid layout adapts to screen width with 3 columns

Stretch Goal

Add click interaction to each photo item that shows a Toast with the photo title

💡 Hint

Use Modifier.clickable and pass a lambda to show a Toast using Android's Toast.makeText inside a Composable with LocalContext