Fix navigation bar overlay in edge-to-edge mode on Android

[stormbeforesunsetbee]

Description

The navigation bar now behaves like the status bar:

• Transparent and overlaid — the WebView expands behind it
• --safe-area-inset-bottom is injected correctly
• Icon color adapts to dark/light theme

What changed:

• Opt the window into edge-to-edge and set the nav bar to transparent
• Read getRootWindowInsets() directly to bypass the consumed inset on API < 30
• Fall back to the navigation_bar_height resource on old ROMs where even that isn't reliable yet
• Inject --safe-area-inset-bottom on all API levels, not just Android 15+
• Re-inject CSS on onPageCommitVisible since evaluateJavascript is a no-op before a page loads
• Call requestApplyInsets on the parent view, not the WebView (that's where the listener lives)
• Use handleOnResume to manage navigation bar appearance on MIUI et al.

Change Type

• Fix
• Feature
• Refactor
• Breaking Change
• Documentation

Rationale / Problems Fixed

Google is enforcing edge-to-edge for all apps. We should support it out of the box — no half measures.

Closes #8416 and #8394 (hopefully).

The nav bar was opaque and the WebView stopped above it. --safe-area-inset-bottom was never injected on older Android because the bottom inset was always 0 (consumed by an intermediate AppCompat view before reaching our listener).

Tests or Reproductions

Tested on Android 8.1 and Android 12.

Platforms Affected

• Android
• iOS
• Web

Notes / Comments

Inspired by #8424 — thanks @theproducer! @MisterNox @luisbytes @theproducer @Marius-Romanus @fabiomartino — would love your help testing this, I might have missed something.

[martinreder]

Thanks for your pull request

I did test your patch on my Android 13 testing device it worked as intended.

See my comment on this issue

#8416 (comment)

[Marius-Romanus]

Hi, I've been testing it on my physical phone, a Xiaomi Mi 8 with API 10, and on a Pixel 9 with API 35 in an emulator. Everything seems to be working fine, except for one odd thing I've noticed: if I put the app in the background and then return, the footer buttons stop being transparent and become a solid color. This might be a problem with my phone.

[stormbeforesunsetbee]

@Marius-Romanus @martinreder Thanks a lot for testing, guys!

@Marius-Romanus I’ve pushed a new commit to this branch. Please give it a try 😉

@martinreder About the status bar issue, the core SystemBars plugin still needs @capacitor/status-bar on Android 14 and below (unfortunately). So make sure it’s installed and use this config:

plugins: {
  SystemBars: {
    insetsHandling: 'css',
  },
  StatusBar: {
    overlaysWebView: true,
  },
}

[martinreder]

@stormbeforesunsetbee You were absolutely right. Reintroducing the status-bar plugin fixed the remaining issues for us. Thanks a lot!

[Marius-Romanus]

37bb5c9
It works perfectly! It even works when I rotate my phone. I'm starting to get excited! 😀🥲❤️
Tested on a physical mobile device and a Pixel 7 emulator with API 34

[denoyellesnathan]

Not sure if this is still being considered but wanted to add I am also experiencing this and confirmed downgrading to an older version of Capacitor 8 resolves it so its definitely a bug worth fixing.

API 37

API 36

[ubrandon]

Tested on our app and it seems to be working on new and old android device emulators. Has anyone tested the safe area with samsung phones? This was an issue at one time but havent confirmed its fixed now.

[denoyellesnathan]

I confirmed it's an issue on Galaxy s26 Ultra but this fixed it on API 36+. Thanks again!!

[Marius-Romanus]

I took the plunge and implemented #37bb5c9 in my production application... There are approximately 1000 active users with the app, and they can report bugs to fix them... but they're users, they never do; they prefer to uninstall the app. 😅🤣

[vorban]

We also took the plunge and copied the code into a custom plugin class in the android project of our app, and it did work out of the box 🚀

We're eager to see this merged and released !
A local plugin will work in the meantime.

[ubrandon]

Any updates on this? This is so important for our app. Thank you!

[theproducer]

Hello @stormbeforesunsetbee! I just tested and looked through this myself, looks good! I have a few questions first:

Transparent and overlaid — the WebView expands behind it

What is the idea behind this? Is this to make all Android versions mimic "true edge to edge"? We may want to put this behind a config setting since some people may not want this.

Fall back to the navigation_bar_height resource on old ROMs where even that isn't reliable yet

Looks like that is tripping up the linters. What old versions did you have in mind for where that fallback would be useful?

[Marius-Romanus]

From a place of ignorance, what is the difference between this PR and the current version of Capacitor? Both options seem to work fine for me.