LevelIndicator

Creates a LevelIndicator for screens that that control a setting such as volume with either rotating side button, rotating bezel.

Android
@Composable
public fun LevelIndicator(
    value: () -> Float,
    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,
)

Parameters
value Value of the indicator as a fraction in the range 0,1. Values outside of the range 0,1 will be coerced.
modifier Modifier to be applied to the component
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

LevelIndicatorSample

@Composable
fun LevelIndicatorSample() {
    var value by remember { mutableFloatStateOf(0.5f) }
    Box(modifier = Modifier.fillMaxSize()) {
        Column(
            verticalArrangement = Arrangement.SpaceEvenly,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.fillMaxSize(),
        ) {
            IconButton(
                modifier = Modifier.padding(horizontal = 16.dp),
                enabled = value < 1f,
                onClick = { value += 0.1f },
            ) {
                VolumeUpIcon(StepperDefaults.IconSize)
            }
            IconButton(
                modifier = Modifier.padding(horizontal = 16.dp),
                enabled = value > 0f,
                onClick = { value -= 0.1f },
            ) {
                VolumeDownIcon(StepperDefaults.IconSize)
            }
        }
        LevelIndicator(value = { value }, modifier = Modifier.align(Alignment.CenterStart))
    }
}
View all →