LevelIndicator

Component in Wear Material 3 Compose

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

Last updated: 2025-03-21 11:59

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha34")
}

Overloads

@Composable
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

name	description
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 Example

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