Mimicking IntelliJ IDEA’s splash screen with Jetpack Compose

The latest version of IntelliJ IDEA (2021.1 at the time of this publication) has a cool splash screen based on a grid containing different coloured shapes like this below:

IntelliJ IDEA 2021.1 splash screen

The goal of this post is to implement a Jetpack Compose composable that mimics this pattern.

As we can see the view is a grid of five different type of cells: circle, top left quadrant, top right quadrant, bottom left quadrant and bottom right quadrant. The quadrants are just a quarter portion of a larger circle.

The way we are going to implement this is by using a Canvas. It usually sounds like a good candidate when drawing geometric shapes.

Splitting the Canvas

To make the Canvas behave as a grid we have to parameterise the wrapping function for the Canvas with the number of rows and columns to draw:

@Composable
fun IntelliJSplashScreen(rows: Int, columns: Int, modifier: Modifier) = TODO()

Based on these two arguments, the first thing is to calculate the cell size. For this use-case all the cells will be squares, so both width and height will be equal. The cell size is then calculated based on the canvas size and amount of rows/columns. This allows us to iterate the entire grid to do something for each cell:

Canvas(modifier = modifier) {
    val cellSize =
        min(this.size.width / columns, this.size.height / rows)
    for (row in 0 until rows) {
        for (column in 0 until columns) {
            translate(
                left = column * cellSize,
                top = row * cellSize
            ) {
                // TODO Draw cell
                drawIntelliJCell(cellSize)
            }
        }
    }
}

Note that the code above includes a translation of the canvas before drawing the cell. For the left translation the value is based on the number of columns, while for the top we need to base it on the rows.

Cell types

As we said before, there are 5 different cell types:

The radius of the circle is half the cellSize. Quadrants are a 90 degree arc of a circle with a radius equal to the cellSize. It sounds reasonable to…