Implementing grid UI in easy way with GridLayout for Compose library

Image by Author

Sometimes, we need to implement grid style UI. But there is no simple grid layout in Jetpack Compose library. There are LazyVerticalGrid and LazyHorizontalGrid. But lazy layout is for many items. After Jetpack Compose Foundation 1.4, there are FlowRow and FlowColumn. But flow layout is not a grid layout. It is just an alternative of grid layout. In this post, I will introduce how to implement grid UI in simple way using GridLayout for Compose.

GridLayout for Compose

GitHub - cheonjaeung/gridlayout-compose: Missing non lazy grid layout for Compose Multiplatform.

GridLayout for Compose is an Android library that provides some layout composable functions to implement grid UI with similar API to lazy grid.

Download

This library is published to Maven Central. Add this library to your project dependencies.

dependencies {
    implementation("io.woong.compose.grid:grid:${version}")
}

Checkout the latest version on GitHub releases page.

Usage

Let’s draw grid UI with this library. For example, we can implement grid of color boxes like this:

@Composable
fun ColorGrid(
    colors: List<Color>,
    modifier: Modifier = Modifier.fillMaxWidth(),
) {
    VerticalGrid(
        columns = SimpleGridCells.Fixed(3),
        modifier = modifier,
    ) {
        for ((index, color) in colors.withIndex()) {
            ColorBox(
                modifier = Modifier,
                color = color,
                text = (index + 1).toString(),
            )
        }
    }
}

It’s simple! You can see SimpleGridCells.Fixed(3). It means that this grid will have 3 columns. And each columns will have 1/3 size of grid width. After the column setting, you can just place item in the VerticalGrid composable’s content parameter.

GridLayout for Compose library has VerticalGrid and HorizontalGrid composable function.

SimpleGridCells

VerticalGrid and HorizontalGrid has “cells” parameter called columns (for vertical) or rows (for horizontal). Cells parameter takes SimpleGridCells class. SimpleGridCells is has 2 types, Fixed and Adaptive. They defines how many cells should exist.

SimpleGridCells.Fixed

Fixed is a type of SimpleGridCells for fixed count of rows or columns. Each rows or columns will have same divided size of grid size.

For example, the vertical grid layout width is 90dp and column count is 3, each column width will be 30dp.

SimpleGridCells.Adaptive

Adaptive is a type of SimpleGridCells to make grid to have as many rows or columns as possible. Adaptive takes minSize parameter that is the minimum size each cell should have. Grid will have as many rows or columns as possible while each cell size is bigger than minSize.

For example, the vertical grid layout width 90dp and columns min size is 20dp, there will be 4 columns and each columns will have 22.5dp. But if the grid width is changed to 100dp, column count will be 5 and size will be 20dp.

Arrangement

There are 2 arrangement parameter in VerticalGrid and HorizontalGrid, horizontalArrangement and verticalArrangement. They determines how items of axis should be positioned. This is an example of vertical arrangement:

You can also use horizontal arrangement and other arrangement option like Arrangement.spacedBy. Check detail guide of arrangement on here.

In this article, I introduce how to implement simple grid UI in easier way using GridLayout for Compose library. This library is open source. If you find a bug or want to improve it, feel free to make an issue or pull request.

Thanks for reading!