I was expecting to see a touch ripple onclick. Is ...
# compose
c
I was expecting to see a touch ripple onclick. Is my assumption wrong or am I doing something wrong? Note: My log fires, so the click definitely triggers.
Copy code
Box(
    modifier = Modifier
        .border(1.dp, Color.Red)
        .fillMaxWidth()
        .height(72.dp)
        .clickable { Log.e("LOG", "CLICK") }
) { Text(text = "MY TEXT") }
a
I believe the ripple is part of material , so you need a material theme used
c
Two things 1. My entire app is wrapped in a MaterialTheme 2. I think @Chris Sinco [G] once said that ripples were deemed so important they were actually elevated out of material and just into compose directly? So I don't think material has anything to do with this here, but I could be wrong.
c
Do you have a video of the issue? Also is this Composable in another hierarchy? I think sometimes there are issues where the ripple color sometimes blends with the background.
b
[snipped to remove tag] once said that ripples were deemed so important they were actually elevated out of material and just into compose directly? So I don’t think material has anything to do with this here, but I could be wrong.
I believe that is with respect to the actual drawing and animating of ripples. The concept of a ripple is still present with Material & Compose and can be replaced. Specifically, a
RippleIndication
is the default
LocalIndication
in a `MaterialTheme`: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]droidx/compose/material/MaterialTheme.kt;l=75?q=Materialtheme
c
As for #2, ripples are important in Compose, but I don’t technically know if it was architected that way to be outside the Material library. @Louis Pullen-Freilich [G] can confirm
l
Ripples themselves are provided in a separate library (
material-ripple
) because although they are a ‘Material concept’, they are also so innate to Android as a platform that even non-Material design applications use ripples to be consistent with the platform / other applications, and so we wanted them to be easily usable without needing to bring along all of
material
or
material3
MaterialTheme
makes it so that ripples are the default indication, so if you are not using
MaterialTheme
then you should do similar in your own custom theme, if you want to use ripples across your components (you should also set a custom
RippleTheme
to get the correct colors from your design system).
a
@Colton Idle can you try passing the ripple yourself. Modifier.clickable( indication = rememberRipple(color = Color.Black, radius = Dp.Unspecified, bounded = true), interactionSource = rememberInteractionSource(), onClick = {} ) Try changing the ripple color. If this doesn't work then try to set a background to the box.
I am asking to change background color of the box because as @Chris Sinco [G] stated - ripple color sometimes blends with the background.
c
Looks like the answer to my question is: Yes, if you use
.clickable
modifier then you should see a ripple. My problem was that
Copy code
MaterialTheme(darkColors()) {
was being used in my root application, therefore it was drawing a light ripple. If I just wrap my box with
Copy code
MaterialTheme(lightColors()) {
then everything works as expected. Thanks @Louis Pullen-Freilich [G] interesting to hear how that was pulled into a separate artifact.
a
@Colton Idle you can also change LocalRippleTheme composition local, this will work without changing the theme colors