how would I proceed with making this widget’s UI i...

# compose

[solidogen]

how would I proceed with making this widget’s UI in compose? it’s instagram-style pager indicator, I’m not sure how to layout this correctly. Especially scrolling part and keeping current page in the middle

[Andrew Neal]

Should help you get started: https://google.github.io/accompanist/pager/#indicators

[solidogen]

Yeah, I use this as well, but those are static

[Andrew Neal]

This is the function for the horizontal pager indicator. It's about 50 lines and is mostly just a Box with a Modifier. But you can see how making one is mostly a matter of accepting PagerState and using that to derive any scrolling or scaling effects.

@ExperimentalPagerApi
@Composable
fun HorizontalPagerIndicator(
    pagerState: PagerState,
    modifier: Modifier = Modifier,
    activeColor: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current),
    inactiveColor: Color = activeColor.copy(ContentAlpha.disabled),
    indicatorWidth: Dp = 8.dp,
    indicatorHeight: Dp = indicatorWidth,
    spacing: Dp = indicatorWidth,
    indicatorShape: Shape = CircleShape,
) {
    Box(
        modifier = modifier,
        contentAlignment = Alignment.CenterStart
    ) {
        Row(
            horizontalArrangement = Arrangement.spacedBy(spacing),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            val indicatorModifier = Modifier
                .size(width = indicatorWidth, height = indicatorHeight)
                .background(color = inactiveColor, shape = indicatorShape)

            repeat(pagerState.pageCount) {
                Box(indicatorModifier)
            }
        }

        Box(
            Modifier
                .offset {
                    val scrollPosition = (pagerState.currentPage + pagerState.currentPageOffset)
                        .coerceIn(0f, (pagerState.pageCount - 1).toFloat())
                    IntOffset(
                        x = ((spacing + indicatorWidth) * scrollPosition).roundToPx(),
                        y = 0
                    )
                }
                .size(width = indicatorWidth, height = indicatorHeight)
                .background(
                    color = activeColor,
                    shape = indicatorShape,
                )
        )
    }
}

[solidogen]

this is what I’m currently attempting

[solidogen]

another sample in this project has ScrollableTabRow which is something similar I guess