---
title: "OneHandedGestureVerticalPageIndicator"
description: "A vertical page indicator that can temporarily display a gesture indicator to demonstrate how to navigate between pages using one-handed gestures."
type: "component"
lastmod: "2026-05-20T01:13:55.446912Z"
---
## API Reference

### OneHandedGestureVerticalPageIndicator

> Source set: Android

```kotlin
@Composable
public fun OneHandedGestureVerticalPageIndicator(
    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,
)
```

#### Parameters

| | |
| --- | --- |
| gestureIndicatorVisible | A boolean flag that triggers the gesture indicator animation. While true, the standard scroll indicator is transformed into the gesture indicator. |
| onGestureIndicatorFinished | 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 | The state of the [androidx.wear.compose.foundation.pager.VerticalPager](/jetpack-compose/androidx.wear.compose/compose-foundation/composable-functions/VerticalPager) that this indicator represents. |
| modifier | Modifier to be applied to the [VerticalPageIndicator](/jetpack-compose/androidx.wear.compose/compose-material3/components/VerticalPageIndicator) |
| selectedColor | The color which will be used for a selected indicator item. |
| unselectedColor | The color which will be used for an unselected indicator item. |
| backgroundColor | The color which will be used for an indicator background. |
| gestureIndicatorTint | The color which will be used for a tint of the gesture animation icon. |
| gestureIndicatorBackgroundColor | The color which will be used for a background behind the gesture animation. |

## Code Examples
### OneHandedGestureVerticalPagerSample
```kotlin
@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")
                    }
                }
            }
        }
    }
}
```