Ripple with rounded corners Jetpack Compose

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.

Answers 1

  • With 1.0.0-beta03 it seems that 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")
            }
        }
    

Related Articles