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
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
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.
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.
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.
I have resolved with
statusBar.styleBlackOpaque();
instead of
statusBar.styleDefault();
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.
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();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With