Issue
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:
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.
Solution
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")
}
}
Answered By - Gabriele Mariotti
Answer Checked By - Pedro (JavaFixing Volunteer)