One Off the Slack: When Do We Clip?

alorma asked:

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

Basically, alorma had a button with rounded corners, but the ripple animation was square, not rounded.

Marco Romano suggested a clip() modifier to match the corner rounding:

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

Ashar Khan suggested moving the clickable() modifier inside the rounded rectangle:

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

Google’s Sean McQuillan offered:

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

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

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
    }
}

Read the original thread in the kotlinlang Slack workspace. Not a member? Join that Slack workspace here!