Compose Card shadow behavior when inside a column

18 views Asked by At

The shadow of my card is behaving irregular based on the properties of the column it is wrapped in.

When I set verticalArrangement = Arrangement.Bottom, I get a nice, distinct shadow under the card.

But if no arrangement is set at all the shadow is just a barely visible outline. Why is this?

The project is using androidx.compose.material:material:1.8.0

@Preview(showBackground = true)
@Composable
fun TestCardPreview() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Bottom
    ) {
        TestCard()
    }
}

@Composable
fun TestCard() {
    Card(
        Modifier.padding(30.dp)
    ) {
        Text(
            modifier = Modifier.fillMaxWidth().padding(50.dp),
            text = "CardTest"
        )
    }
}

with verticalArrangement = Arrangement.Bottom, shadow showing

@Preview(showBackground = true)
@Composable
fun TestCardPreview() {
    Column(
        modifier = Modifier.fillMaxSize(),
    ) {
        TestCard()
    }
}

@Composable
fun TestCard() {
    Card(
        Modifier.padding(30.dp)
    ) {
        Text(
            modifier = Modifier.fillMaxWidth().padding(50.dp),
            text = "CardTest"
        )
    }
}

With no verticalArrangement set, missing bottom shadow

0

There are 0 answers