HorizontalPageIndicator

A horizontal indicator for a Pager, representing the currently active page and total pages drawn

HorizontalPageIndicator

Composable Component

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

pageIndicatorStateThe state object of a HorizontalPageIndicator to be used to observe the Pager's state.
modifierModifier to be applied to the HorizontalPageIndicator
indicatorStyleThe style of HorizontalPageIndicator - may be linear or curved. By default determined by the screen shape.
selectedColorThe color of the selected HorizontalPageIndicator item
unselectedColorThe color of unselected HorizontalPageIndicator items. Defaults to selectedColor with 30% alpha
indicatorSizeThe size of each HorizontalPageIndicator item in Dp
spacingThe spacing between indicator items in Dp
indicatorShapeThe 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)
    }
}