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

Practice

1. What is the main purpose of using LazyVerticalGrid in Android Compose?

easy

A. To efficiently display a scrollable grid of items by creating only visible items

B. To create a fixed number of buttons in a row

C. To display a list of items vertically without any grid layout

D. To load all items at once for faster access

Solution

1. Step 1: Understand LazyVerticalGrid behavior

   LazyVerticalGrid creates only the visible grid items to save memory and improve performance.

2. Step 2: Compare with other options

   Options A and B describe different layouts, and D is inefficient because it loads all items at once.

3. Final Answer:

   To efficiently display a scrollable grid of items by creating only visible items -> Option A

4. Quick Check:

   LazyGrid creates visible items only = C [OK]

Hint: LazyGrid creates only visible items for efficiency [OK]

Common Mistakes:

• Thinking LazyGrid loads all items at once
• Confusing LazyGrid with a simple vertical list
• Assuming LazyGrid fixes number of buttons only

2. Which of the following is the correct way to define a fixed number of columns in a LazyVerticalGrid?

easy

A. LazyVerticalGrid(columns = GridCells.Fixed("3")) { /* items */ }

B. LazyVerticalGrid(columns = GridCells.Fixed(3)) { /* items */ }

C. LazyVerticalGrid(columns = 3) { /* items */ }

D. LazyVerticalGrid(columns = GridCells.Adaptive(100.dp)) { /* items */ }

Solution

1. Step 1: Recall syntax for fixed columns

   The correct syntax uses GridCells.Fixed with an integer number of columns.

2. Step 2: Analyze each option

   LazyVerticalGrid(columns = GridCells.Fixed(3)) { /* items */ } uses GridCells.Fixed(3) correctly. LazyVerticalGrid(columns = GridCells.Adaptive(100.dp)) { /* items */ } uses adaptive columns, not fixed. LazyVerticalGrid(columns = 3) { /* items */ } passes an integer directly, which is invalid. LazyVerticalGrid(columns = GridCells.Fixed("3")) { /* items */ } passes a string instead of an integer.

3. Final Answer:

   LazyVerticalGrid(columns = GridCells.Fixed(3)) { /* items */ } -> Option B

4. Quick Check:

   Fixed columns use GridCells.Fixed(number) = D [OK]

Hint: Use GridCells.Fixed(number) for fixed columns [OK]

Common Mistakes:

• Passing integer directly instead of GridCells.Fixed
• Using string instead of integer for column count
• Confusing fixed with adaptive columns

3. Given the code snippet:

LazyVerticalGrid(columns = GridCells.Fixed(2)) {
  items(4) { index ->
    Text(text = "Item $index")
  }
}

How many columns and rows will be visible if the grid shows all items?

medium

A. 2 columns and 2 rows

B. 4 columns and 1 row

C. 1 column and 4 rows

D. 2 columns and 4 rows

Solution

1. Step 1: Understand columns and items

   The grid has 2 fixed columns and 4 items total.

2. Step 2: Calculate rows needed

   With 2 columns, 4 items fill 2 rows (2 items per row).

3. Final Answer:

   2 columns and 2 rows -> Option A

4. Quick Check:

   4 items / 2 columns = 2 rows [OK]

Hint: Rows = total items ÷ columns (round up) [OK]

Common Mistakes:

• Assuming columns equal number of items
• Confusing rows and columns count
• Ignoring fixed columns setting

4. Identify the error in this LazyVerticalGrid code:

LazyVerticalGrid(columns = GridCells.Fixed(3)) {
  items(5) { index ->
    Text(text = "Item $index")
  }
  item {
    Text(text = "Footer")
  }
}

medium

A. Using both items and item inside LazyVerticalGrid is invalid

B. The item block should be inside items block

C. No error; code is correct

D. GridCells.Fixed cannot be used with 3 columns

Solution

1. Step 1: Check usage of items and item

   LazyVerticalGrid supports both items (multiple) and item (single) blocks for content.

2. Step 2: Verify GridCells.Fixed usage

   GridCells.Fixed(3) is valid to set 3 columns.

3. Final Answer:

   No error; code is correct -> Option C

4. Quick Check:

   items and item can coexist = B [OK]

Hint: items and item blocks can be mixed in LazyGrid [OK]

Common Mistakes:

• Thinking item block must be inside items
• Assuming GridCells.Fixed(3) is invalid
• Believing multiple content blocks cause error

5. You want to create a photo gallery with images that adapt to screen width, showing as many columns as fit with a minimum size of 120.dp per item. Which LazyVerticalGrid setup is correct?

hard

A. LazyVerticalGrid(columns = GridCells.Fixed(3)) { /* images */ }

B. LazyVerticalGrid(columns = GridCells.Fixed(120)) { /* images */ }

C. LazyVerticalGrid(columns = GridCells.Adaptive(3)) { /* images */ }

D. LazyVerticalGrid(columns = GridCells.Adaptive(120.dp)) { /* images */ }

Solution

1. Step 1: Understand adaptive columns

   GridCells.Adaptive sets columns based on minimum item size, adapting to screen width.

2. Step 2: Match requirement to code

   LazyVerticalGrid(columns = GridCells.Adaptive(120.dp)) { /* images */ } uses GridCells.Adaptive(120.dp), which fits the requirement of minimum 120.dp per item and adapts columns.

3. Final Answer:

   LazyVerticalGrid(columns = GridCells.Adaptive(120.dp)) { /* images */ } -> Option D

4. Quick Check:

   Adaptive columns use minimum size = A [OK]

Hint: Use GridCells.Adaptive(minSize) for responsive columns [OK]

Common Mistakes:

• Using Fixed with pixel count instead of dp
• Confusing number of columns with minimum size
• Using Adaptive with integer instead of dp