🤔 Documentation issue? Report or edit

LinearProgressIndicator¶

A LinearProgressIndicator can be used to display a progress in linear line, also known as a progress bar. There are two kinds:

Indeterminate

LinearProgressIndicator()

When you use the LinearProgressIndicator without the progress parameter, it will run forever.

Determinate

LinearProgressIndicator(progress = 0.5f)

When you set a value to the progress parameter, the indicator will be shown with that progress. E.g. a progress of 0.5f will fill it to the half.

Example¶

@Composable
fun LinearProgressIndicatorSample() {
    var progress by remember { mutableStateOf(0.1f) }
    val animatedProgress = animateFloatAsState(
        targetValue = progress,
        animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec
    ).value

    Column(horizontalAlignment = Alignment.CenterHorizontally) {

        Spacer(Modifier.height(30.dp))
        Text("LinearProgressIndicator with undefined progress")
        LinearProgressIndicator()
        Spacer(Modifier.height(30.dp))
        Text("LinearProgressIndicator with progress set by buttons")
        LinearProgressIndicator(progress = animatedProgress)
        Spacer(Modifier.height(30.dp))
        OutlinedButton(
                onClick = {
                    if (progress < 1f) progress += 0.1f
                }
        ) {
            Text("Increase")
        }

        OutlinedButton(
                onClick = {
                    if (progress > 0f) progress -= 0.1f
                }
        ) {
            Text("Decrease")
        }
    }
}

LinearProgressIndicator¶

Example¶

See also:¶