Example code to hide or change color of status bar android

Ionic Framework ionic-v3
1

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.

Cheers

1 Like
2

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

3

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.

4

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

5

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

6

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

7

Thanks for the reply. I added:

import {StatusBar} from 'ionic-native';

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

8

With ionic 2, i simply use

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


@App({
  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(() => {
            StatusBar.backgroundColorByHexString("#25312C")
    });
  }
}
9

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

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

10

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