ionic-team
New Android version 15 does not support overlay: true !
Bug Report
Plugin(s)
"@capacitor/status-bar": "^7.0.1",
Capacitor Version
💊 Capacitor Doctor 💊
Latest Dependencies:
@capacitor/cli: 7.2.0
@capacitor/core: 7.2.0
@capacitor/android: 7.2.0
@capacitor/ios: 7.2.0
Installed Dependencies:
@capacitor/cli: 7.2.0
@capacitor/android: 7.2.0
@capacitor/ios: 7.2.0
@capacitor/core: 7.2.0
[success] Android looking great! 👌
Platform(s)
- [x] Android
Current Behavior
My Android 15 os device is having trouble with @capacitor/status-bar package, I use this setting to show the bottom status bar, but it does not work, and it causes some calculations of CSS to be wrongly rendered due to using percentage values!
StatusBar.setOverlaysWebView({ overlay: true })
The current issue is with this mobile:
Redmi note 13 pro
Android version 15
Os version 2.0.4.0.VNFMIXM
Expected Behavior
expected behavior with an older version of os and another mobile
Oppo a92
Model cph2059
CPU: Snapdragon 665
Android version 11
This issue needs more information before it can be addressed. In particular, the reporter needs to provide a minimal sample app that demonstrates the issue. If no sample app is provided within 15 days, the issue will be closed.
Please see the Contributing Guide for how to create a Sample App.
Thanks! Ionitron 💙
This issue needs more information before it can be addressed. In particular, the reporter needs to provide a minimal sample app that demonstrates the issue. If no sample app is provided within 15 days, the issue will be closed.
Please see the Contributing Guide for how to create a Sample App.
Thanks! Ionitron 💙
You're too lazy, I gave you everything needed, and even the repo to install it and test it, even the mobile version, and you're saying a minimal sample app 🙄
I can confirm this behavior for my physical phone (Samsung Galaxy S23) with Android 15 as well as the Emulator in Android Studio with emulated Google Pixel with Android 16.
The setting ("overlaysWebView": false) for the StatusBar Plugin doesn't have any effect. The entire app is shown fullscreen behind the Android top bar with notch, clock etc. blocking the underlying app controls. "@capacitor/status-bar": "^7.0.1"
There are the remarks in the plugin API documentation: "For applications targeting Android 15, this property has no effect unless the property windowOptOutEdgeToEdgeEnforcement is added to the application layout file. Otherwise, the application assumes always overlays as true. "
I guess this is a relevant aspect:
windowOptOutEdgeToEdgeEnforcement - But if the window belongs to an app targeting BAKLAVA or above, this attribute is ignored and the enforcement is applied regardless.
There are now several issues refering to problems with the StatusBar Plugin with Android 15+. https://github.com/ionic-team/capacitor-plugins/issues/2341 https://github.com/ionic-team/capacitor-plugins/pull/2336
The overlaysWebView api has bug on Android 15 (Edge to Edge display), Capacitor official documentation has already explained as below:
Whether the statusbar is overlaid or not. For applications targeting Android 15, this property has no effect unless the property windowOptOutEdgeToEdgeEnforcement is added to the application layout file. Otherwise, the application assumes always overlays as true. More details in https://developer.android.com/reference/android/R.attr#windowOptOutEdgeToEdgeEnforcement
You can use @capawesome/capacitor-android-edge-to-edge-support plugin as a temporary fix.
The best solution for configuring Status Bar and Navigation Bar is using the three plugins below:
- @capacitor/status-bar
- @capawesome/capacitor-android-edge-to-edge-support
- @capgo/capacitor-navigation-bar
This is the solution that works for me (in emulator and real phone). Unfortunately the Capacitor Plugins documentation is not that specific on this part.
Modify this file:
app/res/values/styles.xml
Append this line in every style section with Theme.AppCompat.*
<item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
This is what it looks like for my Capacitor installation:
<?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>
<style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
<item name="android:background">@drawable/splash</item>
</style>
</resources>
This is the solution that works for me (in emulator and real phone). Unfortunately the Capacitor Plugins documentation is not that specific on this part.
Modify this file:
app/res/values/styles.xmlAppend this line in every style section with
Theme.AppCompat.*<item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>This is what it looks like for my Capacitor installation:
<?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> <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen"> <item name="android:background">@drawable/splash</item> </style> </resources>
To complete your solution, I still needed to add overlaysWebView: false for the plugin config in capacitor.config.ts. After this everything worked exactly in our app as with Capacitor 6
plugins: {
StatusBar: {
overlaysWebView: false,
},
},
