Jetpack Compose: building a generic grid canvas

As promised in my last article, here I am back again with the grid canvas we used to replicate IntelliJ IDEA’s splash screen. This time I will be explaining how to implement some additional features.

Content alignment

We want our composable to have the ability to set where the cells will be placed relative to the canvas bounds, or how the space between the grid and the canvas limits will be distributed.

This can be easily achieved with Alignment interface which contains a single align function. It calculates the position of the content (relative to the top left corner) given its size and the available space.

fun Size.toIntSize(): IntSize = IntSize(width.toInt(), height.toInt())
val alignOffset = contentAlignment.align(
    Size(
        columns * cellSize,
        rows * cellSize
    ).toIntSize(), size.toIntSize(), layoutDirection
)
translate(alignOffset.x.toFloat(), alignOffset.y.toFloat()) {
    // Draw the cells
}

Here we assume that there is a variable called contentAlignment (of type Alignment) coming from the function arguments. The first argument passed to align is the size that all the cells will occupy on the canvas and the second one is the canvas size. The returning value is the offset we can use to translate the canvas to make the grid be positioned as desired.