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