System Toolbar overlap

Capacitor
1

Hello, the problem is as followed: The ion-header is overlapping the systems toolbar. I found a thread but there is no definitive answer to it: click me

Here are 2 pictures of my app showing the issue:

photo_2025-04-26_00-45-52
photo_2025-04-26_00-45-52960×1280 102 KB

photo_2025-04-26_00-45-41
photo_2025-04-26_00-45-41960×1280 89.8 KB

Any help is appreciated.

Regards. :bird:

2

If you use capacitor I resolved the same issue with this: Capacitor Android Edge-to-Edge Support Plugin - Capawesome

3 Likes
3

+1 to @AB-Ekovision’s answer.

4

Thanks for the reply, I tried the plugin but I had difficulties importing the plugin. So now I found a native way to do it. I used the Capacitors native Status Bar.

How I did it:

1.) Install the Status Bar plugin:

npm install @capacitor/status-bar
npx cap sync

2.) Import everything whats needed to your app.component.ts:

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { StatusBar, Style } from '@capacitor/status-bar';

3.) Add Platform to your constructor:

constructor(private platform: Platform){}

4.) Create a method to initialize the function (if not there already):

  constructor(private platform: Platform) {
    this.initializeApp();
  }

5.) The function itself with another method which sets up the StatusBar:

  initializeApp() {
    this.platform.ready().then(() => {
      this.setupStatusBar();
    });
  }

6.) SetupStatusBar method:

  private async setupStatusBar() {
    try {
      await StatusBar.setBackgroundColor({ color: '#000000' });
      await StatusBar.setStyle({ style: Style.Light });
    } catch (error) {
      console.error('StatusBar setup error:', error);
    }
  }

Here is the full code Snippnet:


import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { StatusBar, Style } from '@capacitor/status-bar';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  constructor(private platform: Platform) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.setupStatusBar();
    });
  }

  private async setupStatusBar() {
    try {
      await StatusBar.setBackgroundColor({ color: '#000000' });
      await StatusBar.setStyle({ style: Style.Light });
    } catch (error) {
      console.error('StatusBar setup error:', error);
    }
  }
}

Hope this helps someone in the future.

Cheers :clinking_beer_mugs: