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.