OneHandedGestureIndicator

Functions summary

Unit
@Composable
OneHandedGestureIndicator(
    gestureConfiguration: OneHandedGestureConfiguration,
    indicatorState: OneHandedGestureIndicatorState,
    modifier: Modifier,
    gestureIndicatorSize: GestureIndicatorSize,
    gestureIndicatorTint: Color,
    content: @Composable () -> Unit
)

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

Functions

OneHandedGestureIndicator

@Composable
fun OneHandedGestureIndicator(
    gestureConfiguration: OneHandedGestureConfiguration,
    indicatorState: OneHandedGestureIndicatorState,
    modifier: Modifier = Modifier,
    gestureIndicatorSize: GestureIndicatorSize = OneHandedGestureDefaults.indicatorSize,
    gestureIndicatorTint: Color = OneHandedGestureDefaults.indicatorTint,
    content: @Composable () -> Unit
): Unit

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

This component manages the visual transition between the content and a gesture indicator. It observes the OneHandedGestureIndicatorState to manage its visual transition. When indicatorState signals that the gesture defined by gestureConfiguration should be displayed, the component replaces its content with a gesture animation. Once the animation completes, the indicator resets OneHandedGestureIndicatorState.isIndicatorActive back to false, restoring the original content.

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.OneHandedGestureIndicatorState
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

var label by remember { mutableStateOf("Gesturable Button") }
val onClick = { label = "Clicked/Gestured" }
val interactionSource = remember { MutableInteractionSource() }
val gestureConfig = rememberOneHandedGestureConfiguration(action = GestureAction.Primary)
val indicatorState = remember { OneHandedGestureIndicatorState() }

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Button(
        onClick = onClick,
        interactionSource = interactionSource,
        modifier =
            Modifier.oneHandedGesture(
                gestureConfiguration = gestureConfig,
                interactionSource = interactionSource,
                onGestureLabel = "activate the button",
                onGestureAvailable = { indicatorState.isIndicatorActive = true },
                onGesture = onClick,
            ),
    ) {
        OneHandedGestureIndicator(gestureConfig, indicatorState) { Text(label) }
    }
}
Parameters
gestureConfiguration: OneHandedGestureConfiguration

The configuration of the gesture associated with this indicator.
indicatorState: OneHandedGestureIndicatorState

The state object used to synchronize the indicator visibility.
modifier: Modifier = Modifier

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

The size constraints for the gesture indicator icon.
gestureIndicatorTint: Color = OneHandedGestureDefaults.indicatorTint

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

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