After the Compose Material3 1.3.0 ripple API change the ripple effect looks a bit weird on an expanding clickable card, but it doesn't look like it will be fixed soon:
var expanded by remember { mutableStateOf(false) }
val height by animateDpAsState(targetValue = if (expanded) 500.dp else 100.dp)
Card(onClick = { expanded = !expanded }) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(height)
)
}
Is there a workaround for this other than to disable the ripple completely?
One way to achieve a ripple effect similar to the deprecated API is by using the clickable
modifier and setting the ripple
radius to fill the parent size.
var expanded by remember { mutableStateOf(false) }
val height by animateDpAsState(targetValue = if (expanded) 500.dp else 100.dp)
Card(
modifier = Modifier.clickable(
indication = ripple(radius = 350.dp, color = Color.Blue),
interactionSource = remember { MutableInteractionSource() },
onClick = { expanded = !expanded },
),
) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(height)
)
}
Note: Blue color has been added for better visibility. Feel free to ignore it.