How to draw behind the system status bar in a Jetpack Compose Dialog

Question

I disabled fitSystemWindows via WindowCompat.setDecorFitsSystemWindows(window, false) to draw behind the status bar and I am using the insets accompanist library to get the respective insets for adding padding to specific composables.

However, if I show a fullscreen dialog, the dialog still has padding to the system- and navigation bar and refuses to draw behind the status bar.

The Dialog looks like the following snippet:

Dialog(
    onDimissRequest = {},
    properties = DialogProperties(usePlatformDefaultWidth = false)
) {
    // ...
}

Is there any additional setting required in order to also let the dialog draw behind the system's status bar?

Boney

What are you looking for exactly? You are displaying dialog and the status bar and navigation bars should appear on the top of the dialog? – Geognosy

Yes, or to be more specific: The dialog should be drawn below the status bar and the status bar itself should be transparent. That means the dialog takes the space of the whole screen and the Status bar is just on top of it. – Boney

I don't think it is possible because the dialog is supposed to be on the top all the components. – Geognosy

It's indeed possible with a legacy DialogFragment. I was hoping that Jetpack Compose would also offer a way to achieve that behavior. – Boney

Then why do you specifically want dialog? why not a full screen navigation screen or a new activity with the transparent status bar? – Geognosy

Because the screen is just used as an overlay and shows some information. It's just a single screen and totally fine to be a Dialog. Both of your mentioned solutions are too much overhead in my specific usecase. – Boney

We have the same use case. Dialog is also broken in previews, not showing as full screen with usePlatformDefaultWidth = false so there seems to be some bugs with this. – Cognition

Here is the material design info on full screen dialogs, maybe that can give more validity to the use case: m3.material.io/components/dialogs/… (see the section on full screen dialogs) – Cognition

And here is a google issue tracker link: issuetracker.google.com/issues/211144843 Not much activity it seems – Cognition

Answer 1

Maybe ModalDrawerLayout can help ?

ModalDrawerLayout(
    drawerContent = {
        // smth, idk
    },
    bodyContent = {
        Dialog(
            onDismissRequest = {},
            properties = DialogProperties(usePlatformDefaultWidth = false)
        ) {
            // Dialog content here
        }
    }
)

Anzio

this seems to be working but it shows content behind the other composables. But dialog shows content on the top of every composables. You can use box instead of ModalDrawerLayout in that purpose. – Chemise