StepperLevelIndicator

Composable Component

Creates a StepperLevelIndicator for screens that that control a setting, such as volume, with a Stepper.

Android
@Composable
public fun StepperLevelIndicator(
    value: () -> Float,
    modifier: Modifier = Modifier,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    enabled: Boolean = true,
    colors: LevelIndicatorColors = LevelIndicatorDefaults.colors(),
    strokeWidth: Dp = LevelIndicatorDefaults.StrokeWidth,
    @FloatRange(from = 0.0, to = 360.0) sweepAngle: Float = LevelIndicatorDefaults.SweepAngle,
    reverseDirection: Boolean = false,
): Unit

Parameters
value Value of the indicator in the valueRange.
modifier Modifier to be applied to the component
valueRange range of values that value can take
enabled Controls the enabled state of LevelIndicator - when false, disabled colors will be used.
colors LevelIndicatorColors that will be used to resolve the indicator and track colors for this LevelIndicator in different states
strokeWidth The stroke width for the indicator and track strokes
sweepAngle The angle covered by the curved LevelIndicator, in degrees
reverseDirection Reverses direction of PositionIndicator if true
Android
@Composable
public fun StepperLevelIndicator(
    value: () -> Int,
    valueProgression: IntProgression,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: LevelIndicatorColors = LevelIndicatorDefaults.colors(),
    strokeWidth: Dp = LevelIndicatorDefaults.StrokeWidth,
    @FloatRange(from = 0.0, to = 360.0) sweepAngle: Float = LevelIndicatorDefaults.SweepAngle,
    reverseDirection: Boolean = false,
): Unit

Parameters
value Current value of the Stepper. If outside of valueProgression provided, value will be coerced to this range.
modifier Modifier to be applied to the component
valueProgression Progression of values that StepperLevelIndicator value can take. Consists of rangeStart, rangeEnd and step. Range will be equally divided by step size.
enabled Controls the enabled state of LevelIndicator - when false, disabled colors will be used.
colors LevelIndicatorColors that will be used to resolve the indicator and track colors for this LevelIndicator in different states
strokeWidth The stroke width for the indicator and track strokes
sweepAngle The angle covered by the curved LevelIndicator, in degrees
reverseDirection Reverses direction of PositionIndicator if true

Code Examples

StepperSample

@Composable
fun StepperSample() {
    var value by remember { mutableFloatStateOf(2f) }
    val valueRange = remember { 0f..4f }
    Box(modifier = Modifier.fillMaxSize()) {
        Stepper(
            value = value,
            onValueChange = { value = it },
            valueRange = valueRange,
            steps = 7,
            decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) },
            increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) },
        ) {
            Text(String.format("Value: %.1f".format(value)))
        }
        StepperLevelIndicator(
            value = { value },
            valueRange = valueRange,
            modifier = Modifier.align(Alignment.CenterStart),
        )
    }
}

StepperWithIntegerSample

@Composable
fun StepperWithIntegerSample() {
    var value by remember { mutableIntStateOf(3) }
    val valueProgression = remember { 0..10 }
    Box(modifier = Modifier.fillMaxSize()) {
        Stepper(
            value = value,
            onValueChange = { value = it },
            valueProgression = valueProgression,
            decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) },
            increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) },
        ) {
            Text(String.format("Value: %d".format(value)))
        }
        StepperLevelIndicator(
            value = { value },
            valueProgression = valueProgression,
            modifier = Modifier.align(Alignment.CenterStart),
        )
    }
}