Ionic 6 Status Bar Customization Tutorial Example

In this quick tutorial, you will find out how to add a status bar in the Ionic Angular application.

Besides, we will also share how to quickly customize the status bar, such as change color or hide and show the status bar in the ionic application using the ionic native and Cordova status bar plugin.

The Status bar plugin is available via Ionic native and Cordova; it allows you to watch over the appearance of the native status bar in Ionic. Not only but also supports various modern platforms such as Android, iOS, and Windows.

Create Ionic Project

Let us begin the installation of Ionic CLI, which is an essential tool for ionic development.

npm install -g @ionic/cli

Right after installing the Ionic command-line-interface install a new blank Ionic Angular app

ionic start test-app blank --type=angular

Next, gain access to app directory:

cd test-app

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Install Ionic Status Bar Plugin

You have to type both the commands on the command prompt, and execute those commands to install the native status bar into ionic application.

ionic cordova plugin add cordova-plugin-statusbar

npm install @ionic-native/status-bar

Update StatusBar into App Module

After adding the status bar packages into ionic, now its time to register the StatusBar plugin into the main AppModule class. This process will let you access the StatusBar customization methods and functions with full availability throughout the app.

Update app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';


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


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

export class AppModule {}

Customize Ionic Status Bar

For iOS, Android 6+, and Windows, you can easily define dark text for light backgrounds by accessing the statusbar.styleDefault() method.

Update app.component.ts file:

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

import { Platform } from '@ionic/angular';
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 statusBar: StatusBar    
  ) {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
    });
  }

}

Ionic Change Status Bar Color

We will show you how to change the color of the status bar in the ionic application, and we will explain how to amend the color of the status bar in iOS and Android.

If you are changing the color of the status bar in iOS, you have to set the StatusBar.overlaysWebView property to false. You have two options to alter the color; you can go with the color hex string value or with background color by name.

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

import { Platform } from '@ionic/angular';
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 statusBar: StatusBar    
  ) {
    this.platform.ready().then(() => {
      this.statusBar.overlaysWebView(false);
      this.statusBar.backgroundColorByName("red");
    }); 
  }

}

Modify or change status bar color using the hex string color value:

export class AppComponent {

  constructor(
    private platform: Platform,
    private statusBar: StatusBar    
  ) {
    this.platform.ready().then(() => {
      this.statusBar.overlaysWebView(false);
      this.statusBar.backgroundColorByHexString("#FAB");
    }); 
  }

}

For android you have to twist the method, and set the overlaysWebView method to true and this will do the trick.

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

import { Platform } from '@ionic/angular';
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 statusBar: StatusBar    
  ) {
    this.platform.ready().then(() => {
      this.statusBar.overlaysWebView(true);
      this.statusBar.backgroundColorByHexString("#333");
    }); 
  }

}

Ionic Status Bar Hide & Show

The status bar in the Ionic platform comes by default, but for adding customization, you can call the custom methods offered by the status bar api inside the platform.ready() method.

For instance, we may hide the status bar by calling the hide() method.

export class AppComponent {

  constructor(
    private platform: Platform,
    private statusBar: StatusBar    
  ) {
    this.platform.ready().then(() => {
       this.statusBar.hide();
    }); 
  }

}

Similarly, you may show the status bar by declaring the show() method.

export class AppComponent {

  constructor(
    private platform: Platform,
    private statusBar: StatusBar    
  ) {
    this.platform.ready().then(() => {
       this.statusBar.show();
    }); 
  }

}

Check the property to make sure if the statusbar is visible or not.

export class AppComponent {

  constructor(
    private platform: Platform,
    private statusBar: StatusBar    
  ) {
    this.platform.ready().then(() => {

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

    }); 
  }

}

Status Bar Overlay or Not Overlay

If the statusbar overlay property is set to true, then it makes the status bar overlay on top of your application; you have to be a little careful about this property. It may collapse with your application’s title bar or content.

However, if you set it to false, it does not overlay your app and make the statusbar solid. This helps to style the background color of the status bar as per your choice.

export class AppComponent {

  constructor(
    private platform: Platform,
    private statusBar: StatusBar    
  ) {
    this.platform.ready().then(() => {

      this.statusBar.overlaysWebView(true);
      this.statusBar.overlaysWebView(false);
      
    }); 
  }

}

Try-Out Ionic Status Bar

Let us check the status bar integration and customization in Ionic application, process is simple just add platform, create build and invoke the app in the either real or virtual device.

First, add the platform:

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

# Windows
ionic cordova platform add windows

Secondly, create runnable build:

# iOS
ionic cordova build ios

# Android
ionic cordova build android

# Windows
ionic cordova build windows

Lastly, run app on the device:

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l

# Windows
ionic cordova run windows -l

Customize Ionic Status Bar

Conclusion

The Ionic Status Bar Customization tutorial is done; in this tutorial, we explained how to quickly change the color of the status bar, hide and show the status bar last but not least, how to overlay or not overlay the status bar.

We hope you liked this quick tutorial, and we believe you would share it with others.