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.

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 - might be 6, 7 or 8 out of 10, as there are more possible items on the left and on the right o O O O X O - is 9 out of 10, as there're no more items on the right

HorizontalPageIndicator may be linear or curved, depending on indicatorStyle. By default it depends on the screen shape of the device - for circular screens it will be curved, whilst for square screens it will be linear.

This component also allows customising the indicatorShape, which defines how the indicator is visually represented.

Overloads

HorizontalPageIndicator

@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