Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ionic3 android status bar no icon shown

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

enter image description here

When enter to app:

enter image description here

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
like image 220
Nulra Avatar asked Nov 24 '17 09:11

Nulra


People also ask

What is the IONIC Enterprise Community plugin advisory service?

Ionic’s experts offer premium advisory services for both community plugins and premier plugins. Contact Us Today! Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team. Learn More or if you're interested in an enterprise version of this plugin Contact Us

Can I show the action bar without the status bar?

Figure 2 shows an app with a hidden status bar. Note that the action bar is hidden too. You should never show the action bar without the status bar. Figure 2. Hidden status bar.

Why choose Ionic for your next project?

If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins. Contact Us Today! Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.

Why hide the status bar in iOS apps?

Hiding the status bar (and optionally, the navigation bar) lets the content use more of the display space, thereby providing a more immersive user experience. Figure 1 shows an app with a visible status bar: Figure 1. Visible status bar. Figure 2 shows an app with a hidden status bar. Note that the action bar is hidden too.


3 Answers

I have resolved with

statusBar.styleBlackOpaque();

instead of

statusBar.styleDefault();
like image 125
emiska4 Avatar answered Oct 22 '22 14:10

emiska4


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.

like image 12
Rifat Haque Amit Avatar answered Oct 22 '22 14:10

Rifat Haque Amit


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();
like image 3
Alex Avatar answered Oct 22 '22 14:10

Alex