Set color for selected dots for ShiftIndicatorType in Jetpack Compose

[fachridantm]

Column {
    var pageCount by remember { mutableStateOf(5) }
    val pagerState = rememberPagerState()
    HorizontalPager(
        modifier = Modifier.padding(top = 24.dp),
        pageCount = pageCount,
        contentPadding = PaddingValues(horizontal = 64.dp),
        pageSpacing = 24.dp,
        state = pagerState
    ) {
        PagePlaceholderItem()
    }
    DotsIndicator(
        dotCount = pageCount,
        type = ShiftIndicatorType(dotsGraphic = DotGraphic(color = MaterialTheme.colorScheme.primary)),
        pagerState = pagerState
    )
}

this is how we can produce the dots indicator in jetpack compose using ShiftIndicatorType, but why we can't customize the selected dots (e.g for its color, shape, size) like XML did on ShfitIndicatoryType?

[notsatria]

I faced the same problem, I just created my own Indicator

@Composable
fun Indicator(
    dotCount: Int,
    currentPage: Int,
    modifier: Modifier = Modifier,
    dotSpacing: Dp = 8.dp,
    dotSize: Dp = 12.dp,
) {
    Row(
        horizontalArrangement = Arrangement.spacedBy(dotSpacing),
        verticalAlignment = Alignment.CenterVertically,
        modifier = modifier
    ) {
        for (i in 0 until dotCount) {
            val isActive = currentPage == i
            val color by animateColorAsState(targetValue =  if (isActive) Purple else DotIndicatorDefault,
                label = ""
            )
            val width by animateDpAsState(targetValue = if (isActive) dotSize * 3 else dotSize,
                label = ""
            )
            Box(
                modifier = Modifier
                    .width(width)
                    .height(dotSize)
                    .clip(CircleShape)
                    .background(color)
            )
        }
    }
}