capacitor: bug: Navigation bar overlaps app screen

+1 facing the issue with Android 13 devices.

I also have this issue on Android 13 but using cordova

Please, do just upvote the main issue instead of writing “non helpful text” so that the ionic team can better see if this have to be prioritised

Thx a lot ❤️

1. Delete this code block if you have it: getWindow().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
2. Use this: if (this.platformService.isAndroid()) { StatusBar.setOverlaysWebView({overlay: true}) }

And u need write it in style.xml, it is mandatory here to assign a color to android:statusBarColor:

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> <item name="android:statusBarColor">#00000000</item> </style>

These steps work for me and solved this bug, now the status bar is transparent and works as it should.

It is photo: https://github.com/ionic-team/capacitor/assets/64776696/8eb3a7e3-19b5-426d-b275-270b7d247544

I created a plugin for android fullscreen mode: https://github.com/digaus/community-capacitor-fullscreen

Just install and add this somewhere:

           Fullscreen.addListener('insetsChanged', (insets: { top: number, bottom: number, left: number, right: number }) => {
                const style = document.documentElement.style;
                style.setProperty('--ion-safe-area-top', `${insets.top}px`);
                style.setProperty('--ion-safe-area-bottom', `${insets.bottom}px`);
                style.setProperty('--ion-safe-area-left', `${insets.left}px`);
                style.setProperty('--ion-safe-area-right', `${insets.right}px`);
                window.dispatchEvent(new Event('resize'));
            }).catch(() => null);
            StatusBar.setOverlaysWebView({ overlay: true });

I’ve encountered the problem and solved the issue; My expected setup is

1. statusBar transparent
2. statusBar dark content (light mode)
3. webView renders behind statusBar
4. navBar transparent
5. navBar dark content (light mode)
6. webView renders behind navBar (we failed to achieve this and gave up in Capacitor 4)

What happened was

1. on Capacitor 4, I couldn’t get webView to render behind navBar, regardless of android version.
2. After our team bumped up to Capacitor 5, on android 13 specifically, we faced an issue in which the setup code had no effect on plugin load time (current issue’s problem). android 12 and behaved the same.
3. When we changed the entire setup code’s to execute 200ms(arbitrarily chosen) after webView load, the setup had full effect! (current issue’s solution, thanks to @de-robat )
4. Interestingly, the previous issue of not being able to get webView render behind navBar was solved in Capacitor 5 + android 13. The issue persists in android 12 & below, even with Capacitor 5.

Following snippet is my android setup function and is almost same with the ones in @capacitor/status-bar

    private void setStatusBarAndNavBar() {
        var activity = this.bridge.getActivity();
        Window window = activity.getWindow();
        View decorView = window.getDecorView();
        WindowInsetsControllerCompat windowInsetsControllerCompat = WindowCompat.getInsetsController(window, decorView);

        // 1. statusBar content color dark (light mode)
        windowInsetsControllerCompat.setAppearanceLightStatusBars(true);
        // 2. navBar content color dark (light mode)
        windowInsetsControllerCompat.setAppearanceLightNavigationBars(true);
        // 3. statusBar background color transparent
        window.setStatusBarColor(Color.TRANSPARENT);
        // 4. navBar background color transparent
        window.setNavigationBarColor(Color.TRANSPARENT);

        // 5. set render behind statusBar / navBar
        // This had no effect on navBar on <android 12 and below + Capacitor 4>, but
        // webview successfully rendered behind on navBar on <android 13 + Capacitor 5>
        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        int uiOptions = decorView.getSystemUiVisibility();
        uiOptions = uiOptions | View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN;
        decorView.setSystemUiVisibility(uiOptions);
    }