OneHandedGestureVerticalPageIndicator

Functions summary

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

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

Functions

OneHandedGestureVerticalPageIndicator

@Composable
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
): Unit

A vertical 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.VerticalPager:

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.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.VerticalPagerScaffold
import androidx.wear.compose.material3.onehandedgesture.GestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureDefaults
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureVerticalPageIndicator
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture

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")
                }
            }
        }
    }
}
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.VerticalPager that this indicator represents.
modifier: Modifier = Modifier

Modifier to be applied to the VerticalPageIndicator
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.