HorizontalPageIndicator

A horizontal indicator for a Pager, representing the currently active page and total pages drawn using a Shape. It shows up to 6 pages on the screen and doesn't represent the exact page index if there are more than 6 pages. Instead of showing the exact position, HorizontalPageIndicator shows a half-size indicator on the left or on the right if there are more pages.

Android
@Composable
public fun HorizontalPageIndicator(
    pageIndicatorState: PageIndicatorState,
    modifier: Modifier = Modifier,
    indicatorStyle: PageIndicatorStyle = PageIndicatorDefaults.style(),
    selectedColor: Color = MaterialTheme.colors.onBackground,
    unselectedColor: Color = selectedColor.copy(alpha = 0.3f),
    indicatorSize: Dp = 6.dp,
    spacing: Dp = 4.dp,
    indicatorShape: Shape = CircleShape,
)

Parameters
pageIndicatorState The state object of a HorizontalPageIndicator to be used to observe the Pager's state.
modifier Modifier to be applied to the HorizontalPageIndicator
indicatorStyle The style of HorizontalPageIndicator - may be linear or curved. By default determined by the screen shape.
selectedColor The color of the selected HorizontalPageIndicator item
unselectedColor The color of unselected HorizontalPageIndicator items. Defaults to selectedColor with 30% alpha
indicatorSize The size of each HorizontalPageIndicator item in Dp
spacing The spacing between indicator items in Dp
indicatorShape The shape of each HorizontalPageIndicator item. Defaults to CircleShape

Code Examples

HorizontalPageIndicatorSample

@Composable
fun HorizontalPageIndicatorSample() {
    val maxPages = 9
    var selectedPage by remember { mutableStateOf(0) }
    var finalValue by remember { mutableStateOf(0) }
    val animatedSelectedPage by
        animateFloatAsState(targetValue = selectedPage.toFloat()) { finalValue = it.toInt() }
    val pageIndicatorState: PageIndicatorState = remember {
        object : PageIndicatorState {
            override val pageOffset: Float
                get() = animatedSelectedPage - finalValue
            override val selectedPage: Int
                get() = finalValue
            override val pageCount: Int
                get() = maxPages
        }
    }
    Box(modifier = Modifier.fillMaxSize().padding(6.dp)) {
        InlineSlider(
            modifier = Modifier.align(Alignment.Center),
            value = selectedPage,
            increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") },
            decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") },
            valueProgression = 0 until maxPages,
            onValueChange = { selectedPage = it },
        )
        HorizontalPageIndicator(pageIndicatorState = pageIndicatorState)
    }
}
View all →