compose wear: how to create ripple effect like:

# compose-wear

[lam bui]

compose wear: how to create ripple effect like:

[Zach Klippenstein (he/him) [MOD]]

What did you try?

[lam bui]

@Composable
fun RippleEffectImage(
    onDoneClick: () -> Unit
) {
    var currentImage by remember { mutableStateOf(0) }
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()
    val scope = rememberCoroutineScope()
    val images = listOf(
        painterResource(id = R.drawable.img_ripple_1),
        painterResource(id = R.drawable.img_ripple_2),
        painterResource(id = R.drawable.img_ripple_3),
        painterResource(id = R.drawable.img_ripple_4),
    )
    LaunchedEffect(isPressed) {
        if (isPressed) {
            repeat(images.size) { index ->
                delay(600L / images.size)  // distribute total duration among images
                currentImage = index
            }
            onDoneClick()
        }
    }
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(60.dp)
            .background(Color.Black)
            .clickable(
                interactionSource = interactionSource,
                indication = rememberRipple(bounded = false)  // customized ripple effect
            ) {}
    ) {
        Image(
            painter = images[currentImage],
            contentDescription = "Ripple effect image"
        )
    }
}
@Preview(device = Devices.WEAR_OS_SMALL_ROUND, showSystemUi = true)
@Composable
fun DefaultPreview() {
    RippleEffectImage({})
}

[lam bui]

not good.

Screen_recording_20240722_102006.webm

[Skaldebane]

You can use the circularReveal Modifier in this gist: https://gist.github.com/darvld/eb3844474baf2f3fc6d3ab44a4b4b5f8

[Skaldebane]

Then simply overlay the "activated" version on top of the "deactivated" version (make sure they have the same size etc), and apply the circularReveal modifier to the top one.