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:
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…
