CODEWITHSUNDEEP
ionic-framework
Akash Chaudhary
Akash Chaudhary

Reputation: 711

How to change status bar color ionic 3 app

I have been trying to change status bar color in Ionic App with the following method:

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

 constructor(private statusBar: StatusBar) { }

 this.statusBar.overlaysWebView(true);

 this.statusBar.backgroundColorByHexString('#ffffff');

But still the status bar color doesn't change.

Upvotes: 2

Views: 6770

Answers (2)

Anouar khaldi
Anouar khaldi

Reputation: 782

Installation

Install the Cordova and Ionic Native plugins:

$ ionic cordova plugin add cordova-plugin-statusbar
$ npm install --save @ionic-native/status-bar@4 // @4 for ionic 3

Usage

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

constructor(private statusBar: StatusBar) { }

...

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

// set status bar to white
this.statusBar.backgroundColorByHexString('#ffffff');

see ionic 3 status bar

Upvotes: 4

Akash Chaudhary
Akash Chaudhary

Reputation: 711

Finally found the solution after days of searching. First install

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

then add the following to the config.xml

<preference name="StatusBarBackgroundColor" value="#2873ed" />
<preference name="StatusBarOverlaysWebView" value="true" />

Upvotes: 8

Related Questions