Animated Circular Progress Indicator using Jetpack Compose

Photo by Aron Visuals on Unsplash

Are you struggling with implementing Animated Circular Progress Indicator (ACPI) using Jetpack Compose?

In this article, we will see how to implement a Circular Progress Indicator with animated progress completion status based on provided current value and the maximum value of the progress.

What it (ACPI) looks like?

Animated Circular Progress Indicator — in action

How simple is the API?

You just have to pass a few parameters to the Composable and we are good to go with the animated Circular Progress Indicator

Different states

There are three different states of the ACPI.

1. Initial state — showing 0% progress (0/20 in the picture below)
2. progress state < 100% — showing progress based on current value (15/20 in the picture below)
3. Max or Completed state — showing 100% progress — (20/20 in the picture below)

Initial state with 0% progress (Left) — 75 % Progress(Center) — 100% Completed(Right)

Deep dive into ACPI Composable

How do we show the progress status?

Here is the progress status composable to show progress in text form. For example, we are showing 15/20 in the centre with different styles and colours based on typography.

How do we draw an arc for Circular Progress Indicator?

We have made an extension function to draw a circular progress indicator by drawing an arc on the canvas. We will see Canvas in a while

How do we draw it on Canvas?

Here is how we draw different states of the Circular Progress Indicator on the Canvas

How do we animate this?

We are using Jetpack compose Animatable to animate this Circular Progress Indicator and calculating the target value from the currentValue and maxValue provided.

Let’s join the different parts of this PUZZLE 🤔

Here is the full Composable which is drawing this Animated Circular Progress Indicator and VOILA 🚀

For more detail, go through these references

Jetpack Compose, animations in Jetpack Compose, Layouts in Jetpack Compose

I hope you learned something new today and thanks for reading this far!