LazyGrid in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the visible item count in this LazyVerticalGrid?

Consider a LazyVerticalGrid with 3 columns and 10 items. Each item is a fixed size box. How many items will be visible on screen if the grid height fits exactly 4 rows?

Android Kotlin

LazyVerticalGrid(columns = GridCells.Fixed(3)) {
  items(10) { index ->
    Box(Modifier.size(100.dp)) {
      Text("Item $index")
    }
  }
}

A 12 items

B 10 items

C 9 items

D 15 items

💡 Hint

Think about how many items fit in each row and how many rows fit in the visible height.

With 3 columns and 4 rows visible, up to 3 * 4 = 12 items can be shown. Since there are only 10 items, 10 items will be visible.

❓ lifecycle

intermediate

When does LazyVerticalGrid compose items?

In Jetpack Compose, when does LazyVerticalGrid compose its child items?

A Only the first item initially, then others on demand

B All items at once when the grid is first displayed

C Only the items currently visible on screen and a few extra for smooth scrolling

D Items are composed randomly regardless of visibility

💡 Hint

Lazy means it does not create all items immediately.

LazyVerticalGrid composes only visible items plus some buffer items to optimize performance and memory.

📝 Syntax

advanced

Which code snippet correctly creates a LazyHorizontalGrid with 2 rows?

Select the Kotlin code that correctly creates a LazyHorizontalGrid with exactly 2 rows.

A

LazyHorizontalGrid(rows = GridCells.Fixed(2)) {
  items(5) { Text("Item $it") }
}

B

LazyHorizontalGrid(columns = GridCells.Fixed(2)) {
  items(5) { Text("Item $it") }
}

C

LazyHorizontalGrid(rows = 2) {
  items(5) { Text("Item $it") }
}

D

LazyHorizontalGrid(GridCells.Fixed(2)) {
  items(5) { Text("Item $it") }
}

💡 Hint

Check the parameter name for rows in LazyHorizontalGrid.

LazyHorizontalGrid requires the 'rows' parameter with GridCells.Fixed or GridCells.Adaptive. Option A uses correct syntax.

❓ navigation

advanced

How to preserve scroll position in LazyVerticalGrid after navigation?

You navigate away from a screen with a LazyVerticalGrid and then return. How do you preserve the scroll position of the grid?

A Use rememberLazyGridState() and pass it to LazyVerticalGrid's state parameter

B Use rememberScrollState() and pass it to LazyVerticalGrid's state parameter

C Save the scroll position manually and scroll to it on return

D LazyVerticalGrid automatically preserves scroll position without extra code

💡 Hint

There is a special state class for LazyGrid scroll state.

rememberLazyGridState() creates a state object that tracks scroll position and can be reused to restore it.

🔧 Debug

expert

Why does this LazyVerticalGrid crash with IllegalArgumentException?

Given this code, why does the app crash with IllegalArgumentException: 'GridCells.Fixed must be greater than 0'?

Android Kotlin

LazyVerticalGrid(columns = GridCells.Fixed(0)) {
  items(5) { Text("Item $it") }
}

A LazyVerticalGrid requires GridCells.Adaptive, not Fixed

B Text composable inside items must have a Modifier

C The items count must be greater than the number of columns

D GridCells.Fixed cannot be zero or negative; it must be at least 1

💡 Hint

Check the parameter passed to GridCells.Fixed carefully.

GridCells.Fixed(0) is invalid because the number of columns must be positive. This causes the IllegalArgumentException.

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