# System Toolbar overlap

**URL:** <https://forum.ionicframework.com/t/system-toolbar-overlap/247666>\
**Category:** Capacitor\
**Created:** [April 25, 2025, 10:52pm UTC](https://forum.ionicframework.com/t/system-toolbar-overlap/247666 "2025-04-25T22:52:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cherry](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/cherry/32/149370_2.png) [@cherry](https://forum.ionicframework.com/u/cherry)\
**Post date:** [April 25, 2025, 10:52pm UTC](https://forum.ionicframework.com/t/system-toolbar-overlap/247666/1 "2025-04-25T22:52:23Z")

</div>

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](https://forum.ionicframework.com/t/capactor-7-on-android-toolbar-and-tab-bar-display-issue/246297/9)

Here are 2 pictures of my app showing the issue:

 ![photo_2025-04-26_00-45-52](https://global.discourse-cdn.com/ionicframework/original/3X/7/f/7ffe7382191d2fb3c1cb7e28c66361280d102119.jpeg)  
 ![photo_2025-04-26_00-45-41](https://global.discourse-cdn.com/ionicframework/original/3X/b/7/b766e7a8f3eb7ce28dbe53cfbdac902001ae0336.jpeg)

Any help is appreciated.

Regards. 🐦

---

<div class="post-metadata">

**Author:** ![AB-Ekovision](https://avatars.discourse-cdn.com/v4/letter/a/9de0a6/32.png) [@AB-Ekovision](https://forum.ionicframework.com/u/AB-Ekovision)\
**Post date:** [April 28, 2025, 8:44pm UTC](https://forum.ionicframework.com/t/system-toolbar-overlap/247666/2 "2025-04-28T20:44:05Z")

</div>

If you use capacitor I resolved the same issue with this: [Capacitor Android Edge-to-Edge Support Plugin - Capawesome](https://capawesome.io/plugins/android-edge-to-edge-support/)

---

<div class="post-metadata">

**Author:** ![Racso](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/racso/32/149022_2.png) [@Racso](https://forum.ionicframework.com/u/Racso)\
**Post date:** [April 28, 2025, 9:45pm UTC](https://forum.ionicframework.com/t/system-toolbar-overlap/247666/3 "2025-04-28T21:45:47Z")

</div>

+1 to @AB-Ekovision’s answer.

---

<div class="post-metadata">

**Author:** ![cherry](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/cherry/32/149370_2.png) [@cherry](https://forum.ionicframework.com/u/cherry)\
**Post date:** [April 29, 2025, 4:56pm UTC](https://forum.ionicframework.com/t/system-toolbar-overlap/247666/4 "2025-04-29T16:56:01Z")

</div>

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:

```auto
npm install @capacitor/status-bar
npx cap sync

```

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

```auto
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):

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

```

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

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

```

6.) `SetupStatusBar` method:

```auto
  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:** _

```auto

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** 🍻