Android compose Card has a border when semi-transparent colors used

Question

Android Jetpack compose Card draws a border around the card when background color has some transparency. This is how it looks in AS:

But this is how it looks in the app:

If I set background to a solid color it works, but by default backgroundColor is a surface color from material (in my app val white850 = Color(0xD9FFFFFF)) and it looks like on the picture above.

@Composable
fun TraitCard(trait: Trait) {
    Card(
        shape = MaterialTheme.shapes.small,
        modifier = Modifier.size(width = 192.dp, height = 56.dp)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Start
        ) {
            Icon(
                imageVector = Icons.Rounded.ChildFriendly,
                contentDescription = "",
                modifier = Modifier
                    .fillMaxHeight()
                    .background(color = MaterialTheme.colors.background)
                    .aspectRatio(1f)
                    .padding(8.dp),
                tint = MaterialTheme.colors.onBackground
            )
            Text(
                text = trait.name,
                style = MaterialTheme.typography.h3,
                modifier = Modifier.padding(horizontal = 16.dp),
            )
        }
    }
}

Does anyone have a clue why it's happening?

score 7 · Accepted Answer · answered Jun 06 '21 at 16:39

This is because of the elevation that Card has by default (and how shadows are drawn), if you remove the elevation this won't happen.

You can try to convert the semitransparent color to the non transparent one with something like:

backgroundColor = Color(0xD9FFFFFF).compositeOver(Color.White),

Android compose Card has a border when semi-transparent colors used

1 Answers1