What is the current way to add a click to a card... that clips the ripple into the card shape?

# compose

[alorma]

What is the current way to add a click to a card... that clips the ripple into the card shape?

[alorma]

Grabación de pantalla 2021-03-24 a las 18.31.11.mov

[julioromano]

Check you modifier order. You should apply clickable after padding to clip the ripple.

[alorma]

modifier = Modifier
                    .padding(8.dp)
                    .clickable { }
                    .size(100.dp),

[alorma]

this is my current config

[julioromano]

Ah I see, you’re talking about the “not rounded” edges of the ripple square ?

[alorma]

oh, sorry

[alorma]

yes

[julioromano]

Perhaps applying a .clip() modifier too might help

[julioromano]

modifier = Modifier
                .clip(RoundedCornerShape(4.dp)),

[julioromano]

with whatever dp is your corner radius

[julioromano]

Check the order too in this case, IMHO the clip should happen before the clickable

[alorma]

oh, yes it seems to work

[alorma]

thanks

[Se7eN]

Would be better to move the clickable inside the card so you don't have to clip it

Card {
    Box(modifier = Modifier.clickable())
}

[Sean McQuillan [G]]

Adding a bit more context, if you want to extend this to arbitrary shapes / clips you can move the indicator inside the surface like Button does

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]oidx/compose/material/Button.kt;l=124?q=Button.kt&ss=androidx

An example of usage with a triangle shape:

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]ape%20button%22&ss=androidx%2Fplatform%2Fframeworks%2Fsupport

This is more relevant to a reusable composable, and clip is fine if you're comfortable doing a specific design.

Just adding another solution that's more general purpose here for readers who found this chat in search :).

cc @Alexandre Elias [G]

[Sean McQuillan [G]]

The way to think about this is that .clickable() "wraps" the composable it's passed to, so passing it to surface is effectively:

Clickable { // indicator here
   Surface { // clipping here
   }
}

Inverting that makes it work as expected:

Surface { // clipping here
    Clickable { // indicator here
    }
}

[alorma]

Understandable! Thanks!

[Uli Bubenheimer]

@Sean McQuillan [G] What if I want selectable() instead of clickable()? The seemingly general-purpose approach that you are suggesting does not seem to apply in this case.

If I already know that I want clickable() I can handle it with a separate parameter anyway and force it to the end of the Modifiers chain, so I wouldn't really need to go generic with Surface(). The more interesting case is handling more arbitrary clickable/selectable modifiers, and it does not work for that.