https://kotlinlang.org logo
#compose
Title
# compose
t

Tobias Gronbach

03/16/2022, 12:47 PM
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?
f

Filip Wiesner

03/16/2022, 12:51 PM
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?
t

Tobias Gronbach

03/16/2022, 1:00 PM
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.
f

Filip Wiesner

03/16/2022, 1:03 PM
By "_I call SubScreen1_" you mean you navigate to other screen or is the
SubScreen1
part of the
MainScreenComposable
?
t

Tobias Gronbach

03/16/2022, 1:03 PM
it's part of
f

Filip Wiesner

03/16/2022, 1:05 PM
So the hierarchy is like this:
Copy code
MainScreenComposable {
  Surface {
    Text() // Is black
    SubScreen1 {
        Text() // Is White
    }
  }
}
t

Tobias Gronbach

03/16/2022, 1:07 PM
Copy code
MainScreenComposable {
  Surface {
    Text() // Is white
    SubScreen1 {
        Text() // Is black
    }
  }
}
yeah the colors are the other way round, but yeah
f

Filip Wiesner

03/16/2022, 1:10 PM
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
I don't think I can help you more without seeing implementation of
SubScreen1
t

Tobias Gronbach

03/16/2022, 1:14 PM
SubScreen1 Composable looks like this
Copy code
@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
            )

        }
    }
}
f

Filip Wiesner

03/16/2022, 1:17 PM
And these
Text
composables inside the column have different color than
Text
outside of
AdviceCustomQuote
, right?
t

Tobias Gronbach

03/16/2022, 1:17 PM
right
f

Filip Wiesner

03/16/2022, 1:17 PM
That shouldn't be the case 😄
t

Tobias Gronbach

03/16/2022, 1:18 PM
Good to know 🤔😂
f

Filip Wiesner

03/16/2022, 1:19 PM
There must be some thing that sets
LocalContentColor
. Like
Scaffold
or
Surface
or
Card
or anyhting like that above this
AdviceCustomQuote
component
t

Tobias Gronbach

03/16/2022, 1:21 PM
That's MainScreenComposable
Copy code
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 -> {

                            }
                        }
                    }
                }
            }
        }
    }
}
and that's all there is
f

Filip Wiesner

03/16/2022, 1:23 PM
Weird... 🤔 So if we invoke a
Text
composable right above the
when
, it would be white but text inside
AdviceCustomQuote
is black.
t

Tobias Gronbach

03/16/2022, 1:23 PM
exactly
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!
f

Filip Wiesner

03/16/2022, 1:27 PM
Well...instead of Surface you can change the content color using
CompositionLocalProvider
like this
Copy code
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 😕
Oh... 😄
Well, all that matters is that it is working 😄 Glad I could help
t

Tobias Gronbach

03/16/2022, 1:28 PM
So thankfull for your support! Have a great day!
♥️ 1
3 Views