Shohieb Nasruddin

Shohieb Nasruddin

Munqidh min adh-Dalal. Wisdom is not enough, make & keep it real

Jetpack Compose Animation Mix Pager Indicator In Action

less than 1 minute read

Published:

AnimatedPagerIndicator

The code is here

Explaination:

 val indicatorWidthPx = LocalDensity.current.run { 8.dp.roundToPx() }
 val spacingPx = LocalDensity.current.run { spacing.roundToPx() }

read about it here converting to px to make the movement less significant

val scrollPosition = (pagerState.currentPage + pagerState.currentPageOffset)
        .coerceIn(
            0f,
            (pagerState.pageCount - 1)
                .coerceAtLeast(0)
                .toFloat()
        )

coerceIn and coerceAtLeast is used to implement snap whenever the movement stop on every page.

val value by animateFloatAsState(
    targetValue = if (scrollPosition % 1 == 0F) 8F else 16F,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    )
)

I use spring AnimationSpec so that I can adjust the dampingRatio and stiffness, you can adjust based on your preference.
Read about it here

Modifier.offset {
                  IntOffset(
                      x = ((spacingPx + indicatorWidthPx) * scrollPosition).toInt(),
                      y = 0
                  )
              }
  .size(width = value.dp, height = indicatorHeight)

offset is where the movement is being implemented.
whereas size is the function which you put the value produced from animateFloatAsState, put the width parameter with it.