Circular Reveal in Jetpack Compose

Abhriya Roy
2 min readAug 31, 2021


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:

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

Follow me on Github for interesting projects.



Abhriya Roy

Android developer keen on knowing things in detail and giving back to the community.