# HorizontalPageIndicator

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material/HorizontalPageIndicator.composable#HorizontalPageIndicator(androidx.wear.compose.material.PageIndicatorState,androidx.compose.ui.Modifier,androidx.wear.compose.material.PageIndicatorStyle,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape)( pageIndicatorState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PageIndicatorState, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, indicatorStyle: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PageIndicatorStyle, selectedColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, unselectedColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, indicatorSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, spacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, indicatorShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape )` A horizontal indicator for a Pager, representing the currently active page and total pages drawn using a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape`. |

## Functions

### HorizontalPageIndicator

Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/HorizontalPageIndicator.kt+function:HorizontalPageIndicator) Added in [1.6.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.6.0)

```
@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 `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/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, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/HorizontalPageIndicator.composable#HorizontalPageIndicator(androidx.wear.compose.material.PageIndicatorState,androidx.compose.ui.Modifier,androidx.wear.compose.material.PageIndicatorStyle,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape)` 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

`https://developer.android.com/reference/kotlin/androidx/wear/compose/material/HorizontalPageIndicator.composable#HorizontalPageIndicator(androidx.wear.compose.material.PageIndicatorState,androidx.compose.ui.Modifier,androidx.wear.compose.material.PageIndicatorStyle,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape)` may be linear or curved, depending on `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#HorizontalPageIndicator(androidx.wear.compose.material.PageIndicatorState,androidx.compose.ui.Modifier,androidx.wear.compose.material.PageIndicatorStyle,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape)`. 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 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#HorizontalPageIndicator(androidx.wear.compose.material.PageIndicatorState,androidx.compose.ui.Modifier,androidx.wear.compose.material.PageIndicatorStyle,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape)`, which defines how the indicator is visually represented.

```kotlin
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: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PageIndicatorState` | The state object of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/HorizontalPageIndicator.composable#HorizontalPageIndicator(androidx.wear.compose.material.PageIndicatorState,androidx.compose.ui.Modifier,androidx.wear.compose.material.PageIndicatorStyle,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape)` to be used to observe the Pager's state. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/HorizontalPageIndicator.composable#HorizontalPageIndicator(androidx.wear.compose.material.PageIndicatorState,androidx.compose.ui.Modifier,androidx.wear.compose.material.PageIndicatorStyle,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape)` |
| `indicatorStyle: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PageIndicatorStyle = PageIndicatorDefaults.style()` | The style of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/HorizontalPageIndicator.composable#HorizontalPageIndicator(androidx.wear.compose.material.PageIndicatorState,androidx.compose.ui.Modifier,androidx.wear.compose.material.PageIndicatorStyle,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape)` - may be linear or curved. By default determined by the screen shape. |
| `selectedColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.onBackground` | The color of the selected `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/HorizontalPageIndicator.composable#HorizontalPageIndicator(androidx.wear.compose.material.PageIndicatorState,androidx.compose.ui.Modifier,androidx.wear.compose.material.PageIndicatorStyle,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape)` item |
| `unselectedColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = selectedColor.copy(alpha = 0.3f)` | The color of unselected `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/HorizontalPageIndicator.composable#HorizontalPageIndicator(androidx.wear.compose.material.PageIndicatorState,androidx.compose.ui.Modifier,androidx.wear.compose.material.PageIndicatorStyle,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape)` items. Defaults to `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#HorizontalPageIndicator(androidx.wear.compose.material.PageIndicatorState,androidx.compose.ui.Modifier,androidx.wear.compose.material.PageIndicatorStyle,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape)` with 30% alpha |
| `indicatorSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 6.dp` | The size of each `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/HorizontalPageIndicator.composable#HorizontalPageIndicator(androidx.wear.compose.material.PageIndicatorState,androidx.compose.ui.Modifier,androidx.wear.compose.material.PageIndicatorStyle,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape)` item in `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` |
| `spacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 4.dp` | The spacing between indicator items in `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` |
| `indicatorShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = CircleShape` | The shape of each `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/HorizontalPageIndicator.composable#HorizontalPageIndicator(androidx.wear.compose.material.PageIndicatorState,androidx.compose.ui.Modifier,androidx.wear.compose.material.PageIndicatorStyle,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape)` item. Defaults to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/shape/package-summary#CircleShape()` |