ionic3 android status bar no icon shown

Question

When I update my project ionic version, the android app have status bar can't show any icon when enter to the app:

When enter to app:

Anyone know how to solve? My info:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.17.0
ionic (Ionic CLI) : 3.17.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.3.0 ios 4.6.0-nightly.2017.11.22.24bfb734
Ionic Framework    : ionic-angular 3.8.0

System:

ios-deploy : 1.9.2 
ios-sim    : 5.0.13 
Node       : v7.10.0
npm        : 5.5.1 
OS         : macOS Sierra
Xcode      : Xcode 9.0.1 Build version 9A1004

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : legacy

any update on this ? i am having same issue :( – Kishan Oza Sep 25 '18 at 09:43 — Kishan Oza, Sep 25 '18 at 09:43

score 13 · Answer 1 · answered Mar 14 '18 at 16:19

13

I have resolved with

statusBar.styleBlackOpaque();

instead of

statusBar.styleDefault();

answered Mar 14 '18 at 16:19

emiska4

161
1
2

Worked for me as well, Ionic v4 – Aaron Jordan Apr 24 '19 at 22:35

score 12 · Answer 2 · edited Jul 15 '19 at 13:14

12

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

@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    constructor(public platform: Platform, public statusBar: StatusBar) {
        platform.ready().then(() => {
            statusBar.styleDefault();
            if (platform.is('android')) {
                statusBar.overlaysWebView(false);
                statusBar.backgroundColorByHexString('#000000');
            }
        });
    }
}

This fixed my problem.

edited Jul 15 '19 at 13:14

Ahmed Nabil

17,392
11
61
88

answered Jan 04 '18 at 05:33

Rifat Haque Amit

331
1
7

worked with me, but just import `import { StatusBar } from '@ionic-native/status-bar/ngx';` – Ahmed Nabil Jul 15 '19 at 13:13
Worked for me ionic5. All I need was `statusBar.overlaysWebView(false);` – greaterKing Sep 16 '21 at 17:13

score 3 · Answer 3 · answered Jan 03 '18 at 05:01

I found this helpful. You can use one of these three options in ionic 3

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

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  constructor(public platform: Platform, public statusBar: StatusBar) {

    this.platform.ready().then(() => {
      // for Black
      if(this.platform.is('android')) {
        this.statusBar.styleBlackOpaque();
      }
    }
  }
}

You could also use one for a hex code color

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

This one for a light colored theme that is built in.

this.statusBar.styleLightContent();

score 0 · Answer 4 · answered Nov 24 '17 at 15:50

in your app.component.ts Check that you have

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
...   

@Component({
      templateUrl: 'app.html'
    })
    export class MyApp {

      constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
        platform.ready().then(() => {
          // Okay, so the platform is ready and our plugins are available.
          // Here you can do any higher level native things you might need.
          statusBar.styleDefault();
          splashScreen.hide();
        });
    }

And just to be safe, run the following commands.

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

When all that is done. Generate your Apk with your favorite command or you can try this too

$ ionic cordova run android --device

score 0 · Answer 5 · edited Mar 24 '19 at 06:36

0

Change the statusBar.styleDefault() to statusBar.styleLightContent() at app.component.ts.

edited Mar 24 '19 at 06:36

Pika Supports Ukraine

3,612
10
26
42

answered Mar 24 '19 at 06:35

Sushant

87
2
11

score 0 · Answer 6 · answered Nov 25 '19 at 07:18

Install below Plugins:

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

Include below code in your app.component.ts

if (this.platform.is('android')) {
      this.statusBar.backgroundColorByHexString(<<STATUS_BAR_COLOR>>);
}

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

import { Platform } from "@ionic/angular";
import { SplashScreen } from "@ionic-native/splash-screen/ngx";
import { StatusBar } from "@ionic-native/status-bar/ngx";
import { TranslateService } from "@ngx-translate/core";
import { EventProvider } from "./event-provider.service";
@Component({
  selector: "app-root",
  templateUrl: "app.component.html"
})
export class AppComponent {
  constructor(
    private translate: TranslateService,
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private eventProvider: EventProvider
  ) {
    this.initializeApp();
    this.eventProvider.currentLang.subscribe(lang => {
      this.translate.use(lang);
    });
    if (this.platform.is('android')) {
      this.statusBar.backgroundColorByHexString('#04b9fe');
    }
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
}

score 0 · Answer 7 · answered May 15 '21 at 19:40

To Show Status Bar In Ionic 4 Application

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.initializeApp();
    
      }
      initializeApp() {
        this.platform.ready().then(() => {
          this.statusBar.show();
      }
     }
    }

ionic3 android status bar no icon shown

7 Answers7