How to make Vertical Progress Indicator using Jetpack Compose?

Question

Just can't figure out how to make Indicators like in provided picture in Jetpack Compose.

Tryed using LinearProgressIndicator but as I understood there is no way to make it be vertical, sadly.

Answer 1

There is not an easy way to do it, but I've copied some of my own code as an example of how you'd build one:

@Composable
fun VerticalProgressBar(
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = Color.Green,
    backgroundColor: Color = Color.Black,
    size: Size = Size(width = 10f, height = 100f),
    strokeSize: Float = 1f,
    strokeColor: Color = Color.Blue
) {
    Canvas(
        modifier = modifier
            .size(size.width.dp,size.height.dp)
            .border(width = strokeSize.dp, color = strokeColor)
    ) {
        // Progress made
        drawRect(
            color = color,
            size = Size(size.width.dp.toPx(), height = (progress * size.height).dp.toPx()),
            topLeft = Offset(0.dp.toPx(), ((1 - progress) * size.height).dp.toPx())
        )
        // background
        drawRect(
            color = backgroundColor,
            size = Size(width = size.width.dp.toPx(), height = ((1 - progress) * size.height).dp.toPx()),
        )
    }
}

Result: