How can I render plain android ProgressBar with Compose?
Solution 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)
Solution 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 }
Solution 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)
}
Commander Tvis
Updated on June 15, 2022Comments
-
Commander Tvis about 2 years
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?