I found app background mix up when turning to dark theme as kotlinlang #compose

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

01/12/2022, 8:04 PM

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

01/12/2022, 8:05 PM

Thanks, let me first try Layout Inspector 🙂

👍 1

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)
                )
            }
        }
    }
}

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

01/12/2022, 8:23 PM

Start by replacing each occurrence of

background(MaterialTheme.colors.surface)

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.

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

👍 1

Chris Sinco [G]

01/12/2022, 8:43 PM

+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.

👍 3

3 Views

#compose Join Slack