Compose Component

OneHandedGestureClickIndicator

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

OneHandedGestureButtonSample

@Sampled
@Composable
fun OneHandedGestureButtonSample() {
    var label by remember { mutableStateOf("Gesturable Button") }
    val onClick = { label = "Clicked/Gestured" }
    val interactionSource = remember { MutableInteractionSource() }
    val gestureConfig =
        rememberOneHandedGestureConfiguration(action = OneHandedGestureAction.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())
            }
        }
    }
}
Jetpack Compose beyond MaterialFree components, screens and templates for apps that don’t look like Google’s. Copy them into your app, or let your coding agent add them.Browse for free

Content updated: