Pager indicator with tracking crossfade animation effect.

PageIndicator.kt

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import kotlin.math.abs

/**
 * Get a Page offset from current page
 * Negative offset: swiping towards Page
 * Positive offset: swiping away from Page
 * @param page page index
 * @return page offset from current page
 * @author cjae
*/
fun PagerState.offsetForPage(page: Int) = (currentPage - page) + currentPageOffsetFraction

@Composable
fun PageIndicator(
    modifier: Modifier = Modifier,
    pagerState: PagerState,
    numberOfPages: Int = 2,
    activeColor: Color,
    inactiveColor: Color,
    indicatorWidth: Dp,
    indicatorHeight: Dp = 3.dp,
    indicatorSpace: Dp = 4.dp,
    onPageIndicatorClicked: (Int) -> Unit
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .wrapContentHeight(),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.Bottom
    ) {
        repeat(numberOfPages) { index ->
            val offset = pagerState.offsetForPage(index)
            val progressColor = if (offset == 0f) {
                activeColor
            } else if (offset <= -1f || offset >= 1f) {
                inactiveColor.copy(alpha=0f) // Alternative to setting the view invisible
            } else {
                activeColor.copy(alpha=1-abs(offset))
            }

            Box(
                modifier = Modifier
                    .width(indicatorWidth)
                    .height(indicatorHeight)
                    .clip(CircleShape)
                    .clickable { onPageIndicatorClicked.invoke(index) }
            ) {
                // Background Indicator
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(inactiveColor)
                )

                // Progress Indicator
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(progressColor)
                )
            }
            Spacer(modifier = Modifier.width(indicatorSpace))
        }
    }
}