Any idea why my card shadows are clipped off? I seem to not do anything special (code in the thread)

# compose

[Florian]

Any idea why my card shadows are clipped off? I seem to not do anything special (code in the thread)

[Florian]

@Composable
private fun TaskItem(
   [...]
) {
    Card(
        shape = RoundedCornerShape(Dimens.DefaultCardRoundedCornerSize),
        elevation = Dimens.DefaultCardElevation,
        modifier = modifier
            .fillMaxWidth()
            .padding(top = 12.dp)
            .animateContentSize(),
        onClick = { onTaskClicked(task) }
    ) {
        Column {
        [...]
    }

[Florian]

if I remove animateContentSize the shadows appear but only on the bottom, not on the sides

[Stylianos Gakis]

If you look inside the animateContentSize implementation you will see that it puts a clip modifier to the contents by itself and it’s not configurable for reasons explained by Doris Liu here:
https://kotlinlang.slack.com/archives/CJLTWPH7S/p1638385104410200?thread_ts=1638375155.392500&cid=CJLTWPH7S
I had the exact same problem and I fixed it simply by doing what she said, put that modifier on the only child of the card, and put all my composables inside that child instead. I just did it with a plain Box but anything should work, you can put it on your Column I guess since I see you have it there already.

[Florian]

Thank you, this actually solved severarl other problems I had as well 😁

[Florian]

the animation looked weird when I had the modifier on the card and scrolling also had some weird effects

[Florian]

now it's perfect

[Stylianos Gakis]

I am happy to hear that!

[Florian]

I don't have shadows on the start/end but I'm not sure if there are supposed to be any 🤔

[Stylianos Gakis]

When in doubt, add an elevation of 20.dp and you’ll know if it’s there or not 😅

[Florian]

good idea

[Florian]

ill double check my layout

[Florian]

thank you again

[Florian]

ok now it works, I had a clip and a padding in the wrong order