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:

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

Follow me on Github for interesting projects.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Abhriya Roy
Abhriya Roy

Written by Abhriya Roy

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

No responses yet

Write a response