Hi all,
I am new to Ionic, I am trying to change the status bar color on android. But unable to do so, I know this is a duplicate issue. I request anyone who has the complete code that they can give me to solve this issue.
I am trying in ionic serve --lab command (which runs in the browser), I am also trying on Moto g4+ android 7.0 nougat, it isn’t showing any effect.
This is my ionic info
cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
@ionic/app-scripts : 3.1.8
Cordova Platforms : android 7.0.0
Ionic Framework : ionic-angular 3.9.2
System:
Node : v8.9.4
npm : 5.7.1
OS : macOS High Sierra
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro
vnyksj
March 26, 2018, 8:55am
2
Post your code, so that we can understand what is the issue
This is my app.component.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = HomePage;
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();
statusBar.overlaysWebView(false);
statusBar.backgroundColorByHexString('#457492');
splashScreen.hide();
});
}
}
this is my confix.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>test</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="16" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#457492" />
<platform name="android">
<allow-intent href="market:*" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
<icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
<icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
<icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
<icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
<icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
<icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
<icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
<icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
<icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
<icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
<icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
<icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
<icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
<icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
<icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
<splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
</platform>
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<plugin name="cordova-plugin-device" spec="^2.0.1" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^1.1.16" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<plugin name="cordova-plugin-headercolor" spec="^1.0.0" />
<engine name="android" spec="~7.0.0" />
<plugin name="cordova-plugin-statusbar" spec="^2.4.1" />
</widget>
and this is my app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
please let me know if you want to see the code of any other file.
I had ran these commands in the ionic project folder for the status bar.
ionic cordova plugin add cordova-plugin-statusbar
npm install --save @ionic-native/status-bar
the main issue is that the color of the status bar is not changing on splash screen … it changes on the home page
Thats the way it’s designed, unfortunately. You’re splashscreen is showing untill the platform is done loading. Hence the platform ready. Inside your platform ready you change your statusbar color, so it’s working as expected with this configuration.
what can i do to make it work in the splash screen also ?
vnyksj
March 26, 2018, 9:24am
6
You are right… first method to be run is Platform.ready() and we cannot access platform before this method. So I believe its normal behavior, StatusBar color changes once platform is ready.
Dig into the native code. I believe this should be supported through your styles.xml in your android folder from Android Lollipop (API 21 and up).
EDIT:
How much time you have to get a fix? I could take a look into it somewhere today, but just not right know.
so what changes I can do in the code to change the color of the status bar from the app launch? How do you guyz do it? do you use any other plugin or some type of different code?
Yes I have a 2 day time.
You have to do some manual alterations to your Android platform code. You could also write a hook to do it for you, but I’ll try and come up with a solution for you first. Just give me some time.
try this css in youre app.scss file
.toolbar-background-md, .toolbar-background-ios,.toolbar-background-wp {
background-color: color($colors,'primary');
}
hirenkorat3:
.toolbar-background-md, .toolbar-background-ios,.toolbar-background-wp {
this is changing the color of the toolbar and not the status bar … !
Screenshot_20180326-204716|281x500
ok ok then you can use this plugin
I’ve also installed this plugin and added the following code to app.component.ts
headerColor.tint('#007eb1');
but this doesn’t change the color of the status bar, instead changes the color of the multi window header.
below is my app.component.ts file
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { HeaderColor } from '@ionic-native/header-color';
import { SplashScreen } from '@ionic-native/splash-screen';
import { IntroPage } from '../pages/intro/intro';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = IntroPage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, headerColor: HeaderColor) {
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();
headerColor.tint('#007eb1');
splashScreen.hide();
});
}
}
you try this peace of code
// let status bar overlay webview
this.statusBar.overlaysWebView(true);
// set status bar to white
this.statusBar.backgroundColorByHexString('#ffffff');
Have already done this, you can check my above replies. This is working for inner pages and not for splash screen !
goinnn
June 27, 2018, 9:57am
17
I have the same problem. And I fixed it with a fork:
In your config.xml:
<platform name="android">
<preference name="SplashStatusBarBackgroundColor" value="#YOUR_COLOR" />
<preference name="SplashNavigationBarBackgroundColor" value="#YOUR_COLOR" />
1 Like
Hello, how can i use your code in my plugin as this piece of code is not working in my code.
goinnn
July 25, 2018, 7:54am
19
ionic cordova plugin rm cordova-plugin-splashscreenGitHub - goinnn/cordova-plugin-splashscreen at 4.0.0
goinnn
September 5, 2018, 7:24am
21
Typo error in git URL:
ionic cordova plugin rm cordova-plugin-splashscreenhttps://github.com/goinnn/cordova-plugin-splashscreen.git#4.0.0#colors
If you get this error:
Another time (it is very crazy):https://github.com/goinnn/cordova-plugin-splashscreen.git#4.0.0#colors
It works for me and every person of my team (4 developers more) We use linux or mac. And it is only a fork with an extra commit.
1 Like