Shimmer effect in Jetpack Compose

Hey y’all, grab a cup of coffee ☕, and let’s see how to implement the shimmer effect in Jetpack Compose.

We are gonna create a custom modifier called shimmerEffect. This modifier will be changed depending on the state so we need to use composed .

fun Modifier.shimmerEffect(): Modifier = composed {
    var size by remember {
        mutableStateOf(IntSize.Zero)
    }
    val transition = rememberInfiniteTransition(
        label = "Animates the background"
    )
    val startOffsetX by transition.animateFloat(
        initialValue = -2 * size.width.toFloat(),
        targetValue = 2 * size.width.toFloat(),
        animationSpec = infiniteRepeatable(
            animation = tween(1000)
        ),
        label = "Animates the background"
    )
}

Now let’s create the background.

background(
    brush = Brush.linearGradient(
        colors = listOf(
            Color(0xFFB8B5B5),
            Color(0xFF8F8B8B),
            Color(0xFFB8B5B5),
        ),
        start = Offset(startOffsetX, 0f),
        end = Offset(startOffsetX + size.width.toFloat(), size.height.toFloat())
    ),
    shape = RoundedCornerShape(6.dp)
)
.onGloballyPositioned {
    size = it.size
}

We’re done with the modifier. The last we need to do is to apply on a composable.

Text(
    text = ""…