What is the todays correct way to get edge to edge...

# compose

[Joel Denke]

What is the todays correct way to get edge to edge layout draw behind status bar in Android and the whatever thing in iOS in CMP?
Do I need to tweak this from the native, which is SwiftUi in iOS viewcontroller something and Activity in Android?

[Mofe Ejegi]

Android in the MainActivity:

WindowCompat.setDecorFitsSystemWindows(window, false)

iOS in ContentView.swift:

ComposeView().ignoresSafeArea(.all)

This lets you draw from edge-to-edge on both platforms.
Then you can use Compose's systemBarsPadding() if you want to still respect the paddings

[Mofe Ejegi]

And to answer your question, yes, you need to tweak it, though it's not much of a tweak since both files already exist.

[Joel Denke]

Thanks, so no compose solution exists to control this? I need to adjust those manually. How do I do this per screen? Having only one Activity and do all navigation in compose.

[Mofe Ejegi]

So I believe you want a particular screen to be drawn from edge to edge, but not all the screens, is that correct?
In such a situation, I can think of two approaches.

The first, which I recommend is to use the two code snippets I suggested above, then for most of your screens, they should have the systemBarsPadding() modifier applied to the content to avoid the edge to edge drawing. You can also apply _statusBarsPadding_() or _navigationBarsPadding_() independently if you want. On the screen you want to draw from edge to edge, don't apply this padding modifier. Take a look at this my slack post on the #compose channel. You can see that the background is drawn from edge to edge but the logo uses the system padding.

The second approach, which I believe could work in theory is to create an expect/actual function that uses a SideEffect to dynamically update the edge to edge drawing requirements for the MainActivity and the Root SwiftUI ComposeView. I'm not sure if this would work, and personally, it's not worth the hassle for me.

[Joel Denke]

Right silly me, can ofc elaborate with system and navbar paddings, thanks! Should probably be possible do it generic in my navigation setup.
Would be nice if CMP had like LocalplatformWindow to control this.

[Mofe Ejegi]

Sure! So assuming you set up your MainActivity and your Root SwiftUI content view like I suggested earlier, then in your composable screens, they would all be drawn edge to edge.
If you want a particular screen to respect the edges, you can simply define it this way:

@Composable
fun MyScreen(
    viewState: MyViewState,
    eventProcessor: (MyViewEvent) -> Unit,
) {
    Box(modifier = Modifier.fillMaxSize().systemBarsPadding().imePadding()) {
        // Your content here...
    }
}

I added imePadding() in case you've got a text field in there.

[Mofe Ejegi]

If you want the screen to draw from edge to edge, then just remove the systemBarsPadding().
Compose MP is cool, it respects the different values of system paddings based on the platform.

[Joel Denke]

Apparently there is new APIs I have missed in Android, can use:

WindowCompat.setDecorFitsSystemWindows(window, false)
        enableEdgeToEdge(SystemBarStyle.auto(Color.TRANSPARENT, Color.TRANSPARENT))
        super.onCreate(savedInstanceState)
        setContent {
            ....
        }

Now just need to learn how to make all Material 3 components like topbar understand these system bar paddings 😄

[Stylianos Gakis]

enableEdgeToEdge calls WindowCompat.setDecorFitsSystemWindows(window, false) internally too, so you can avoid calling that alltogether

[Joel Denke]

Oh ok, yeah it seems like Ive been missing some new APIs happening in androidx window/activity introduced over time. I was expected that always had to use Accompanist or doing this myself, but this is very nice.
Also discovered can switch dark vs light icon colors myself, if I want auto or not from user. Like in cases I have an image in the header.
But I must say the inset APIs in Material 3 is very very confusing, from case to case. Depending which combination I have, need to apply different calculations with inset + my own padding and such.
Impossible to get the top bar adjustments comply with edge to edge when used inside Scaffold.
Really wished the APIs was a lot more simple. Like Modifier.insets(paddingValues + statusbarPadding) or such, where really make sense Material components not having inconsistent default insets being different for like TopBar vs Scaffold, when combine with my custom components 😄
Anyway a lot more simple today compared like 1 year ago, so thats nice.