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.

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.