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

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.

Box(
modifier = modifier
.background(Color.Gray)
.width(width)
) {
Box(
modifier = modifier
.background(Brush.horizontalGradient(listOf(Color(0xffFD7D20), Color(0xffFBE41A))))
.width(width * percent / 100)
)
}

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

@Composable
fun CustomProgressBar(
modifier: Modifier, width: Dp, backgroundColor: Color, foregroundColor: Brush, percent: Int,
isShownText: Boolean
) {
Box(
modifier = modifier
.background(backgroundColor)
.width(width)
) {
Box(
modifier = modifier
.background(foregroundColor)
.width(width * percent / 100)
)
}
}

And call this function

CustomProgressBar(
Modifier
.clip(shape = RoundedCornerShape(SmallPadding))
.height(14.dp),
300.dp,
Color.Gray,
Brush.horizontalGradient(listOf(Color(0xffFD7D20), Color(0xffFBE41A))),
65,
true
)

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

if (isShownText) Text("${percent} %", modifier = Modifier.align(alignment = Alignment.Center), fontSize = 12.sp)

Finally, we get this ProgressBar.

--

--

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