Jetpack Compose full screen navigation Dialog without statusbar

Question

in my Android app with Jetpack Compose, I need to implement design, where app:

• does NOT have status bar at all, so it's not even visible and app can draw under it
• does have navigation bar visible

using this theme:

<style name="Theme.Launcher" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="android:windowBackground">@color/background</item>
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
</style>

and this code in MainActivity.kt:

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // This will allows app to draw under OS status bar
        WindowCompat.setDecorFitsSystemWindows(window, false)

        setContent {
            // rest of the compose code
        }
    }
}

On NavGraphBuilder when using:

• composable extension screen, output takes whole empty space, as expected;
• dialog extension with DialogProperties( usePlatformDefaultWidth = false) for screen, there is some vertical margin and screen below is clearly visible.

Using Jetpack Compose BOM 2023.06.01 and androidx.navigation:navigation-compose:2.7.0.

I have also tried to use enableEdgeToEdge() or EdgeToEdgeUtils.applyEdgeToEdge(window, true), but the output is similar.

Same output is on Android SDK 28, 31, emulator and also real device.

Thanks for any idea how to properly setup this, so also the dialog delivers proper visual output as screen.

Answer 1

The easiest way is using Accompanist

val systemUiController = rememberSystemUiController()
systemUiController.isStatusBarVisible = false