Skip to content

fix(android-edge-to-edge-support): opt into edge-to-edge on all API levels#840

Draft
robingenz wants to merge 1 commit into
mainfrom
fix/issue-838-option-a
Draft

fix(android-edge-to-edge-support): opt into edge-to-edge on all API levels#840
robingenz wants to merge 1 commit into
mainfrom
fix/issue-838-option-a

Conversation

@robingenz

Copy link
Copy Markdown
Member

Summary

Calls WindowCompat.setDecorFitsSystemWindows(window, false) in EdgeToEdge.enable(). This is the one-line alternative to #839 (Option B: hybrid overlay + Window.setStatusBarColor fallback).

This opens a comparison PR against #839 — pick one.

Why

On API <35 with the default decorFitsSystemWindows = true, the DecorView auto-consumes system bar insets as padding before they reach the plugin's WebView listener. The overlay positions silently depended on another plugin (@capacitor/keyboard ≤ 8.0.1) keeping a no-op setOnApplyWindowInsetsListener on the root view, which happened to disable the auto-consumption.

@capacitor/keyboard 8.0.2+ changed that listener's behavior and 8.0.3 moved it to a different view, breaking the implicit contract:

  • 8.0.2: overlay rendered ABOVE the nav bar (root view padded by the keyboard plugin's ViewCompat.onApplyWindowInsets call).
  • 8.0.3: overlay has height 0 (DecorView resumes auto-consuming insets).

Calling setDecorFitsSystemWindows(false) is the official platform opt-in for edge-to-edge layout and tells the window we handle all insets ourselves. On Android 15+ the platform already does this; on older APIs this is a no-op to app code that was already correctly sized via the plugin's explicit margin logic.

Trade-offs vs #839

Test plan

  • API 31 emulator, @capacitor/keyboard@8.0.3setNavigationBarColor and setStatusBarColor work.
  • API 31 emulator, @capacitor/keyboard@8.0.1 — no regression.
  • API 31 with no color configured — confirm theme bars look acceptable (or are visibly transparent — pick the expected behavior).
  • API 35 without opt-out — overlay approach still works.
  • API 35 with windowOptOutEdgeToEdgeEnforcement=true — still works after explicit opt-in.
  • API 36 — overlay approach used.
  • Keyboard show/hide on each — webview layout correct, no double-counted bottom inset.

Close #838

@pkg-pr-new

pkg-pr-new Bot commented Apr 22, 2026

Copy link
Copy Markdown

Open in StackBlitz

@capawesome/capacitor-age-signals

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-age-signals@840

@capawesome-team/capacitor-android-battery-optimization

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome-team/capacitor-android-battery-optimization@840

@capawesome/capacitor-android-dark-mode-support

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-android-dark-mode-support@840

@capawesome/capacitor-android-edge-to-edge-support

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-android-edge-to-edge-support@840

@capawesome-team/capacitor-android-foreground-service

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome-team/capacitor-android-foreground-service@840

@capawesome/capacitor-app-review

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-app-review@840

@capawesome/capacitor-app-shortcuts

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-app-shortcuts@840

@capawesome/capacitor-app-update

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-app-update@840

@capawesome/capacitor-apple-sign-in

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-apple-sign-in@840

@capawesome/capacitor-asset-manager

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-asset-manager@840

@capawesome/capacitor-background-task

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-background-task@840

@capawesome/capacitor-badge

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-badge@840

@capawesome/capacitor-cloudinary

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-cloudinary@840

@capawesome-team/capacitor-datetime-picker

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome-team/capacitor-datetime-picker@840

@capawesome-team/capacitor-file-opener

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome-team/capacitor-file-opener@840

@capawesome/capacitor-file-picker

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-file-picker@840

@capawesome/capacitor-google-sign-in

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-google-sign-in@840

@capawesome/capacitor-libsql

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-libsql@840

@capawesome/capacitor-live-update

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-live-update@840

@capawesome/capacitor-managed-configurations

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-managed-configurations@840

@capawesome/capacitor-photo-editor

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-photo-editor@840

@capawesome/capacitor-pixlive

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-pixlive@840

@capawesome/capacitor-posthog

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-posthog@840

@capawesome/capacitor-realtimekit

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-realtimekit@840

@capawesome/capacitor-screen-orientation

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-screen-orientation@840

@capawesome/capacitor-screenshot

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-screenshot@840

@capawesome/capacitor-square-mobile-payments

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-square-mobile-payments@840

@capawesome/capacitor-superwall

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-superwall@840

@capawesome/capacitor-torch

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-torch@840

commit: b1c56b7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug(android-edge-to-edge-support): Navigation bar color cannot be changed on API level 31 if @capacitor/keyboard>=8.0.2 is used

1 participant