Example code to hide or change color of status bar android


I have read the doc about statusbar, but it only shows the methods. Can someone please provide the code needed to do hide or change the color of the statusbar.



Did you had a look at this cordova plugin http://ngcordova.com/docs/plugins/statusbar ?


this is referencing the ‘old’ angular 1 docs. The available docs can be found over here. @polska03 If you look at the starter code for ionic 2 apps, you see an example of usage. initializeApp() { this.platform.ready().then(() => { // The platform is now ready. Note: if this callback fails to fire, follow // the Troubleshooting guide for a number of possible solutions: // // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. // // For example, we might change the StatusBar color. This one below is // good for dark backgrounds and light text: // StatusBar.setStyle(StatusBar.LIGHT_CONTENT) }); }

Look at the last example. It states StatusBar.setStyle(StatusBar.LIGHT_CONTENT). This is a good example of how to use it. Hiding the statusbar would simply become StatusBar.hide() or setting the color would be something like StatusBar. backgroundColorByHexString(’#333’). If you use TypeScript, make sure you’ve included the right typings for the StatusBar.


Thanks for the reply. How/where do I import StatusBar into my app.js file?


As far as i understand you dont need to do that. Just ionic plugin add "plugin name", and then use the code above in app.js


You need to import it from ‘ionic-native’, it’s not in the doc I understand it’s confusing.


Thanks for the reply. I added:

import {StatusBar} from 'ionic-native';

But it says it cannot resolve module ‘ionic-native’.


With ionic 2, i simply use

import {App, Platform} from 'ionic-angular';
import {TabsPage} from './pages/tabs/tabs';

  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
export class MyApp {
  static get parameters() {
    return [[Platform]];

  constructor(platform) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {


You have to install ionic native too:
npm install ionic-native --save

This article shows how to use ionic-native plugins in ionic 2 :


Use this code:-

import {StatusBar} from ‘@ionic-native’;
and please Don’t install. it already available in Node Modules.
Available path : node_modules@ionic-native\status-bar