Ionic 5|4 Status Bar Config color, hide, overlap using Cordova & Native Plugin

In this Ionic 5/4 tutorial, we will learn how to configure Status bar showing on top of the mobile screen in multiple platforms like Android, iOS, and Windows.

We will use Cordova and Ionic Native plugin to change color or status bar and also change its behavior to overlap the review.

By default when we create a new Ionic application the Status bar plugin already comes installed. If you open the app.component.ts file, you can see in the initializeApp() method.

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

The Status is available to configure after the application is ready so we call it inside the platform.ready() callback.

Let’s check the configurations available inside the StatusBar class.

How to change the status bar color?

There two methods available to change the color of the Status bar.

backgroundColorByHexString()

this.statusBar.backgroundColorByHexString("cccccc");

backgroundColorByName()

this.statusBar.backgroundColorByName("yellow");

 

How to Show/ Hide the Status Bar in Ionic Application?

To hide the status bar we can call the hide() method

this.statusBar.hide();

To show the status bar we can call the show() method

this.statusBar.show();

After checking if it is visible by using the inVisible() method

if(this.statusBar.isVisible)
      this.statusBar.hide();

 

Hide Status Bar from Application View

We can call the overlaysWebView method which takes a boolean to hide the overlap when to show apps in full screen.

// let status bar overlay webview (Default)
      this.statusBar.overlaysWebView(true);

      // let status bar hidden behind webview
      this.statusBar.overlaysWebView(false);

 

That’s it here we discussed how to configure the Status bar in the Ionic application by using already installed Cordova and native plugin.