androidandroid-jetpack-composeandroid-compose-card

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

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

enter image description here

But this is how it looks in the app:

enter image description here

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?

Solution

  • 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),