LevelIndicator

Composable Component

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

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

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))
    }
}