VerticalPageIndicator

Component in Wear Material 3 Compose

Vertical page indicator for use with [VerticalPager], representing the currently active page and the approximate number of pages. Pages are indicated as a Circle shape. The indicator shows up to six pages individually - if there are more than six pages, [VerticalPageIndicator] shows a smaller indicator to the top and/or bottom to indicate that more pages are available.

This is a full screen component and will occupy the whole screen. However it's not actionable, so it's not expected to interfere with anything on the screen.

[VerticalPageIndicator] can be linear or curved, depending on the screen shape of the device - for circular screens it will be curved, whilst for square screens it will be linear.

Last updated: 2024-10-14 12:17

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha26")
}

Overloads

@Composable
fun VerticalPageIndicator(
    pagerState: PagerState,
    modifier: Modifier = Modifier,
    selectedColor: Color = PageIndicatorDefaults.selectedColor,
    unselectedColor: Color = PageIndicatorDefaults.unselectedColor,
    backgroundColor: Color = PageIndicatorDefaults.backgroundColor,
)

Parameters

name	description
pagerState	State of the [VerticalPager] used to control this indicator
modifier	Modifier to be applied to the [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.

Code Example

VerticalPageIndicatorWithPagerSample

@Composable
fun VerticalPageIndicatorWithPagerSample() {
    val pageCount = 9
    val pagerState = rememberPagerState { pageCount }

    Box {
        VerticalPager(
            modifier = Modifier.fillMaxSize(),
            state = pagerState,
        ) { page ->
            Box(modifier = Modifier.fillMaxSize()) {
                Text(modifier = Modifier.align(Alignment.Center), text = "Page #$page")
            }
        }
        VerticalPageIndicator(pagerState = pagerState)
    }
}