Compose Unstyled 2.0 is out! Check the official announcement blog ->
Compose Component

OneHandedGestureHorizontalPageIndicator

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

OneHandedGestureHorizontalPagerSample

@Composable
fun OneHandedGestureHorizontalPagerSample() {
    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")
                    }
                }
            }
        }
    }
}

Last updated: