HorizontalPageIndicator

Functions summary

Unit
@Composable
HorizontalPageIndicator(
    pageIndicatorState: PageIndicatorState,
    modifier: Modifier,
    indicatorStyle: PageIndicatorStyle,
    selectedColor: Color,
    unselectedColor: Color,
    indicatorSize: Dp,
    spacing: Dp,
    indicatorShape: Shape
)

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

Functions

HorizontalPageIndicator

@Composable
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
): Unit

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.

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.HorizontalPageIndicator
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.InlineSlider
import androidx.wear.compose.material.InlineSliderDefaults
import androidx.wear.compose.material.PageIndicatorState

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)
}
Parameters
pageIndicatorState: PageIndicatorState

The state object of a HorizontalPageIndicator to be used to observe the Pager's state.
modifier: Modifier = Modifier

Modifier to be applied to the HorizontalPageIndicator
indicatorStyle: PageIndicatorStyle = PageIndicatorDefaults.style()

The style of HorizontalPageIndicator - may be linear or curved. By default determined by the screen shape.
selectedColor: Color = MaterialTheme.colors.onBackground

The color of the selected HorizontalPageIndicator item
unselectedColor: Color = selectedColor.copy(alpha = 0.3f)

The color of unselected HorizontalPageIndicator items. Defaults to selectedColor with 30% alpha
indicatorSize: Dp = 6.dp

The size of each HorizontalPageIndicator item in Dp
spacing: Dp = 4.dp

The spacing between indicator items in Dp
indicatorShape: Shape = CircleShape

The shape of each HorizontalPageIndicator item. Defaults to CircleShape