VerticalPageIndicator

Functions summary

Unit
@Composable
VerticalPageIndicator(
    pagerState: PagerState,
    modifier: Modifier,
    selectedColor: Color,
    unselectedColor: Color,
    backgroundColor: Color
)

Vertical page indicator for use with VerticalPager, representing the currently active page and the approximate number of pages.

Functions

VerticalPageIndicator

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

Vertical page indicator for use with VerticalPager, 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, VerticalPageIndicator shows a smaller indicator to the top and/or bottom to indicate that more pages are available.

To comply with Wear Material Design guidelines, this composable should be aligned to the center end of the screen using Alignment.CenterEnd, such as by setting modifier = Modifier.align(Alignment.CenterEnd). This way, the VerticalPageIndicator will appear on the right in Ltr orientation and on the left in Rtl orientation. If VerticalPageIndicator is used through VerticalPagerScaffold, then alignment is implicitly set by VerticalPagerScaffold.

Example usage with VerticalPager:

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.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.VerticalPageIndicator
import androidx.wear.compose.material3.VerticalPagerScaffold

val pageCount = 9
val pagerState = rememberPagerState { pageCount }

Box {
    VerticalPagerScaffold(
        pagerState = pagerState,
        pageIndicator = { VerticalPageIndicator(pagerState = pagerState) },
    ) {
        VerticalPager(
            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 up and down")
                }
            }
        }
    }
}
Parameters
pagerState: PagerState

State of the VerticalPager used to control this indicator
modifier: Modifier = Modifier

Modifier to be applied to the VerticalPageIndicator
selectedColor: Color = PageIndicatorDefaults.selectedColor

The color which will be used for a selected indicator item.
unselectedColor: Color = PageIndicatorDefaults.unselectedColor

The color which will be used for an unselected indicator item.
backgroundColor: Color = PageIndicatorDefaults.backgroundColor

The color which will be used for an indicator background.