How can I add a ripple loading or wave loading like below in jetpack compose

CodePudding user response：

You can use Animation check the below code for Ripple Animation

@Composable
fun RippleLoadingAnimation(
circleColor: Color = Color.Magenta,
animationDelay: Int = 1500
) {

// 3 circles
val circles = listOf(
    remember {
        Animatable(initialValue = 0f)
    },
    remember {
        Animatable(initialValue = 0f)
    },
    remember {
        Animatable(initialValue = 0f)
    }
)

circles.forEachIndexed { index, animatable ->
    LaunchedEffect(Unit) {
        // Use coroutine delay to sync animations
        // divide the animation delay by number of circles
        delay(timeMillis = (animationDelay / 3L) * (index   1))

        animatable.animateTo(
            targetValue = 1f,
            animationSpec = infiniteRepeatable(
                animation = tween(
                    durationMillis = animationDelay,
                    easing = LinearEasing
                ),
                repeatMode = RepeatMode.Restart
            )
        )
    }
}

// outer circle
Box(
    modifier = Modifier
        .size(size = 200.dp)
        .background(color = Color.Transparent)
) {
    // animating circles
    circles.forEachIndexed { index, animatable ->
        Box(
            modifier = Modifier
                .scale(scale = animatable.value)
                .size(size = 200.dp)
                .clip(shape = CircleShape)
                .background(
                    color = circleColor
                        .copy(alpha = (1 - animatable.value))
                )
        ) {
        }
    }
}
}

CodePudding user response：

you can use ripple drawable

check out the link

https://developer.android.com/reference/android/graphics/drawable/RippleDrawable