Skip to content

Instantly share code, notes, and snippets.

@mertceyhan
Created May 9, 2022 15:39
Show Gist options
  • Star 18 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save mertceyhan/52077c78c391fc889f518af266db234e to your computer and use it in GitHub Desktop.
Save mertceyhan/52077c78c391fc889f518af266db234e to your computer and use it in GitHub Desktop.
@ExperimentalPagerApi
@Composable
fun WormHorizontalPagerIndicator(
pagerState: PagerState,
modifier: Modifier = Modifier,
activeColor: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current),
inactiveColor: Color = activeColor.copy(ContentAlpha.disabled),
indicatorWidth: Dp = 8.dp,
activeIndicatorWidth: Dp = 25.dp,
indicatorHeight: Dp = indicatorWidth,
spacing: Dp = indicatorWidth,
indicatorShape: Shape = CircleShape,
) {
Box(
modifier = modifier,
contentAlignment = Alignment.CenterStart
) {
Row(
horizontalArrangement = Arrangement.spacedBy(spacing),
verticalAlignment = Alignment.CenterVertically,
) {
repeat(pagerState.pageCount) { index ->
val currentPageOffset = pagerState.currentPageOffset
val isCurrentPage = index == pagerState.currentPage
val isNextPage = index == pagerState.targetPage
val width: Dp = when {
isCurrentPage -> {
(activeIndicatorWidth * (1 - abs(currentPageOffset))).coerceIn(
indicatorWidth,
activeIndicatorWidth
)
}
isNextPage -> {
(activeIndicatorWidth * abs(currentPageOffset)).coerceIn(
indicatorWidth,
activeIndicatorWidth
)
}
else -> {
indicatorWidth
}
}
val color: Color = when {
isCurrentPage -> {
lerp(
activeColor,
inactiveColor,
abs(currentPageOffset).coerceIn(0f, 1f)
)
}
isNextPage -> {
lerp(
inactiveColor,
activeColor,
abs(currentPageOffset).coerceIn(0f, 1f)
)
}
else -> {
inactiveColor
}
}
Box(
Modifier
.size(
width = width,
height = indicatorHeight
)
.background(
color = color,
shape = indicatorShape
)
)
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment