OneHandedGestureHorizontalPageIndicator

Functions summary

Unit
@Composable
OneHandedGestureHorizontalPageIndicator(
    gestureIndicatorVisible: Boolean,
    onGestureIndicatorFinished: () -> Unit,
    pagerState: PagerState,
    modifier: Modifier,
    selectedColor: Color,
    unselectedColor: Color,
    backgroundColor: Color,
    gestureIndicatorTint: Color,
    gestureIndicatorBackgroundColor: Color
)

A horizontal page indicator that can temporarily display a gesture indicator to demonstrate how to navigate between pages using one-handed gestures.

Functions

OneHandedGestureHorizontalPageIndicator

@Composable
fun OneHandedGestureHorizontalPageIndicator(
    gestureIndicatorVisible: Boolean,
    onGestureIndicatorFinished: () -> Unit,
    pagerState: PagerState,
    modifier: Modifier = Modifier,
    selectedColor: Color = PageIndicatorDefaults.selectedColor,
    unselectedColor: Color = PageIndicatorDefaults.unselectedColor,
    backgroundColor: Color = PageIndicatorDefaults.backgroundColor,
    gestureIndicatorTint: Color = MaterialTheme.colorScheme.onTertiary,
    gestureIndicatorBackgroundColor: Color = MaterialTheme.colorScheme.tertiary
): Unit

A horizontal page indicator that can temporarily display a gesture indicator to demonstrate how to navigate between pages using one-handed gestures.

In its idle state, this component functions as a standard page indicator, using dots or bars to represent the pagerState. When gestureIndicatorVisible is set to true, the indicator temporarily replaces its standard visual state with a gesture animation sequence.

Sample demonstrating a gesture indicator applied to a androidx.wear.compose.foundation.pager.HorizontalPager:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.onehandedgesture.GestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureDefaults
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureHorizontalPageIndicator
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture

val pagerState = rememberPagerState(pageCount = { 10 })
var pageGestureIndicatorVisible by remember { mutableStateOf(false) }

HorizontalPagerScaffold(
    pagerState = pagerState,
    pageIndicator = {
        OneHandedGestureHorizontalPageIndicator(
            pagerState = pagerState,
            gestureIndicatorVisible = pageGestureIndicatorVisible,
            onGestureIndicatorFinished = { pageGestureIndicatorVisible = false },
        )
    },
) {
    HorizontalPager(
        state = pagerState,
        modifier =
            Modifier.oneHandedGesture(
                action = GestureAction.Primary,
                onShowIndicator = { pageGestureIndicatorVisible = true },
            ) {
                OneHandedGestureDefaults.scrollToNextPage(pagerState)
            },
    ) { page ->
        AnimatedPage(pageIndex = page, pagerState = pagerState) {
            ScreenScaffold {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center,
                ) {
                    Text(text = "Page #$page")
                    Spacer(modifier = Modifier.height(8.dp))
                    Text(text = "Swipe left and right")
                }
            }
        }
    }
}
Parameters
gestureIndicatorVisible: Boolean

A boolean flag that triggers the gesture indicator animation. While true, the standard scroll indicator is transformed into the gesture indicator.
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.
pagerState: PagerState

The state of the androidx.wear.compose.foundation.pager.HorizontalPager that this indicator represents.
modifier: Modifier = Modifier

Modifier to be applied to the HorizontalPageIndicator
selectedColor: Color = PageIndicatorDefaults.selectedColor

The color which will be used for a selected indicator item.
unselectedColor: Color = PageIndicatorDefaults.unselectedColor

The color which will be used for an unselected indicator item.
backgroundColor: Color = PageIndicatorDefaults.backgroundColor

The color which will be used for an indicator background.
gestureIndicatorTint: Color = MaterialTheme.colorScheme.onTertiary

The color which will be used for a tint of the gesture animation icon.
gestureIndicatorBackgroundColor: Color = MaterialTheme.colorScheme.tertiary

The color which will be used for a background behind the gesture animation.