CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composeandroid-jetpack
Wafi_ck
Wafi_ck

Reputation: 1398

No ripple effect in Jetpack Compose

There is no ripple effect when I click on MyBox() I've added MyTheme(){} to main @Composable screen but it doesn't work. Is something missing?

@Composable
private MyBox(onClickInvoked: () -> Unit) {
    MyAppTheme(isSystemInDarkTheme()) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight()
                .clip(RoundedCornerShape(10.dp))
                .background(MaterialTheme.colors.onBackground)
                .clickable(onClick = { onClickInvoked.invoke() })
                .padding(horizontal = 10.dp, vertical = 15.dp)
        ) {
            Text(
                text = "My text",
                modifier = Modifier
                    .align(Alignment.CenterStart)
                    .padding(end = 95.dp)
                    .wrapContentWidth()
                    .wrapContentHeight(),
                color = MaterialTheme.colors.primary
            )
            Image(
                painter = painterResource(R.drawable.icon),
                modifier = Modifier
                    .align(Alignment.CenterEnd)
                    .padding(end = 20.dp)
                    .size(60.dp)
            )
        }
    }
}

Upvotes: 7

Views: 7296

Answers (3)

Orcun Sevsay
Orcun Sevsay

Reputation: 1473

It's nice to extract as extension function like this:

fun Modifier.setRippleEffectOnClick(onClick: () -> Unit): Modifier = composed {
    clickable(
        interactionSource = remember { MutableInteractionSource() },
        indication = rememberRipple(color = Color.Green),
        onClick = onClick
    )
}

So, you can replace clickable with setRippleEffectOnClick:

@Composable
private MyBox(onClickInvoked: () -> Unit) {
    MyAppTheme(isSystemInDarkTheme()) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight()
                .clip(RoundedCornerShape(10.dp))
                .background(MaterialTheme.colors.onBackground)
                .setRippleEffectOnClick { onClickInvoked.invoke() }
//                .clickable(onClick = { onClickInvoked.invoke() })
                .padding(horizontal = 10.dp, vertical = 15.dp)
        ) {
            Text(
                text = "My text",
                modifier = Modifier
                    .align(Alignment.CenterStart)
                    .padding(end = 95.dp)
                    .wrapContentWidth()
                    .wrapContentHeight(),
                color = MaterialTheme.colors.primary
            )
            Image(
                painter = painterResource(R.drawable.icon),
                modifier = Modifier
                    .align(Alignment.CenterEnd)
                    .padding(end = 20.dp)
                    .size(60.dp)
            )
        }
    }
}

Upvotes: 1

Yshh
Yshh

Reputation: 832

I don't really know if there is a problem with your theme. I try to pass the material theme, and the ripples will display normally

MaterialTheme() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .clip(RoundedCornerShape(10.dp))
            .background(MaterialTheme.colors.secondary)
            .clickable(onClick = { t = "My text" })
            .padding(horizontal = 10.dp, vertical = 15.dp)
    ) {
        Text(
            text = t,
            modifier = Modifier
                .align(Alignment.CenterStart)
                .padding(end = 95.dp)
                .wrapContentWidth()
                .wrapContentHeight(),
            color = MaterialTheme.colors.primary
        )
        Image(
            painter = painterResource(R.drawable.ic_launcher_foreground),
            modifier = Modifier
                .align(Alignment.CenterEnd)
                .padding(end = 20.dp)
                .size(60.dp),
            contentDescription = ""
        )
    }
}

Upvotes: 0

Linh
Linh

Reputation: 61019

With compose 1.0.5, I see the default indication after set clickable is LocalIndication.current. And LocalIndication.current is PlatformRipple. Therefore, after you set clickable to your Box, it will have ripple effect.

In your case, I think the ripple effect won't display because your Box background is too dark (normally MaterialTheme.colors.onBackground is black on Light theme)

I think you can change the ripple effect color to make it easy to see.

Surface(
    onClick = { onClickInvoked.invoke() },
    modifier = Modifier.fillMaxWidth(),
    shape = RoundedCornerShape(10.dp),
    color = MaterialTheme.colors.onBackground, // normally it is black on Light theme
    indication = rememberRipple(color = Color.White) // color for your ripple, you can use other suitable MaterialTheme.colors for your case to support Light/Dark mode
) {
    Box(modifier = Modifier.padding(horizontal = 10.dp, vertical = 15.dp)) {
        // your Box content
        ...
    }
}

There is a Modifier.indication but after testing I see it not working with Modifier.clickable so I use Surface

Upvotes: 7

Related Questions