OneHandedGestureClickIndicator

Functions summary

Unit
@Composable
OneHandedGestureClickIndicator(
    gestureConfiguration: OneHandedGestureConfiguration,
    state: OneHandedGestureClickIndicatorState,
    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

OneHandedGestureClickIndicator

@Composable
fun OneHandedGestureClickIndicator(
    gestureConfiguration: OneHandedGestureConfiguration,
    state: OneHandedGestureClickIndicatorState,
    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 OneHandedGestureClickIndicatorState to manage its visual transition. When OneHandedGestureClickIndicatorState.showIndicator is called, the component replaces its content with a gesture animation.

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.foundation.layout.fillMaxWidth
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
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.OneHandedGestureClickIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicatorState
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 { OneHandedGestureClickIndicatorState() }
val coroutineScope = rememberCoroutineScope()

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

the specification for the one-handed gesture
state: OneHandedGestureClickIndicatorState

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

The Modifier to be applied to the OneHandedGestureClickIndicator 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.

See also the UI Design Guides for One-Handed Gestures