Non Lazy Grid for Jetpack Compose

This library is just a bunch of grids but no laziness. You might be—or just me—getting frustrated while working with LazyGrid inside a scrollable parent component. Let's say I have a LazyColumn as a parent, then I want to put a vertical grid inside. There are no other options but LazyVerticalGrid to work with. Unfortunately, after you run your app, you'll get a crash. It's because a vertically scrollable component—the LazyVerticalGrid—was measured with an infinity maximum height constraints. There are some solutions to solve that, like implementing fixed height to the grid, using Flow layout, etc. However, here's a small library I wrote to resolve that by creating a custom Layout.

Setup

This library is available on JitPack repository. So, you need to add JitPack repository on settings.gradle.kts.

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)  
    repositories {  
        google()  
        mavenCentral()
        maven { url = uri("https://jitpack.io") }  // Add this line
    }
}

Then, add the dependency.

implementation("com.github.ajailani4:grid-compose:$version")

How to Use

The usage is the same as using LazyGrid normally, including the cell type (fixed and adaptive). Still, there are differences. For example, this library only uses gap for the axis, while LazyGrid uses Arrangement.

Fixed Cell

You can implement fixed cell by providing fixed number of rows or columns.

Vertical Grid

@Composable  
fun VerticalGridExample() {
    VerticalGrid(  
        columns = GridCellType.Fixed(3),  
	verticalGap = 20.dp,
        horizontalGap = 10.dp  
    ) {
        items(items = exampleItems) {
            ExampleItem(it.id, it.name, it.description)
        }
    }
}

Horizontal Grid

@Composable  
fun HorizontalGridExample() {
    HorizontalGrid(  
        modifier = Modifier.height(500.dp),  
        rows = GridCellType.Fixed(4),  
        verticalGap = 10.dp,  
        horizontalGap = 5.dp  
    ) { 
        items(exampleItems) {  
            ExampleItem(it.id, it.name, it.description)  
        }
    }
}

Adaptive Cell

You can define a grid with rows or columns adaptively—the grid row or column count depends on the parent size—that every cell has at least minSize space and all extra space distributed evenly.

Vertical Grid

@Composable  
fun VerticalGridExample() {
    VerticalGrid(  
        columns = GridCellType.Adaptive(150.dp),  
        verticalGap = 10.dp,  
        horizontalGap = 10.dp  
    ) {  
        items(items = exampleItems) {  
            ExampleItem(it.id, it.name, it.description)  
        }
    }
}

vertical_grid_adaptive.mp4

Horizontal Grid

@Composable  
fun HorizontalGridExample() {
    HorizontalGrid(  
        modifier = Modifier  
            .horizontalScroll(rememberScrollState())  
            .height(350.dp),  
        rows = GridCellType.Adaptive(150.dp),  
        verticalGap = 10.dp,  
        horizontalGap = 5.dp  
    ) {  
        items(exampleItems) {  
            ExampleItem(it.id, it.name, it.description)  
        }  
    }
}

horizontal_grid_adaptive.mp4

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.