LazyGrid in Android Kotlin

Introduction

LazyGrid helps you show many items in a grid without slowing down your app. It only creates items you see on the screen, saving memory and making scrolling smooth.

Showing a photo gallery with many pictures.

Displaying a list of products in a shopping app in a grid layout.

Creating a grid of buttons or icons that users can tap.

Making a dashboard with multiple cards arranged in rows and columns.

Syntax

Android Kotlin

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    content = {
        items(yourList) { item ->
            // Your item UI here
        }
    }
)

LazyVerticalGrid creates a vertical scrolling grid.

GridCells.Fixed(2) means 2 columns in the grid.

Examples

This creates a grid with 3 columns and 10 text items labeled from Item #0 to Item #9.

Android Kotlin

LazyVerticalGrid(
    columns = GridCells.Fixed(3),
    content = {
        items(10) { index ->
            Text("Item #$index")
        }
    }
)

This grid adapts the number of columns based on minimum size 100dp for each item, showing letters A, B, and C.

Android Kotlin

LazyVerticalGrid(
    columns = GridCells.Adaptive(minSize = 100.dp),
    content = {
        items(listOf("A", "B", "C")) { letter ->
            Text(letter)
        }
    }
)

Sample App

This example shows a simple grid with 2 columns displaying fruit names. Each fruit name has padding around it for spacing.

Android Kotlin

import androidx.compose.foundation.layout.padding
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.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun SimpleLazyGrid() {
    val fruits = listOf("Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig")
    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        modifier = Modifier.padding(16.dp)
    ) {
        items(fruits) { fruit ->
            Text(
                text = fruit,
                modifier = Modifier.padding(8.dp),
                style = MaterialTheme.typography.bodyLarge
            )
        }
    }
}

Important Notes

LazyGrid only creates items visible on screen, so it works well with large lists.

You can choose fixed columns or adaptive columns that change based on screen size.

Use padding and spacing modifiers to make your grid look neat and readable.

Summary

LazyGrid shows items in a grid efficiently by creating only visible items.

You can set fixed or adaptive columns to control grid layout.

It is great for photo galleries, product lists, or any grid-based UI.