LinearProgressIndicator

Component in Wear Material 3 Compose

Material Design linear progress indicator.

The [LinearProgressIndicator] displays progress as a horizontal bar, consisting of two visual components:

• Track: The background line representing the total range of progress.
• Indicator: A colored line that fills the track, indicating the current progress value.

The indicator also includes a small dot at the end of the progress line. This dot serves as an accessibility feature to show the range of the indicator.

Small progress values that are larger than zero will be rounded up to at least the stroke width.

Last updated: 2024-09-07 14:23

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha24")
}

Overloads

@Composable
fun LinearProgressIndicator(
    progress: () -> Float,
    modifier: Modifier = Modifier,
    colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors(),
    strokeWidth: Dp = LinearProgressIndicatorDefaults.StrokeWidthLarge,
    enabled: Boolean = true,
)

Parameters

name	description
progress	The progress of this progress indicator where 0.0 represents no progress and 1.0 represents completion. Values outside of this range are coerced into the range 0..1.
modifier	Modifier to be applied to the [LinearProgressIndicator].
colors	[ProgressIndicatorColors] that will be used to resolve the indicator and track colors for this progress indicator in different states.
strokeWidth	The stroke width for the progress indicator. The minimum value is [LinearProgressIndicatorDefaults.StrokeWidthSmall] to ensure that the dot drawn at the end of the range can be distinguished.
enabled	controls the enabled state. Although this component is not clickable, it can be contained within a clickable component. When enabled is false, this component will appear visually disabled.

Code Example

LinearProgressIndicatorSample

@Composable
fun LinearProgressIndicatorSample(progress: () -> Float, enabled: Boolean = true) {
    Box(modifier = Modifier.background(MaterialTheme.colorScheme.background).fillMaxSize()) {
        LinearProgressIndicator(
            progress = progress,
            enabled = enabled,
            modifier =
                Modifier.semantics(mergeDescendants = true) {
                    progressBarRangeInfo = ProgressBarRangeInfo(progress(), 0f..1f)
                }
        )
    }
}