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.