Horizontal pager with dots
Four swipeable pages with indicator dots reflecting the current page.
val state = rememberPagerState(pageCount = { 4 })
HorizontalPager(state = state, modifier = Modifier.height(180.dp)) { page ->
Box(contentAlignment = Alignment.Center) {
Text("${page + 1}", style = MaterialTheme.typography.displayLarge)
}
}
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
repeat(4) { index ->
val active = state.currentPage == index
Box(
modifier = Modifier
.size(if (active) 10.dp else 8.dp)
.clip(CircleShape)
.background(if (active) selected else unselected)
)
}
}