LinearProgressIndicator

Functions summary

Unit
@Composable
LinearProgressIndicator(
    progress: () -> Float,
    modifier: Modifier,
    colors: ProgressIndicatorColors,
    strokeWidth: Dp,
    enabled: Boolean
)

Material Design linear progress indicator.

Functions

LinearProgressIndicator

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

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.

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

LinearProgressIndicator sample:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.ProgressBarRangeInfo
import androidx.compose.ui.semantics.progressBarRangeInfo
import androidx.compose.ui.semantics.semantics
import androidx.wear.compose.material3.LinearProgressIndicator
import androidx.wear.compose.material3.MaterialTheme

Box(
    modifier = Modifier.background(MaterialTheme.colorScheme.background).fillMaxSize(),
    contentAlignment = Alignment.Center,
) {
    LinearProgressIndicator(
        progress = progress,
        enabled = enabled,
        modifier =
            Modifier.semantics(mergeDescendants = true) {
                progressBarRangeInfo = ProgressBarRangeInfo(progress(), 0f..1f)
            },
    )
}
Parameters
progress: () -> Float

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. Progress value changes will be animated.

modifier: Modifier = Modifier

Modifier to be applied to the LinearProgressIndicator.

colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors()

ProgressIndicatorColors that will be used to resolve the indicator and track colors for this progress indicator in different states.

strokeWidth: Dp = LinearProgressIndicatorDefaults.StrokeWidthLarge

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: Boolean = true

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.