I found app background mix up when turning to dark theme as below, we can see Text background layers...

# compose

[Bojie Jiang]

I found app background mix up when turning to dark theme as below, we can see Text background layers overlapping. Is there an easy to debug this issue? Thanks!

[Colton Idle]

I'm not really sure what I'm looking at, but you can post some code or I think you can use Layout Inspector tool in Android Studio.

[Bojie Jiang]

Thanks, let me first try Layout Inspector 🙂

[Bojie Jiang]

Here is the code

@Composable
fun RowFlowerCard(rowFlower: RowFlower) {
    Card(
        Modifier
            .height(136.dp)
            .width(130.dp)
            .background(MaterialTheme.colors.surface),
        shape = MaterialTheme.shapes.small,
        elevation = 4.dp
    ) {

        Column(
            Modifier
                .fillMaxSize()
                .background(MaterialTheme.colors.surface)
        ) {
            Image(
                painter = painterResource(id = rowFlower.image),
                contentDescription = rowFlower.title,
                Modifier
                    .height(100.dp),
                contentScale = ContentScale.Crop
            )
            Spacer(modifier = Modifier.height(8.dp))
            Row(
                Modifier
                    .fillMaxWidth()
                    .background(MaterialTheme.colors.surface)) {
                Spacer(modifier = Modifier.width(16.dp))
                Text(
                    text = rowFlower.title,
                    style = MaterialTheme.typography.h2,
                    color = MaterialTheme.colors.onPrimary,
                    modifier = Modifier.height(36.dp)
                )
            }
        }
    }
}

[Bojie Jiang]

[Bojie Jiang]

Actually, I commit it: https://github.com/jbj88817/Bloom-compose/blob/main/app/src/main/java/us/bojie/bloom_compose/ui/MainPage.kt#L148-L186

[Kirill Grouchnikov]

Start by replacing each occurrence of background(MaterialTheme.colors.surface) by background with a different translucent primary color (like 50% red, 50% blue etc) and see if the boundaries of those elements are what you intend them to be.

[Kirill Grouchnikov]

You have three elements nested in each other with the same background color, but maybe something up top applies an alpha.

[Chris Sinco [G]]

+1 - the issues you are seeing are likely tied to the transparency of the colors used in the background fills, combined with revealing the elevation/shadow of the card.