# 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/material3/HorizontalPageIndicator.composable#HorizontalPageIndicator(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)( pagerState: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/PagerState, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, selectedColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, unselectedColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, backgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color )` Horizontal page indicator for use with `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/HorizontalPager.composable#HorizontalPager(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.GestureInclusion,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)`, representing the currently active page and the approximate number of pages. |

## Functions

### HorizontalPageIndicator

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

```
@Composable
fun HorizontalPageIndicator(
    pagerState: PagerState,
    modifier: Modifier = Modifier,
    selectedColor: Color = PageIndicatorDefaults.selectedColor,
    unselectedColor: Color = PageIndicatorDefaults.unselectedColor,
    backgroundColor: Color = PageIndicatorDefaults.backgroundColor
): Unit
```

Horizontal page indicator for use with `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/HorizontalPager.composable#HorizontalPager(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.GestureInclusion,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)`, representing the currently active page and the approximate number of pages. Pages are indicated as a Circle shape. The indicator shows up to six pages individually - if there are more than six pages, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/HorizontalPageIndicator.composable#HorizontalPageIndicator(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` shows a smaller indicator to the left and/or right to indicate that more pages are available.

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 - current page could be 6, 7 or 8 out of 10, as there are more potential pages on the left and on the right.

o O O O X O - current page is 9 out of 10, as there no more items on the right

To comply with Wear Material Design guidelines, this composable should be aligned to the bottom center of the screen using `Alignment.BottomCenter`, such as by setting `modifier = Modifier.align(Alignment.BottomCenter)`. If `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/HorizontalPageIndicator.composable#HorizontalPageIndicator(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` is used through `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/HorizontalPagerScaffold.composable#HorizontalPagerScaffold(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.animation.core.AnimationSpec,kotlin.Function0)`, then alignment is implicitly set by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/HorizontalPagerScaffold.composable#HorizontalPagerScaffold(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.animation.core.AnimationSpec,kotlin.Function0)`.

Example usage with `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/HorizontalPager.composable#HorizontalPager(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.GestureInclusion,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)`:

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.HorizontalPageIndicator
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.Text

val pageCount = 9
val pagerState = rememberPagerState { pageCount }

Box {
    HorizontalPagerScaffold(
        pagerState = pagerState,
        pageIndicator = { HorizontalPageIndicator(pagerState = pagerState) },
    ) {
        HorizontalPager(
            state = pagerState,
            flingBehavior =
                PagerScaffoldDefaults.snapWithSpringFlingBehavior(state = pagerState),
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center,
                ) {
                    Text(text = "Page #$page")
                    Spacer(modifier = Modifier.height(8.dp))
                    Text(text = "Swipe left and right")
                    if (page == 0) {
                        Spacer(modifier = Modifier.height(8.dp))
                        Button(onClick = navigateBack) { Text("Exit") }
                    }
                }
            }
        }
    }
}
```

| Parameters |
|---|---|
| `pagerState: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/PagerState` | State of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/HorizontalPager.composable#HorizontalPager(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.GestureInclusion,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)` used to control this indicator |
| `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/material3/HorizontalPageIndicator.composable#HorizontalPageIndicator(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` |
| `selectedColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = PageIndicatorDefaults.selectedColor` | The color which will be used for a selected indicator item. |
| `unselectedColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = PageIndicatorDefaults.unselectedColor` | The color which will be used for an unselected indicator item. |
| `backgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = PageIndicatorDefaults.backgroundColor` | The color which will be used for an indicator background. |