Jetpack Compose provides circular progress indicator and linear progress indicator APIs out of the box. But the problem with them is that we cannot customize them according to our requirements. They follow material guidelines. To create a custom progress bar in Jetpack Compose, we can use Canvas. Most of the following progress indicators are made with it.
#1:
There are two indicators – foreground and background. The foreground indicator is an arc and the background one is a circle. When you click on the button, a random value will be generated and the foreground indicator is updated with the value with a nice animation.
Source Code: Circular Progress Bar 1
#2:
This is the same as the above one, but the indicator widths are different.
Source Code: Circular Progress Bar 2
#3:
It has a shadow effect. It is applied below the foreground indicator.
Source Code: Circular Progress Bar 3
#4:
It is an arc-shaped progress bar.
Source Code: Arc Progress Bar
#5:
It is a gradient progress bar. The foreground indicator moves forward with a nice animation. It uses ViewModel to perform the background operation.
Source Code: Gradient Progress Bar
These are the custom progress bar designs I made with Android Jetpack Compose. I hope you like them. If you have any doubts or suggestions, leave a comment below.
