HorizontalPageIndicator

Composable Component

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.

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

Parameters

pagerStateState of the HorizontalPager used to control this indicator
modifierModifier to be applied to the HorizontalPageIndicator
selectedColorThe color which will be used for a selected indicator item.
unselectedColorThe color which will be used for an unselected indicator item.
backgroundColorThe color which will be used for an indicator background.

Code Examples

HorizontalPageIndicatorWithPagerSample

@Composable
fun HorizontalPageIndicatorWithPagerSample(navigateBack: () -> Unit) {
    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") }
                        }
                    }
                }
            }
        }
    }
}