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.
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!