HorizontalPageIndicator

Component in Wear Material 3 Compose

Horizontal page indicator for use with [HorizontalPager], 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, [HorizontalPageIndicator] shows a smaller indicator to the left and/or right 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.

Here's how different positions 0..10 might be visually represented: "X" is selected item, "O" and "o" full and half size items respectively.

O X O O O o - 2nd position out of 10. There are no more items on the left but more on the right.

o O O O X o - current page could be 6, 7 or 8 out of 10, as there are more potential pages on the left and on the right.

o O O O X O - current page is 9 out of 10, as there no more items on the right

[HorizontalPageIndicator] 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-22 13:47

Installation

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

Overloads

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

Parameters

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

HorizontalPageIndicatorWithPagerSample

@Composable
@OptIn(ExperimentalWearFoundationApi::class)
fun HorizontalPageIndicatorWithPagerSample() {
    val pageCount = 9
    val pagerState = rememberPagerState { pageCount }

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