Hi all! I’m trying to implement <DotsIndicator> fo...

# compose

[mertceyhan]

Hi all! I’m trying to implement DotsIndicator for HorizontalPager on Compose but I am stuck with the implementation. Does anyone have an idea?

https://user-images.githubusercontent.com/15737675/38328329-e7008c06-384a-11e8-8449-9f2e396d2bc5.gif▾

[Tin Tran]

@ExperimentalPagerApi
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun PagerIndicator(
    state: PagerState,
    modifier: Modifier = Modifier,
    activeColor: Color = GolftecGreen,
    inActiveColor: Color = Color.White,
    activeWidth: Dp = 12.dp,
    inActiveSize: Dp = 4.dp,
    indicatorSpacing: Dp = 3.dp
) {
    Row(modifier = modifier) {
        for (i in 0 until state.pageCount) {
            val isActive = i == state.currentPage
            val backgroundColor = if (isActive) {
                lerp(
                    activeColor,
                    inActiveColor,
                    abs(state.currentPageOffset).coerceIn(0f, 1f)
                )
            } else if (i == state.targetPage) {
                lerp(
                    inActiveColor,
                    activeColor,
                    abs(state.currentPageOffset).coerceIn(0f, 1f)
                )
            } else {
                inActiveColor
            }
            val width = if (isActive)
                (activeWidth * (1 - abs(state.currentPageOffset))).coerceIn(
                    inActiveSize,
                    activeWidth
                )
            else if (i == state.targetPage)
                (activeWidth * abs(state.currentPageOffset)).coerceIn(inActiveSize, activeWidth)
            else
                inActiveSize
            Box(
                modifier = Modifier
                    .clip(RoundedCornerShape(inActiveSize))
                    .width(width)
                    .height(inActiveSize)
                    .background(backgroundColor)
            )
            Spacer(modifier = Modifier.width(indicatorSpacing))
        }
    }
}

[mertceyhan]

It was easy to implement after the scrolling is done but I couldn’t calculate the width of the indicator during the scrolling.

@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 currentPage = pagerState.currentPage
                val width by animateDpAsState(targetValue = if (currentPage == index) activeIndicatorWidth else indicatorWidth)
                val color by animateColorAsState(targetValue = if (currentPage == index) activeColor else inactiveColor)

                Box(
                    Modifier
                        .size(
                            width = width,
                            height = indicatorHeight
                        )
                        .background(
                            color = color,
                            shape = indicatorShape
                        )
                )
            }
        }
    }
}

Screen Recording 2022-05-09 at 12.18.41.mov

[Tin Tran]

Mine is not pretty but it’s working

[mertceyhan]

It works fine, thank you so much Tin 🙏

[Chris Sinco [G]]

Have you already tried using the indicators built in Accompanist? https://google.github.io/accompanist/pager/#indicators

[mertceyhan]

Yes, I’ve tried but our designer has wanted to implement custom. Thank you @Chris Sinco [G]