feat: Support new edge-to-edge enforcement introduced in Android 15 (API 35)

[dpalou]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

When running an app targeting SDK 35 in an Android 15 device, now the app fills the whole screen (it no longer leaves some margins for the bottom Android buttons for example). This means that some content might be behind the Android buttons, making that content unclickable.

I'm not sure if the best solution is that cordova-android applies margins to the WebView so it doesn't fill the full screen, making it behave similar to how it behaves in Android 14, or it should be Ionic the one handling those margins (I guess using the "safe area"). I'd prefer the latter because it will look similar to a native Android app, that's why I open this issue.

Right now cordova-android only supports SDK 34, it still doesn't support SDK 35.

To reproduce the issue, just add this in your config.xml and run an app in a device with Android 15:

<preference name="android-targetSdkVersion" value="35" />

For now, this change can be disabled by adding an option in the themes.xml file, but this option is temporary and will be removed in the future:

<item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>

More information about this change:

https://developer.android.com/develop/ui/views/layout/edge-to-edge
https://developer.android.com/about/versions/15/behavior-changes-15#edge-to-edge

Describe the Use Case

The new edge-to-edge display should be supported, otherwise some content can become unclickable because it's behind the Android buttons.

Describe Preferred Solution

I guess the easiest solution is to handle this case using the "safe area".

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[moose4lord]

I'll chime in too, just to highlight that this needs some attention. I've been experimenting with migrating to SDK 35 to support Android 15 and have run into this edge-to-edge problem as well. Targeting SDK 35 in variables.gradle:

compileSdkVersion = 35
targetSdkVersion = 35

And running the Ionic "sidemenu" starter template app in the Android 15 emulator produces this display:
(I changed the ion-toolbar background color to "warning" (i.e. yellow) for emphasis)

Note the Ionic toolbar renders underneath the Android status bar at the top, and the app's main page renders under the navigation bar at the bottom (with gesture navigation turned off). This is Android's edge-to-edge display paradigm.

As @dpalou mentions you can work-around this issue by adding the windowOptOutEdgeToEdgeEnforcement attribute to android/app/src/main/res/values-v35/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
  </style>

  <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:background">@null</item>
    <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
  </style>
</resources>

Which produces this display:

[davideshay]

Just experienced the same problem and the fix above worked. Question, though -- I would think this belongs in the capacitor repository not the ionic one? Seems like the fix might be around Java code to detect the inset sizes and react appropriately (as indicated here: https://developer.android.com/develop/ui/views/layout/edge-to-edge#java. . I'm happy to create the bug there if you agree.

[moose4lord]

There's already an issue flagged on the capacitor GitHub page ionic-team/capacitor#7804. It was added pretty recently, so not much activity so far.

I think this should also be flagged in this repository, because using the windowOptOutEdgeToEdgeEnforcement attribute as a temporary work-around should be added to the Ionic Android scaffolding until Capacitor can make some progress with insets.

[Tomjech16]

Any news? There are problems with existing capacitor plugins like splash screen as well, because of new edge-to-edge.

[danpercic86]

I have the same issue, the app is unusable starting with Android 15

[mfcarneiro]

@moose4lord this solution worked on my device API 34 but the low-end device with API 29 not. Just for the record. I will try to use the community plugin for the API 29.

[danielehrhardt]

pls fix

[mla03]

Also waiting for a fix.
Just updated our application to Capacitor 7, using minSDK 31, Target 35, tested on a Samsung Galaxy A23 running 34, the Navigation bar goes above our design. And same goes for the top part, which goes behind the status bar.
Any quick fix?

[AvniAnay]

I am facing the same issue , some times footer is also overlapped

[DevDianDankie]

bump - same

[robingenz]

I've just published the Android Edge-to-Edge Support plugin, which applies an insert to the web view to restore the previous look. You just need to install it, and your done:

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

Optionally, you can also change the background color of the status and navigation bar. Let me know if you encounter any problems by creating an issue or discussion in capawesome-team/capacitor-plugins.

[moose4lord]

Update: A GitHub PR (#7871) in the Capacitor repository has been approved to address this issue. I hacked the changes to the CapacitorWebView.java file and the PR seems to work well.

This fix has not been released yet, but look for it in the upcoming Capacitor v7.0.2 release. I doubt they will backport the code to Capacitor 6, so you'll probably have to migrate to Capacitor 7 if you haven't done so already.

Many thanks to @markemer for the fix.

[donqemal]

@moose4lord do we know, when Capacitor v7.0.2 will be released?

[moose4lord]

I'm not sure when the next release will happen. They tend to make releases on a monthly cadence, so since 7.0.1 was released about 3 weeks ago, I'm guessing it will be pretty soon. On the other hand, there's a nasty bug (#7866) in the current Android dependencies that needs to get worked out before the next release. So who knows?