OneHandedGestureIndicator

Functions summary

Unit
@Composable
OneHandedGestureIndicator(
    gestureIndicatorVisible: Boolean,
    onGestureIndicatorFinished: () -> Unit,
    modifier: Modifier,
    gestureIndicatorSize: GestureIndicatorSize,
    gestureIndicatorTint: Color,
    content: @Composable BoxScope.() -> Unit
)

A wrapper that replaces the content to indicate to the user that a gesture action is available.

Functions

OneHandedGestureIndicator

@Composable
fun OneHandedGestureIndicator(
    gestureIndicatorVisible: Boolean,
    onGestureIndicatorFinished: () -> Unit,
    modifier: Modifier = Modifier,
    gestureIndicatorSize: GestureIndicatorSize = GestureIndicatorSize.Medium,
    gestureIndicatorTint: Color = MaterialTheme.colorScheme.onPrimary,
    content: @Composable BoxScope.() -> Unit
): Unit

A wrapper that replaces the content to indicate to the user that a gesture action is available.

This component handles the visual transition between the standard content and a gesture indicator. When gestureIndicatorVisible is enabled, the content is swapped out for the indicator. Once the indicator display sequence is complete, onGestureIndicatorFinished is called, allowing the UI to return to its original state.

Sample demonstrating a gesture indicator applied to a androidx.wear.compose.material3.Button:

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.onehandedgesture.GestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureIndicator
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture

var label by remember { mutableStateOf("Gesturable Button") }
val onClick = remember { { label = "Clicked/Gestured" } }
var gestureIndicatorVisible by remember { mutableStateOf(false) }
val interactionSource = remember { MutableInteractionSource() }

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Button(
        onClick = onClick,
        interactionSource = interactionSource,
        modifier =
            Modifier.oneHandedGesture(
                action = GestureAction.Primary,
                interactionSource = interactionSource,
                onShowIndicator = { gestureIndicatorVisible = true },
                onGesture = onClick,
            ),
    ) {
        OneHandedGestureIndicator(
            gestureIndicatorVisible,
            { gestureIndicatorVisible = false },
        ) {
            Text(label)
        }
    }
}
Parameters
gestureIndicatorVisible: Boolean

A boolean flag that triggers the transition from content to the indicator. While true, the content is hidden and the indicator is played.
onGestureIndicatorFinished: () -> Unit

A lambda function to be called when the gesture indicator animation sequence finishes. Implementation of this lambda must reset gestureIndicatorVisible to false in order to restore the original content.
modifier: Modifier = Modifier

The Modifier to be applied to the OneHandedGestureIndicator layout.
gestureIndicatorSize: GestureIndicatorSize = GestureIndicatorSize.Medium

The size constraints for the gesture indicator icon, defaulting to GestureIndicatorSize.Medium.
gestureIndicatorTint: Color = MaterialTheme.colorScheme.onPrimary

The color which will be used for a tint of the gesture animation icon.
content: @Composable BoxScope.() -> Unit

The original button content (e.g., Text or Icon) to be displayed when no indicator is active.