How can I render plain android ProgressBar with Compose?

Question

My application needs a ProgressBar, and I am trying to implement it with Jetpack Compose, so either I need a builtin ProgressBar support (I didn't find it) or there should be a mechanism to display plain Android Widgets with Compose. Is anything of this possible?

Answer 1

Ofcourse, we have Progress Bars in Jetpack Compose:

CircularProgressIndicator: Displays progress bar as Circle. It is indeterminate. Themed to Primary color set in styles. Another variant is determinate that takes progress in argument as Float (0.0f - 1.0f)

Example:

// Indeterminate
CircularProgressIndicator()

// Determinate
CircularProgressIndicator(progress = 0.5f)

LinearProgressIndicator: Displays progress bar as line. It is indeterminate. Themed to Primary color set in styles. Another variant is determinate that takes progress in argument as Float (0.0f - 1.0f)

Example:

// Indeterminate
LinearProgressIndicator()

// Determinate
LinearProgressIndicator(progress = 0.5f)

Answer 2

With 1.0.x you can use the LinearProgressIndicator or CircularProgressIndicator

// Indeterminate
CircularProgressIndicator()
LinearProgressIndicator()
// Determinate
CircularProgressIndicator(progress = ..)
LinearProgressIndicator(progress = ..)

Example:

var progress by remember {  mutableStateOf(0.1f) }

LinearProgressIndicator(
    backgroundColor = Color.White,
    progress = progress,
    color = blue700
)

To update the value you can use something like:

// { if (progress < 1f) progress += 0.1f }

Answer 3

For rounded corners we can use this code (It's the same like LinearProgress but with one small correction - in drawLine we use param StrokeCap.Round for rounding)

@Composable
fun LinearRoundedProgressIndicator(
    /*@FloatRange(from = 0.0, to = 1.0)*/
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    backgroundColor: Color = color.copy(alpha = ProgressIndicatorDefaults.IndicatorBackgroundOpacity)
) {
    val linearIndicatorHeight = ProgressIndicatorDefaults.StrokeWidth
    val linearIndicatorWidth = 240.dp
    Canvas(
        modifier
            .progressSemantics(progress)
            .size(linearIndicatorWidth, linearIndicatorHeight)
            .focusable()
    ) {
        val strokeWidth = size.height
        drawRoundedLinearIndicatorBackground(backgroundColor, strokeWidth)
        drawRoundedLinearIndicator(0f, progress, color, strokeWidth)
    }
}

private fun DrawScope.drawRoundedLinearIndicatorBackground(
    color: Color,
    strokeWidth: Float
) = drawRoundedLinearIndicator(0f, 1f, color, strokeWidth)

private fun DrawScope.drawRoundedLinearIndicator(
    startFraction: Float,
    endFraction: Float,
    color: Color,
    strokeWidth: Float
) {
    val width = size.width
    val height = size.height
    // Start drawing from the vertical center of the stroke
    val yOffset = height / 2

    val isLtr = layoutDirection == LayoutDirection.Ltr
    val barStart = (if (isLtr) startFraction else 1f - endFraction) * width
    val barEnd = (if (isLtr) endFraction else 1f - startFraction) * width

    // Progress line
    drawLine(color, Offset(barStart, yOffset), Offset(barEnd, yOffset), strokeWidth, StrokeCap.Round)
}

Answer 4

custom linear progress indicator

@Composable
fun CustomLinearProgressIndicator(
    modifier: Modifier = Modifier,
    progress: Float,
    progressColor: Color = orangeColor,
    backgroundColor: Color = orangeColor.copy(0.24f),
    clipShape: Shape = RoundedCornerShape(16.dp)
) {
    Box(
        modifier = modifier
            .clip(clipShape)
            .background(backgroundColor)
            .height(8.dp)
    ) {
        Box(
            modifier = Modifier
                .background(progressColor)
                .fillMaxHeight()
                .fillMaxWidth(progress)
        )
    }
}

Answer 5

For someone who is looking for a rounded corner linear progress bar, you can use the Modifier's clip function.

    LinearProgressIndicator(
      progress = 0.5f,
      modifier = Modifier.height(10.dp).clip(RoundedCornerShape(10.dp))
    )

Answer 6

you can use this library which supports thumb, round corners, and animations. https://github.com/KevinnZou/compose-progressIndicator