Build apps faster with our new App builder! Check it out →

SegmentedCircularProgressIndicator

Android

Component in Wear Material 3 Compose

Material Design segmented circular progress indicator.

A segmented variant of [CircularProgressIndicator] that is divided into equally sized segments.

Last updated:

Installation

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

Overloads

@Composable
fun SegmentedCircularProgressIndicator(
    @IntRange(from = 1) segmentCount: Int,
    progress: () -> Float,
    modifier: Modifier = Modifier,
    allowProgressOverflow: Boolean = false,
    startAngle: Float = CircularProgressIndicatorDefaults.StartAngle,
    endAngle: Float = startAngle,
    colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors(),
    strokeWidth: Dp = CircularProgressIndicatorDefaults.largeStrokeWidth,
    gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth),
    enabled: Boolean = true,
)

Parameters

namedescription
segmentCountNumber of equal segments that the progress indicator should be divided into. Has to be a number equal or greater to 1.
progressThe progress of this progress indicator where 0.0 represents no progress and 1.0 represents completion. Values smaller than 0.0 will be coerced to 0, while values larger than 1.0 will be wrapped around and shown as overflow with a different track color. The progress is applied to the entire [SegmentedCircularProgressIndicator] across all segments.
modifierModifier to be applied to the SegmentedCircularProgressIndicator.
allowProgressOverflowWhen progress overflow is allowed, values smaller than 0.0 will be coerced to 0, while values larger than 1.0 will be wrapped around and shown as overflow with a different track color [ProgressIndicatorColors.overflowTrackBrush]. For example values 1.2, 2.2 etc will be shown as 20% progress with the overflow color. When progress overflow is not allowed, progress values will be coerced into the range 0..1.
startAngleThe starting position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. Default is 270 degrees [CircularProgressIndicatorDefaults.StartAngle] (top of the screen).
endAngleThe ending position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. By default equal to [startAngle].
colors[ProgressIndicatorColors] that will be used to resolve the indicator and track color for this progress indicator in different states.
strokeWidthThe stroke width for the progress indicator.
gapSizeThe size of the gap between segments (in Dp).
enabledcontrols the enabled state. Although this component is not clickable, it can be contained within a clickable component. When enabled is false, this component will appear visually disabled.
@Composable
fun SegmentedCircularProgressIndicator(
    @IntRange(from = 1) segmentCount: Int,
    segmentValue: (segmentIndex: Int) -> Boolean,
    modifier: Modifier = Modifier,
    startAngle: Float = CircularProgressIndicatorDefaults.StartAngle,
    endAngle: Float = startAngle,
    colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors(),
    strokeWidth: Dp = CircularProgressIndicatorDefaults.largeStrokeWidth,
    gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth),
    enabled: Boolean = true,
)

Parameters

namedescription
segmentCountNumber of equal segments that the progress indicator should be divided into. Has to be a number equal or greater to 1.
segmentValueA function that for each segment between 1..[segmentCount] returns true if this segment should be displayed with the indicator color to show progress, and false if the segment should be displayed with the track color.
modifierModifier to be applied to the SegmentedCircularProgressIndicator.
startAngleThe starting position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. Default is 270 degrees [CircularProgressIndicatorDefaults.StartAngle] (top of the screen).
endAngleThe ending position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. By default equal to [startAngle].
colors[ProgressIndicatorColors] that will be used to resolve the indicator and track color for this progress indicator in different states.
strokeWidthThe stroke width for the progress indicator.
gapSizeThe size of the gap between segments (in Dp).
enabledcontrols the enabled state. Although this component is not clickable, it can be contained within a clickable component. When enabled is false, this component will appear visually disabled.

Code Examples

SegmentedProgressIndicatorSample

@Composable
fun SegmentedProgressIndicatorSample() {
    Box(
        modifier =
            Modifier.background(MaterialTheme.colorScheme.background)
                .padding(CircularProgressIndicatorDefaults.FullScreenPadding)
                .fillMaxSize()
    ) {
        SegmentedCircularProgressIndicator(
            segmentCount = 5,
            progress = { 0.5f },
        )
    }
}

SegmentedProgressIndicatorBinarySample

@Composable
fun SegmentedProgressIndicatorBinarySample() {
    Box(
        modifier =
            Modifier.background(MaterialTheme.colorScheme.background)
                .padding(CircularProgressIndicatorDefaults.FullScreenPadding)
                .fillMaxSize()
    ) {
        SegmentedCircularProgressIndicator(
            segmentCount = 5,
            segmentValue = { it % 2 != 0 },
        )
    }
}

SmallSegmentedProgressIndicatorSample

@Composable
fun SmallSegmentedProgressIndicatorSample() {
    Box(modifier = Modifier.fillMaxSize()) {
        SegmentedCircularProgressIndicator(
            segmentCount = 8,
            segmentValue = { it % 2 != 0 },
            modifier = Modifier.align(Alignment.Center).size(80.dp)
        )
    }
}
by @alexstyl