Capacitor transparent status bar overlapping with toolbar in Ionic app for android

Question

I set a transparent status bar in my app.component.html in my ionic app for android as follows:

import { Component,OnInit } from '@angular/core';
import { StatusBar,Style } from "@capacitor/status-bar";
import { Storage } from "@capacitor/storage";
import { Router } from "@angular/router";
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(
    public router:Router
  ) {}
  async shouldShowStarterScreen(){
    let hasSeenScreen = await Storage.get({key:"seenScreen"});
    if(hasSeenScreen.value == null){
      this.router.navigate(["starter-screen"]);
    }
  }
  slideOpts = {

  }
  async ngOnInit(){
    this.shouldShowStarterScreen();
  /*  await StatusBar.setStyle({style:Style.Dark})
    StatusBar.setBackgroundColor({
      color:"#3F00FF"
    })*/
    StatusBar.setOverlaysWebView({overlay:true});
  }
}

Its working but there is a slight overlap of the status bar on the app as seen below

What is a quick, suitable way of correcting this

Answer 1

If you want keep overlay, then you can update styles for your toolbar globally in global.scss:

ion-header.md {
    ion-toolbar:first-child {
        --padding-top: 27px;
        height: 66px;
    }
}

This styles suitable for header like this:

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>
            First title
        </ion-title>
    </ion-toolbar>

    <ion-toolbar>
        <ion-title>
            Second title
        </ion-title>
    </ion-toolbar>
</ion-header>

This style is needed only for Android and only for the first toolbar in your ion-header. If you will use pages without ion-header (or with another ion-header structure) you should update your styles in a similar way.