I have put MainScreen inside S1FoundationTheme, but the layout editor shows MaterialTheme in the sa...

# compose

[Mehdi Haghgoo]

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.

[Albert Chang]

You are calling MaterialTheme in S1FoundationTheme right? In that case MaterialTheme is the child of S1FoundationTheme.

[Mehdi Haghgoo]

I use some MaterialTheme attributes for text yeah, but still I cannot understand how it is the child of S1FoundationTheme.

[Chris Sinco [G]]

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

[Mehdi Haghgoo]

The S1FoundationTheme code is the default theme generated by Android Studio.

I use it like this:

setContent {
    S1FoundationTheme {
        MainScreen()
    }
}

[Chris Sinco [G]]

I see. If you go to the implementation of S1FoundationTheme you’ll see it’s using MaterialTheme

[Chris Sinco [G]]

should be in ui/theme/Theme.kt since it’s generated from Android Studio

[Mehdi Haghgoo]

Yes, it's interesting. MaterialTheme is used inside my app theme.

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

[Chris Sinco [G]]

Yes, that is one recommended approach on customizing your theme in your app. What makes it interesting to you?

[Mehdi Haghgoo]

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.

[Chris Sinco [G]]

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

[Chris Sinco [G]]

Works for Views (XML) as well if you haven’t tried it for those projects

[Mehdi Haghgoo]

Great, even for the libraries of the framework?

[Chris Sinco [G]]

Yep, if you uncheck “Filter System-Defined Layers” you will see a lot more nodes in the tree

[Chris Sinco [G]]

It’s filtered by default since it can make the tree more noisy and less focused on your code. But still informative!

[Mehdi Haghgoo]

Yes, it's very informative.