I am not able to change Status Bar color

Ionic Native
1

Hi, I am know to Ionic and I am trying to add a color to the status bar. I already downloaded cordova’s plugin and the status bar package from npm. I checked config.xml and the plugin is there. I already changed the overlayWebView to true and to false to see what happened and tried to change the color of the status bar. But nothing has worked. Here’s my code:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';


@IonicPage()
@Component({
  selector: 'page-welcome',
  templateUrl: 'welcome.html',
})
export class WelcomePage {


  constructor(public navCtrl: NavController, public navParams: NavParams, public statBar: StatusBar, public platform: Platform) {
    this.platform= platform;
    this.platform.ready().then( () => {
      this.statBar.overlaysWebView(true);
      this.statBar.backgroundColorByHexString('#ffffff');
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad WelcomePage');
    
  }

  



}

I would be very grateful if anyone could tell me why this is not working. Thanks in advance.

2

You have to install Header Color Cordova Plugin to change the status bar color.

Once you have it installed add as provider in app.module and in app.component just add headerColor.tint('#f0f0f0');

3

I already did that but things are the same. In the Chrome console I get:

Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

I think this is the cause of my problem. Do you know how to fix this?

4

That’s because you’re running on Chrome. HeaderColor is a native plugin, you have to run on either a physical device or an emulator.

2 Likes
5

Thank you very much! I will run my app on an Android emulator.

6

I installed it but still no change, status bar is of black color. Should I need to uninstall cordova-statusbar plugin ?

7

headerColor is not for the status bar, it is for app header in the recents view when user press recents key to view/switch apps.