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

Mehdi Haghgoo

02/08/2022, 3:41 PM
I have put MainScreen inside S1FoundationTheme, but the layout editor shows MaterialTheme in the same level as MainScreen. What does this mean? Certainly, MaterialTheme is not a child of S1FoundationTheme, rather maybe the reverse.
a

Albert Chang

02/08/2022, 4:32 PM
You are calling
MaterialTheme
in
S1FoundationTheme
right? In that case
MaterialTheme
is the child of
S1FoundationTheme
.
m

Mehdi Haghgoo

02/08/2022, 4:46 PM
I use some MaterialTheme attributes for text yeah, but still I cannot understand how it is the child of S1FoundationTheme.
c

Chris Sinco [G]

02/08/2022, 5:08 PM
What does your
S1FoundationTheme
code look like? I’m guessing it’s wrapping
MaterialTheme
which is why it shows up like this in the Layout Inspector hierarchy
m

Mehdi Haghgoo

02/08/2022, 5:10 PM
The S1FoundationTheme code is the default theme generated by Android Studio. I use it like this:
Copy code
setContent {
    S1FoundationTheme {
        MainScreen()
    }
}
c

Chris Sinco [G]

02/08/2022, 5:13 PM
I see. If you go to the implementation of S1FoundationTheme you’ll see it’s using MaterialTheme
should be in
ui/theme/Theme.kt
since it’s generated from Android Studio
m

Mehdi Haghgoo

02/08/2022, 5:16 PM
Yes, it's interesting. MaterialTheme is used inside my app theme.
Copy code
@Composable
fun S1FoundationTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}
c

Chris Sinco [G]

02/08/2022, 5:22 PM
Yes, that is one recommended approach on customizing your theme in your app. What makes it interesting to you?
m

Mehdi Haghgoo

02/08/2022, 5:23 PM
The layout inspector part makes it interesting. So, basically the inspector displays any components (composables) used inside another. I had not used it before. It's really a fascinating tool.
c

Chris Sinco [G]

02/08/2022, 5:25 PM
Yes! It’s a great way to learn about how the layering in Compose is working both for the code you are writing, and those from libraries/framework
❤️ 1
Works for Views (XML) as well if you haven’t tried it for those projects
m

Mehdi Haghgoo

02/08/2022, 5:26 PM
Great, even for the libraries of the framework?
c

Chris Sinco [G]

02/08/2022, 5:31 PM
Yep, if you uncheck “Filter System-Defined Layers” you will see a lot more nodes in the tree
It’s filtered by default since it can make the tree more noisy and less focused on your code. But still informative!
❤️ 1
m

Mehdi Haghgoo

02/08/2022, 5:37 PM
Yes, it's very informative.
2 Views