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

valueValue of the indicator in the valueRange.
modifierModifier to be applied to the component
valueRangerange of values that value can take
enabledControls the enabled state of LevelIndicator - when false, disabled colors will be used.
colorsLevelIndicatorColors that will be used to resolve the indicator and track colors for this LevelIndicator in different states
strokeWidthThe stroke width for the indicator and track strokes
sweepAngleThe angle covered by the curved LevelIndicator, in degrees
reverseDirectionReverses 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

valueCurrent value of the Stepper. If outside of valueProgression provided, value will be coerced to this range.
modifierModifier to be applied to the component
valueProgressionProgression of values that StepperLevelIndicator value can take. Consists of rangeStart, rangeEnd and step. Range will be equally divided by step size.
enabledControls the enabled state of LevelIndicator - when false, disabled colors will be used.
colorsLevelIndicatorColors that will be used to resolve the indicator and track colors for this LevelIndicator in different states
strokeWidthThe stroke width for the indicator and track strokes
sweepAngleThe angle covered by the curved LevelIndicator, in degrees
reverseDirectionReverses 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),
        )
    }
}