I have a question regarding surface. When I wrap a...

# compose

[Tobias Gronbach]

I have a question regarding surface. When I wrap a parent-composable in a surface it applies my theme standard values (like color e.g.). But when I place a child-composable inside parent composable those values are not adopted in the child. I also need to wrap the child in surface. Is this expected behaviour or how should I deal with it?

[Filip Wiesner]

Could you elaborate on what is the behavior you want? I don't really understand the question from your description 😅
Are you asking how to make a custom component that changes the default content color for it's children like Surface does?

[Tobias Gronbach]

Of course, thanks for asking, I try my best to explain . I have a MainScreenComposable. It's content is wrappen in a Surface {} and it applies it's color values to the Composables inside of it like Text() . Now the Text-Color is white (without surface black). Inside of MainScreenComposable I call SubScreen1 - Composable. I'd want that it also changes it's components TextColor to white but they remain black unless I wrap SubScreen1 also in Surface {} . I wondered if there's the possibility that SubScreen1 automatically inherits those values from the calling Composable (in this case the MainScreenComposable. I hope I could clarify my issue.

[Filip Wiesner]

By "_I call SubScreen1_" you mean you navigate to other screen or is the SubScreen1 part of the MainScreenComposable?

[Tobias Gronbach]

it's part of

[Filip Wiesner]

So the hierarchy is like this:

MainScreenComposable {
  Surface {
    Text() // Is black
    SubScreen1 {
        Text() // Is White
    }
  }
}

[Tobias Gronbach]

MainScreenComposable {
  Surface {
    Text() // Is white
    SubScreen1 {
        Text() // Is black
    }
  }
}

yeah the colors are the other way round, but yeah

[Filip Wiesner]

That's weird. That shouldn't be the case. Look into implementation of SubScreen1 if it set's content color of some material component or if it sets LocalContentColor composition local.
To explain, LocalContentColor is used for the behavior you described. It informs the children of the component that sets it that the current content color is white or black or whatever. The Text composable than uses this information to color itself

[Filip Wiesner]

I don't think I can help you more without seeing implementation of SubScreen1

[Tobias Gronbach]

SubScreen1 Composable looks like this

@Composable
fun AdviceCustomQuote(bait: AdviceBait) {

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Image(
            modifier = Modifier.fillMaxSize(),
            imageVector = ImageVector.vectorResource(R.drawable.ic_quote_background),
            contentDescription = stringResource(R.string.cd_background_image)
        )
        Column {
            Text(
                modifier = Modifier.fillMaxWidth().padding(30.dp, 0.dp, 24.dp, 30.dp),
                text = bait.content,
                fontSize = 40.sp,
                fontFamily = DancingScriptFont,
                textAlign = TextAlign.Center
            )
            Text(
                modifier = Modifier.fillMaxWidth().padding(30.dp, 0.dp, 24.dp, 0.dp),
                text = bait.author,
                textAlign = TextAlign.Center
            )

        }
    }
}

[Filip Wiesner]

And these Text composables inside the column have different color than Text outside of AdviceCustomQuote, right?

[Tobias Gronbach]

right

[Filip Wiesner]

That shouldn't be the case 😄

[Tobias Gronbach]

Good to know 🤔😂

[Filip Wiesner]

There must be some thing that sets LocalContentColor. Like Scaffold or Surface or Card or anyhting like that above this AdviceCustomQuote component

[Tobias Gronbach]

That's MainScreenComposable

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
        return ComposeView(requireContext()).apply {
            setContent {

                val adviceBait = viewModel.adviceBait

                AppTheme(theme = Theme.Standard) {
                    Surface(
                        color = colorResource(viewModel.adviceBait?.adviceType?.colorRes()
                            ?: R.color.theme1_background_white1).copy(alpha = 0.7f)
                    ) {


                        when (viewModel.adviceBait?.adviceType) {
                            AdviceType.Quote -> {
                                adviceBait?.let {
                                    AdviceCustomQuote(bait = it)
                                }
                            }
                       
                            else -> {

                            }
                        }
                    }
                }
            }
        }
    }
}

[Tobias Gronbach]

and that's all there is

[Filip Wiesner]

Weird... 🤔 So if we invoke a Text composable right above the when , it would be white but text inside AdviceCustomQuote is black.

[Tobias Gronbach]

exactly

[Tobias Gronbach]

Filip, it's working now. I don't know why. I must have made a mistake earlier. I'm so sorry for wasting your time! I really appreciate your time and help!

[Filip Wiesner]

Well...instead of Surface you can change the content color using CompositionLocalProvider like this

val color = colorResource(viewModel.adviceBait?.adviceType?.colorRes()
    ?: R.color.theme1_background_white1).copy(alpha = 0.7f)

CompositionLocalProvider(LocalContentColor provides color) {
 // AdviceCustomQuote content
}

But this seems really strange 😕

[Filip Wiesner]

Oh... 😄

[Filip Wiesner]

Well, all that matters is that it is working 😄 Glad I could help

[Tobias Gronbach]

So thankfull for your support! Have a great day!