Building DualProgressBar in Compose
A couple of years ago, I built a DualProgressBar using Custom View, detailed steps are described here. This post is all about migrating that old view-based animation to Compose.
In the above design, you can see two circular progress bars spinning in sync. It’s actually two arches rotating along with changing the sweep and start angle. Let's break this into different steps
We will rely on the DrawArc method to get the feel of the circles moving in sync.
Just adjusting the radius, we can draw two circles, one inside the other.
The outer circle is rotated 180 degrees to get an arch drawing from a different position than the inner circle.
Now let’s do some Maths.
We need to drawArch from 0–360 degrees within a time duration.
Ex: If you have 200 milliseconds time, the Arch angle will be at 180 degrees at 100 milliseconds time and 360 at 200 milliseconds.
Ok, that’s great. what if any given duration can be converted to a range between 0 and 1?
InfiniteTransition.animateFloat() extension function with animationSpec can be used to achieve the same.
Keyframe is used to control the animation based on timestamp.
One more minor tweak, we are done here. If you looks closely circles are moving in clock wise direction 🤔
Just change the start Angle and Sweep Angle same time, then you will get the moving feel.
Putting everything together.
The complete source code you can find it here.
As I remember correctly, it took me around a day to finish the view based animation, but with compose it was under an hour with minimum lines of code.
Happy composing 🤖
Thanks for reading. ☮️
