I'm trying to replicate a design that has some sta...

# compose

[Neal Sanche]

I'm trying to replicate a design that has some static background elements, with a bottom navigation bar, and some content pages. Initially a Scaffold within a Scaffold was used for this, where the outer scaffold holds the bottom navigation and a nav host, and the inner scaffolds can have top app bars, and content. To get the static background elements in there, I've put the top level scaffold in a Box, and have the background as a separate composable. This meant the Scaffold's background colour needed to be set to Transparent. But doing so affects the colour of the text painted on it. I thought I'd stop and ask a question instead of going deeper down this rabbit hole. Will put sample code in the thread.

[Louis Pullen-Freilich [G]]

But doing so affects the colour of the text painted on it

Yep, in Material components such as Text and Icon use content color provided by a parent surface (in this case a Scaffold) - see the guide for more information: https://developer.android.com/jetpack/compose/themes#content-color

In this case since the background color is transparent, it should just default to the value for LocalContentColor.current, since transparent isn't a color defined in the theme that has a reasonable content color. So the 'background' you have defined earlier probably isn't providing a correct content color here

[Neal Sanche]

Yeah, that's probably what's going on. I've tried to make a small example of this, but I'm not getting the same results as my actual app, so I'll have to keep looking.

[Neal Sanche]

So far, this seems to be working just fine. And I can't really explain it. Though, seeing how this works, specifically around the corners of the bottom bar clipping the text, I'm going to rethink my layout I guess.

Example.kt

[Neal Sanche]

[Louis Pullen-Freilich [G]]

When you say 'works fine', what do you mean? Nothing seems to be setting content color here at any point, so it just uses the default of Color.Black. If you have a Surface / non-transparent outer Scaffold / etc in your actual app, then that is probably setting a different color for text

[Neal Sanche]

Okay, I see what you mean. I made the outer Scaffold non-transparent, and set up a Box around the navhost, and put the static background content inside the box instead, and now I'm seeing the text colours I'm expecting. I'll modify the sample I posted above to be consistent with that.

[Neal Sanche]

Untitled

[Neal Sanche]

Thanks for helping me understand the content color aspect of this. I notice that the sample I posted just now also has issues with the scrolling behind the bottom bar, but that's not really part of the mystery. 🙂