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

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()
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)
}
}
}
}

Cell types

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

5 different cell types
sealed class IntelliJCell {
object Circle : IntelliJCell()
sealed class Quadrant(val startAngle: Float, val topLeftOffset: Offset) :
IntelliJCell() {
object TopLeft : Quadrant(180f, Offset.Zero)
object TopRight : Quadrant(270f, -Offset(1f, 0f))
object BottomLeft : Quadrant(90f, -Offset(0f, 1f))
object BottomRight : Quadrant(0f, -Offset(1f, 1f))
}
}
  • topLeftOffset: an extra multiplier offset (relative to the cellSize) to add for calculating the top left corner of the arc. For the top left quadrant it is easy to see that this extra offset is 0.

Drawing the cells

With all the above, we can now define a drawIntelliJCell extension function over the DrawScope interface to handle the drawing of a cell for a given size:

fun DrawScope.drawIntelliJCell(cellSize: Float) = TODO()
val cellTypes = listOf(
IntelliJCell.Circle,
IntelliJCell.Quadrant.TopLeft,
IntelliJCell.Quadrant.TopRight,
IntelliJCell.Quadrant.BottomLeft,
IntelliJCell.Quadrant.BottomRight
)

val cellColors = listOf(
Color(0xFFFF7000),
Color(0xFF007EFF),
Color(0xFFFF0058)
)
val cell = cellTypes.random()
val color = cellColors.random()
when (cell) {
is IntelliJCell.Circle -> // TODO Draw circle
is IntelliJCell.Quadrant -> // TODO Draw quadrant
}
drawCircle(
color = color,
radius = cellSize / 2,
center = Offset(cellSize, cellSize).div(2f)
)
drawArc(
color = color,
startAngle = cell.startAngle,
sweepAngle = 90f,
useCenter = true,
topLeft = cell.topLeftOffset.times(cellSize),
size = Size(cellSize, cellSize).times(2f)
)
Final result

Next steps

After working on this splash screen, I have seen the opportunity to work on extra stuff around this grid based canvas. So I will be writing an upcoming article where I will talk about the following features/changes:

  • Add multiple sizing configurations (instead of just being able to set a fixed amount of rows and columns).
  • Aspect ratio for cells (not just squares).
  • Make the grid canvas generic (separate this specific example stuff from the reusable component).

Impure developer and functional programming enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store