How to Customize Ionic 5 Status Bar with Ionic Native & Cordova Plugins

Last updated on by Digamber

This Angular/Ionic 5 tutorial will help you understand how to set up or configure a status bar in Ionic 5 application, Moreover, you will learn how to display or similarly overlap status bar on top of your device, adding color in status bar, and how to hide status bar using Ionic native and Cordova plugins from scratch.

The Ionic native status bar plugin gives you no pain about configuring within the Ionic application. Apparently, it supports all the major platforms such as iOS, Android over and above that Windows.

Install Ionic Application

Make sure you have Ionic CLI configured on your system, then execute the following command to install Ionic project:

ionic start ionic-status-bar-example blank --type=angular

Land into the project root:

cd ionic-status-bar-example=angular

Install Ionic Status Bar Plugin

Install status bar in Ionic 5 to manage the look and feel of the native status bar.

$ ionic cordova plugin add cordova-plugin-statusbar
$ npm install @ionic-native/status-bar

As you can see StatusBar is already comes defined in app.module.ts configuration file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// Stauts bar
import { StatusBar } from '@ionic-native/status-bar/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

export class AppModule {}

Integrating Status Bar in Ionic/Angular Component

You don’t have to do anything to switch-on the status bar, rather Ionic framework does this job for you. You can see that in app.component.ts file:

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

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

Change Ionic Status Bar Color

Changing the color of the status bar can be done through two methods, the following methods can be added in AppComponent class.

this.statusBar.backgroundColorByHexString("darkGray");

You can define color by name using backgroundColorByName() method. It takes color name as a parameter, here are the supported color names:

black, darkGray, lightGray, white, gray, red, green, blue, 
cyan, yellow, magenta, orange, purple, brown
this.statusBar.backgroundColorByName("darkGray");

Apart from color names, you can also use hex values to change the color of the status bar.

this.statusBar.backgroundColorByHexString("4e4e4e");

Moreover, you can also use CSS shorthand values:

this.statusBar.backgroundColorByHexString("#ABA") // => #ABABAB

Make the Status Bar overlay in Ionic

The overlaysWebView() method makes the status bar overlay or not overlay the WebView. Set to true to make the statusbar overlay on top of your app.

Ensure that you adjust your styling accordingly not to cover your app’s title bar or content. If configured to false, then it makes the status bar solid not only but also not overlay your app.

// status bar overlays webview
this.statusBar.overlaysWebView(true);

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

Hide and Show Status Bar in Ionic

You can hide the status bar using the hide() method, vice versa; you can use the show() method to show the status bar.

this.statusBar.hide();

this.statusBar.show();

Light Content Status Bar

The styleLightContent() method recklessly lets you use a light content status bar, which basically means light text, for dark backgrounds.

this.statusBar.styleLightContent()

The Ionic status bar tutorial is over; we learned to configure the status bar with the help of Ionic Native and Cordova plugins. I hope you will love this tutorial.