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


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`

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled