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 or a [Stepper].

Last updated: 2024-09-07 14:23

Installation

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

Overloads

@Composable
fun LevelIndicator(
    value: () -> Float,
    modifier: Modifier = Modifier,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    enabled: Boolean = true,
    colors: LevelIndicatorColors = LevelIndicatorDefaults.colors(),
    strokeWidth: Dp = LevelIndicatorDefaults.StrokeWidth,
    sweepAngle: Float = LevelIndicatorDefaults.SweepAngle,
    reverseDirection: Boolean = false,
)

Parameters

name	description
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
reverseDirection	Reverses direction of PositionIndicator if true

@Composable
fun LevelIndicator(
    value: () -> Int,
    valueProgression: IntProgression,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: LevelIndicatorColors = LevelIndicatorDefaults.colors(),
    strokeWidth: Dp = LevelIndicatorDefaults.StrokeWidth,
    sweepAngle: Float = LevelIndicatorDefaults.SweepAngle,
    reverseDirection: Boolean = false,
)

Parameters

name	description
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 [LevelIndicator] 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
reverseDirection	Reverses direction of PositionIndicator if true

Code Examples

StepperSample

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

StepperWithIntegerSample

@OptIn(ExperimentalWearMaterial3Api::class)
@Composable
fun StepperWithIntegerSample() {
    var value by remember { mutableIntStateOf(3) }
    val valueProgression = 0..10
    Box(modifier = Modifier.fillMaxSize()) {
        Stepper(
            value = value,
            onValueChange = { value = it },
            increaseIcon = { Icon(StepperDefaults.Increase, "Increase") },
            decreaseIcon = { Icon(StepperDefaults.Decrease, "Decrease") },
            valueProgression = valueProgression
        ) {
            Text(String.format("Value: %d".format(value)))
        }
        LevelIndicator(
            value = { value },
            valueProgression = valueProgression,
            modifier = Modifier.align(Alignment.CenterStart)
        )
    }
}