I’m having trouble with Ripples on Alpha 11, with ...

# compose

[Jordi Saumell]

I’m having trouble with Ripples on Alpha 11, with clickable no longer having an indication 😅 I read we are supposed to use the AmbientRippleTheme but I do not know how (thread)

[Jordi Saumell]

My code, basically I have several buttons and only 1 is selected. The clicked one will get selected and change color:

if (index == selectedPosition) {
    Text(
        text = element,
        modifier = Modifier
            .align(Alignment.CenterVertically)
            .background(Color(0xFFDDDDDD))
            .border(1.dp, Color.Gray)
            .clickable(onClick = { onClick(index) }/*FIXME , indication = null*/)
            .padding(horizontal = 16.dp, vertical = 8.dp)
    )
} else {
    Text(
        text = element,
        modifier = Modifier
            .align(Alignment.CenterVertically)
            .clickable(onClick = { onClick(index) }/*FIXME , indication = null*/)
            .padding(horizontal = 16.dp)
    )
}

[romainguy]

@Adam Powell Isn’t this why we postponed alpha11? 😅

[Jordi Saumell]

before alpha 11 I just set the indication to null. And I do not know how to do that now?

[Jordi Saumell]

and as a bonus… I was setting it to null to deal later with fixing it, as it didn’t behave as I would like (and still doesn’t):
the element that I click and gets highlighted color does not get a ripple. And the element that has not been clicked and becomes unselected does get a ripple

[Adam Powell]

@matvei for when it's closer to working hours

[Adam Powell]

the reason we postponed was more about the actual click events not firing

[grandstaish]

The other clickable overload requires you pass both an indication and an interactionState

Also it sounds like you’re just missing providing the ripple indication in your theme: e.g.: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]/kotlin/androidx/compose/material/MaterialTheme.kt;l=70;bpv=0

[matvei]

Yup, what Bradley said. We changed clickable a bit so you have two versions: one with defaults for indication and interactionState, the other with both required. It's slightly unfortunate to require both sometimes, but we have found that if you need one -- chances are high you need to other one to deliver the best UX possible. If you want to set indication to null, then you want to pass down interactionState to this click to you could read interactionState.contains(Pressed) later on reflect somewhere on UI that user is pressing.

[matvei]

I wonder as to why AS wasn't able to give you a reasonable help there...

[Jordi Saumell]

The problem I had was that with only one parameter AS showed it in red as non existing. And when I opened clickable to see the code changes I read in diagonal and saw deprecated on the version that accepts both parameters. It was just a warning suppression but I misread it 😅
But yes, until I had introduced both parameters AS was not suggesting anything and was simply setting the old one in red.