OneHandedGestureHorizontalPageIndicator

Functions summary

Unit
@Composable
OneHandedGestureHorizontalPageIndicator(
    gestureConfiguration: OneHandedGestureConfiguration,
    indicatorState: OneHandedGestureIndicatorState,
    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(
    gestureConfiguration: OneHandedGestureConfiguration,
    indicatorState: OneHandedGestureIndicatorState,
    pagerState: PagerState,
    modifier: Modifier = Modifier,
    selectedColor: Color = PageIndicatorDefaults.selectedColor,
    unselectedColor: Color = PageIndicatorDefaults.unselectedColor,
    backgroundColor: Color = PageIndicatorDefaults.backgroundColor,
    gestureIndicatorTint: Color = OneHandedGestureDefaults.pageIndicatorTint,
    gestureIndicatorBackgroundColor: Color = OneHandedGestureDefaults.pageIndicatorBackgroundColor
): Unit

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

This component functions as a standard page indicator, using dots or bars to represent the pagerState. It observes the OneHandedGestureIndicatorState to manage its visual transition into a gesture indicator. When indicatorState signals that the gesture defined by gestureConfiguration should be displayed, the indicator replaces its standard visual state with a gesture animation. Once the animation completes, the indicator resets OneHandedGestureIndicatorState.isIndicatorActive back to false, returning the component to its standard page indicator behavior.

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.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.OneHandedGestureIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureIndicatorState
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

val pagerState = rememberPagerState(pageCount = { 10 })
val gestureConfig = rememberOneHandedGestureConfiguration(action = GestureAction.Primary)
val indicatorState = remember { OneHandedGestureIndicatorState() }

HorizontalPagerScaffold(
    pagerState = pagerState,
    pageIndicator = {
        OneHandedGestureHorizontalPageIndicator(
            gestureConfiguration = gestureConfig,
            indicatorState = indicatorState,
            pagerState = pagerState,
        )
    },
) {
    HorizontalPager(
        state = pagerState,
        modifier =
            Modifier.oneHandedGesture(
                gestureConfiguration = gestureConfig,
                onGestureLabel = "scroll to the next page",
                onGestureAvailable = { indicatorState.isIndicatorActive = 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
gestureConfiguration: OneHandedGestureConfiguration

The configuration of the gesture associated with this indicator.
indicatorState: OneHandedGestureIndicatorState

The state object used to synchronize the indicator visibility.
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 = OneHandedGestureDefaults.pageIndicatorTint

The color which will be used for a tint of the gesture animation icon.
gestureIndicatorBackgroundColor: Color = OneHandedGestureDefaults.pageIndicatorBackgroundColor

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