Custom Progress Bar in Jetpack Compose (Progress Bar with Gradient)

Photo by Diego PH on Unsplash

I have faced a task in Jetpack Compose project recently. I had to create a linear progress bar with gradient.

I haven’t found this feature in standard LinearProgressIndicator and so I have created the custom progress bar with gradient.
At the begging I created two boxes : the first for a background progress bar and the second for a foreground.

For reusing this code, we can extract it in the separate composable function

And call this function

And after call this composable function we will get it.

There are many cases, when we should show the percents. For this case we can add parameter isShownText: Boolean, and following code to the CustomProgressBar

Finally, we get this ProgressBar.

Hey, I'm Andrey. I'm an Android Developer from Belarus. Also I create applications via Flutter. I thirdly believe, that my articles will be useful for you.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store