Status bar overlaps the app content. HELP!

Capacitor
1

The status bar overlaps the app content in Android 15. I can’t seem to change the design of the status bar, no matter what steps I follow. Not even the color of the status bar changes. Please help. I’m new to capacitor and I’ve tried everything. I’m using Capacitor in combination with Next.js 15, i’ve also installed the status bar plugin of capacitor.

// android/app/src/main/res/values/styles.xml:

<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:windowTranslucentStatus">false</item>
    <item name="android:statusBarColor">#32efff</item>
</style>

This is my Header.tsx component, which is available everywhere throughout the website. I didn’t want to put this code in layout.tsx because I didn’t want my entire layout to be a client component:

useEffect(() => {
    const configureStatusBar = async () => {
      if (Capacitor.isNativePlatform()) {
        // Prevent the status bar from overlaying the WebView
        await StatusBar.setOverlaysWebView({ overlay: false });

        // Set the status bar background color
        await StatusBar.setBackgroundColor({ color: "#ffffff" }); // Replace with your desired color

        // Set the status bar text and icon color
        await StatusBar.setStyle({ style: Style.Dark }); // Use Style.Light for dark backgrounds
      }
    };

    configureStatusBar();
  }, []);

I’ve even set up the plugin in capacitor.config.ts:

plugins: {
    StatusBar: {
      overlaysWebView: false,
      style: "DARK",
      backgroundColor: "#ffffffff",
    },
  },
2
  1. Use StatusBar plugin correctly (for Cordova/Capacitor):

Make sure to install and configure it properly

npm install @awesome-cordova-plugins/status-bar
ionic cap sync

In app.component.ts

import { StatusBar } from '@awesome-cordova-plugins/status-bar/ngx';

constructor(private statusBar: StatusBar) {
  this.platform.ready().then(() => {
    this.statusBar.overlaysWebView(false); // This prevent content from going under status bar
    this.statusBar.styleDefault();
  });
}
  1. Add proper padding in CSS:

Apply safe-area inset in global styles

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

OR in SCSS

ion-content {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}
  1. Check AndroidManifest.xml

Inside your android/app/src/main/AndroidManifest.xml

<activity
  android:theme="@style/Theme.AppCompat.Light.NoActionBar">

Try switching to:

android:theme="@style/Theme.AppCompat.NoActionBar"

  1. Capacitor 4+?

In capacitor.config.ts, set:

server: {
  androidScheme: "https"
}

Hope this helpful, Good Luck

3

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 R.attr  |  API reference  |  Android Developers

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:

Links:

2 Likes
4

Thank you so much, the capawesome plugin worked.