CircularProgressIndicatorStatic

Component in Wear Material 3 Compose

[CircularProgressIndicatorStatic] is a non-animating circular progress indicator. Prefer to use [CircularProgressIndicator] directly instead of this overload in order to access the recommended animations, but this overload can be used when custom animations are required.

Last updated: 2025-02-05 12:19

Installation

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

Overloads

@Composable
fun CircularProgressIndicatorStatic(
    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,
    overflowColorAlphaFraction: Float = 1f,
    targetProgress: (() -> Float)? = null,
): Unit

Parameters

name	description
progress	The progress of this progress indicator where 0.0 represents no progress and 1.0 represents completion.
modifier	Modifier to be applied to the CircularProgressIndicator.
allowProgressOverflow	When 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.
startAngle	The 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).
endAngle	The 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.
strokeWidth	The stroke width for the progress indicator. The recommended values are [CircularProgressIndicatorDefaults.largeStrokeWidth] and [CircularProgressIndicatorDefaults.smallStrokeWidth].
gapSize	The size (in Dp) of the gap between the ends of the progress indicator and the track. The stroke endcaps are not included in this distance.
enabled	controls 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.
overflowColorAlphaFraction	Alpha fraction to apply to the overflow color. This can be used to implement animated transition from progress color to overflow color. For no animation should be set to 1.
targetProgress	Target value if the progress value is to be animated. Used to determine if the min progress values should be enforced. For no animation this should be null.

Code Example

CircularProgressIndicatorStaticSample

@Composable
fun CircularProgressIndicatorStaticSample() {
    val progress = remember { mutableFloatStateOf(0f) }
    val animatedProgress = remember { Animatable(0f) }

    LaunchedEffect(Unit) {
        snapshotFlow(progress::value).collectLatest {
            animatedProgress.animateTo(it, tween(durationMillis = 1024, easing = LinearEasing))
        }
    }

    Box(
        modifier =
            Modifier.background(MaterialTheme.colorScheme.background)
                .padding(CircularProgressIndicatorDefaults.FullScreenPadding)
                .fillMaxSize()
    ) {
        Button(
            modifier = Modifier.align(Alignment.Center).padding(12.dp),
            onClick = { progress.value = if (progress.value == 0f) 1f else 0f },
            label = { Text("Animate") },
        )

        // Since CircularProgressIndicatorStatic does not have any built-in progress animations,
        // we can implement a custom progress animation by using an Animatable progress value.
        CircularProgressIndicatorStatic(
            progress = animatedProgress::value,
            startAngle = 120f,
            endAngle = 60f,
        )
    }
}