Circular Reveal in Jetpack Compose

This article is based on MR3Y’s post on how to achieve a circular reveal animation in Jetpack Compose.

Show me the code

Here we have taken a sample red Color and we start expanding the circle from the center of the screen to the edges.

To calculate the radius, we find the hypotenuse using the screen height and width like

val (width, height) = with(LocalConfiguration.current) {        with(LocalDensity.current) { 
screenWidthDp.dp.toPx() to screenHeightDp.dp.toPx() }    
}
hypot(width, height)

The result

What about editing the start position?

To start the animation from a different point in the screen, we just need to change the values for the center of the circle. Here we will make the animation start from the top right of the screen. Accordingly, we need to make changes in the center of the drawCirclemethod like this:

drawCircle(
    color = Color.Red,
    radius = radius,
    center = Offset(size.width, 0f),
)

and to change the radius of the circle to us the entire hypotenuse as the radius instead of half, as we did in case of starting the animation from the center of the screen:

animatedRadius.animateTo(maxRadiusPx, animationSpec = tween()) {
    radius = value
}

Hence our updated code would look like this:

And the result would be

That's all for today!

Multi-module navigation is another interesting article of mine and you can find it here:-

Multi-module Navigation in Android

Follow me on Github for interesting projects.