Ripple with rounded corners Jetpack Compose

Question

In this answer I got wrong ripple animation. Do you know how to create ripple with rounded corners using Jetpack Compose?

With default ripple I have this:
Ripple

Code:

Card(shape = RoundedCornerShape(30.dp),
        border = BorderStroke(width = 2.dp, color = buttonColor(LocalContext.current)),
        backgroundColor = backColor(LocalContext.current),
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp)
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = rememberRipple(radius = 30.dp)
            ) { show = !show }
    ) { ... } //Show is animation of other element.

//If I put radius of ripple 200 dp(it's a height of card) ripple works not normal.

user_2016562 · Answer

Starting with 1.0.0-beta08 you can solve this issue using the onClick parameter in the Card instead of the clickable modifier:

Card(shape = RoundedCornerShape(30.dp),
    modifier = Modifier
        .fillMaxWidth()
        .padding(10.dp),
    onClick = { show = !show }
)

Until 1.0.0-beta07 applying a .clickable modifier to the Card the ripples aren't clipped by the bounds of the layout.

As workaround you can apply the .clickable modifier to the content of the Card (for example a Box):

    Card(
        shape = RoundedCornerShape(30.dp),
        border = BorderStroke(width = 2.dp, color = Color.Blue),
        backgroundColor = Color.White,
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp)

    ) {
        Box(Modifier
              .clickable(
                  onClick = { /* ...*/ }
              )
        ){
            Text("Text")
        }
    }

user_2762452 · Answer

I've so far identified 2 options:

In addition to setting the shape, use .clip modifier to clip the Card using the same shape:

Card(
    shape = RoundedCornerShape(30.dp),
    modifier = Modifier
        .clip(RoundedCornerShape(30.dp))
        .clickable {
                //do something
        }
) {
    Box {
        Text("Text")
    }
}

The downside of this approach is that the elevation shadow gets clips as well, so your Card loses it's shadow.

Set the .clickable on the Card content composable:

 Card(
    shape = RoundedCornerShape(30.dp)
) {
    Box(
        modifier = Modifier.clickable {
                //do something
        }
    ) {
        Text("Text")
    }
}

user_16411959 · Answer

Hope this will grant you the easiest solution

Just add .clip(RoundedCornerShape(30.dp)) in the modifier parameter

Here is the full code :

Card(modifier = Modifier
    .padding(30.dp)
    .size(100.dp)
    .clip(RoundedCornerShape(30.dp))
    .clickable {
        // After click //
    }) { }

user_6689352 · Answer

When you use long press or other gesture,you can use modifier.indication

val interactionSource = remember { MutableInteractionSource() }

Card(
    modifier = Modifier
      .padding(12.dp, 6.dp)
      .fillMaxWidth()
      .clip(RoundedCornerShape(12.dp))
      .indication(interactionSource, LocalIndication.current)
      .pointerInput(Unit) {
        detectTapGestures(
          onPress = { offset ->
            val press = PressInteraction.Press(offset)
            interactionSource.emit(press)
            tryAwaitRelease()
            interactionSource.emit(PressInteraction.Release(press))
          },
          onLongPress = {},
          onTap = {}
        )
      }
  )

Ripple with rounded corners Jetpack Compose

4 Answers