HorizontalPageIndicator

Functions summary

Unit
@Composable
HorizontalPageIndicator(
    pagerState: PagerState,
    modifier: Modifier,
    selectedColor: Color,
    unselectedColor: Color,
    backgroundColor: Color
)

Horizontal page indicator for use with HorizontalPager, representing the currently active page and the approximate number of pages.

Functions

HorizontalPageIndicator

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

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.

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

To comply with Wear Material Design guidelines, this composable should be aligned to the bottom center of the screen using Alignment.BottomCenter, such as by setting modifier = Modifier.align(Alignment.BottomCenter). If HorizontalPageIndicator is used through HorizontalPagerScaffold, then alignment is implicitly set by HorizontalPagerScaffold.

Example usage with HorizontalPager:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
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.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.Button
import androidx.wear.compose.material3.HorizontalPageIndicator
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.Text

val pageCount = 9
val pagerState = rememberPagerState { pageCount }

Box {
    HorizontalPagerScaffold(
        pagerState = pagerState,
        pageIndicator = { HorizontalPageIndicator(pagerState = pagerState) },
    ) {
        HorizontalPager(
            state = pagerState,
            flingBehavior =
                PagerScaffoldDefaults.snapWithSpringFlingBehavior(state = pagerState),
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                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")
                    if (page == 0) {
                        Spacer(modifier = Modifier.height(8.dp))
                        Button(onClick = navigateBack) { Text("Exit") }
                    }
                }
            }
        }
    }
}
Parameters
pagerState: PagerState

State of the HorizontalPager used to control this indicator
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.