LazyGrid in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a vertical LazyVerticalGrid with 2 columns.

Android Kotlin

LazyVerticalGrid(columns = GridCells.Fixed([1])) {
    items(10) { index ->
        Text(text = "Item $index")
    }
}

Drag options to blanks, or click blank then click option'

A2

B3

C4

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number outside GridCells.Fixed() instead of inside.

Confusing rows with columns.

The GridCells.Fixed(2) creates a grid with exactly 2 columns.

2fill in blank

medium

Complete the code to add padding of 8.dp around each grid item.

Android Kotlin

LazyVerticalGrid(columns = GridCells.Fixed(2)) {
    items(5) { index ->
        Text(text = "Item $index", modifier = Modifier.[1](8.dp))
    }
}

Drag options to blanks, or click blank then click option'

Amargin

Bsize

Cpadding

Dborder

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin which is not a Compose modifier.

Using size which changes the size, not padding.

The padding modifier adds space inside the item's boundary.

3fill in blank

hard

Fix the error in the code by completing the blank to specify the grid's orientation as horizontal.

Android Kotlin

LazyVerticalGrid(columns = GridCells.Fixed(3), [1] = Orientation.Horizontal) {
    items(6) { index ->
        Text(text = "Item $index")
    }
}

Drag options to blanks, or click blank then click option'

Aorientation

Bdirection

ClayoutDirection

DscrollOrientation

Attempts:

3 left

💡 Hint

Common Mistakes

Using direction which is not a valid parameter here.

Confusing layoutDirection with orientation.

The correct parameter to set grid orientation is orientation.

4fill in blank

hard

Fill both blanks to create a LazyVerticalGrid with 3 fixed columns and add a background color of Color.LightGray to each item.

Android Kotlin

LazyVerticalGrid(columns = GridCells.[1](3)) {
    items(4) { index ->
        Box(modifier = Modifier.background([2]).padding(8.dp)) {
            Text(text = "Item $index")
        }
    }
}

Drag options to blanks, or click blank then click option'

AFixed

BAdaptive

CColor.LightGray

DColor.Blue

Attempts:

3 left

💡 Hint

Common Mistakes

Using Adaptive instead of Fixed for fixed columns.

Using wrong color values or missing the color import.

GridCells.Fixed(3) sets 3 columns. Color.LightGray sets the background color.

5fill in blank

hard

Fill all three blanks to create a LazyVerticalGrid with adaptive columns of minimum 100.dp width, add 12.dp padding around each item, and set the text color to Color.Black.

Android Kotlin

LazyVerticalGrid(columns = GridCells.[1](100.dp)) {
    items(3) { index ->
        Text(text = "Item $index", modifier = Modifier.padding([2]), color = [3])
    }
}

Drag options to blanks, or click blank then click option'

AFixed

BAdaptive

CColor.Black

D12.dp

Attempts:

3 left

💡 Hint

Common Mistakes

Using Fixed instead of Adaptive for adaptive columns.

Mixing up padding and color values.

GridCells.Adaptive(100.dp) creates columns that adapt with minimum width 100.dp. Padding is 12.dp and text color is black.