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

OneHandedGestureVerticalPageIndicator

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

OneHandedGestureVerticalPagerSample

@Composable
fun OneHandedGestureVerticalPagerSample() {
    val pagerState = rememberPagerState(pageCount = { 10 })
    var pageGestureIndicatorVisible by remember { mutableStateOf(false) }
    VerticalPagerScaffold(
        pagerState = pagerState,
        pageIndicator = {
            OneHandedGestureVerticalPageIndicator(
                pagerState = pagerState,
                gestureIndicatorVisible = pageGestureIndicatorVisible,
                onGestureIndicatorFinished = { pageGestureIndicatorVisible = false },
            )
        },
    ) {
        VerticalPager(
            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 up and down")
                    }
                }
            }
        }
    }
}

Last updated: