Top and bottom UI overlapping on Android 15 (Samsung S22/S23) devices

cordova
1

I have an Ionic Cordova project and I’m facing an issue on Android 15 devices (specifically Samsung S22 and S23).
When I open the app, the top (status bar / safe area) and bottom (navigation bar) areas are overlapping with the content. Some buttons or texts are partially hidden behind these system bars.

I tried adding styles like:

ion-app {
  padding-top: env(safe-area-inset-top);
}

But this doesn’t fully solve the issue. On iOS devices everything looks fine, this only happens on Android 15 (Samsung s22, s23 etc.).

Has anyone else experienced this problem? Do I need to add special safe area handling or a configuration for Android 15?

Screenshot_20251001_162825
Screenshot_20251001_1628251080×2340 473 KB

Thanks in advance :folded_hands:

2

This is Android’s new Edge-to-Edge feature. There are quite a few posts already here about this, just search for “edge-to-edge”.

The main one is Edge to edge Android.

3

Thanks! Yes, I’ve seen some of the other posts about Edge-to-Edge. I’ve made some adjustments in my MainActivity.java to handle insets properly, especially when mixing system bars and display cutouts. Here’s what I’ve implemented:

package com.tt.mobilport;

import android.os.Bundle;
import android.view.View;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowCompat;
import androidx.core.view.WindowInsetsCompat;
import org.apache.cordova.*;

public class MainActivity extends CordovaActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    WindowCompat.setDecorFitsSystemWindows(getWindow(), false);

    final View content = findViewById(android.R.id.content);
    if (content != null) {
      ViewCompat.setOnApplyWindowInsetsListener(content, (v, windowInsets) -> {
        Insets bars = windowInsets.getInsets(
          WindowInsetsCompat.Type.systemBars() | WindowInsetsCompat.Type.displayCutout()
        );
        v.setPadding(bars.left, bars.top, bars.right, bars.bottom);
        return windowInsets;
      });
    }

    Bundle extras = getIntent().getExtras();
    if (extras != null && extras.getBoolean("cdvStartInBackground", false)) {
      moveTaskToBack(true);
    }

    loadUrl(launchUrl);
  }
4

I made a temporary workaround and a final solution for this issue in my ionic capacitor app. In the meantime that my app was not yet updated, I asked the user to switch the settings on their phones to ‘swipe gestures’.

Open phone’s Settings. Tap on Display. Scroll down and tap on Navigation bar. Select Swipe gestures.

This will make the navigation buttons of the phone to disappear and will be controlled by swipe gestures like an iPhone.

My final solution to this is to implement the fullscreen plugin.

npm install cordova-plugin-fullscreen
npm install @awesome-cordova-plugins/android-full-screen

This will hide the navigation bar at the bottom of the screen when the app is on foreground. The navigation buttons can still appear by swiping up from the bottom of the screen.

1 Like