Problem with status bar color

cordova
#1

I have a problem with changing status bar color in Android.

This’s my code

var app = angular.module('starter', [
	'ionic', 
	'starter.controllers',
	'ngCordova'
]);

app.run(function($ionicPlatform, $cordovaStatusbar) {
	$ionicPlatform.ready(function() {
		$cordovaStatusbar.overlaysWebView(true);

		$cordovaStatusbar.styleHex('#FF0000');
	});
});

And it’s not working.

2 Likes
How to change the status bar color of the Android app?
#2

Setting the status bar color for android is only supported for android 5.0 and up.

#3

I’m testing on

  • ionic view
  • Nexus 5
  • Android 5.0.1
#4

Worked fine for me using this pattern.

2 Likes
#5

for me it didnt work !

#6

Just making sure…did you add the statusbar plugin?

#7

for sure

cordova plugin add org.apache.cordova.statusbar
#8

It didnt work also on my nexus 5 (Android 5.1)

#9

Ahh alright, try removing that one and grabbing the one from github.

ionic plugin add https://github.com/apache/cordova-plugin-statusbar.git
1 Like
#10

Great! It works now!

1 Like
#11

here’s my code

app.run(function($ionicPlatform, $cordovaStatusbar) {
	$ionicPlatform.ready(function() {
		$cordovaStatusbar.overlaysWebView(true);

		$cordovaStatusbar.styleHex('#FF0000');
	});
});

and it didnt work

i removed the current install of statusbar then

ionic plugin add https://github.com/apache/cordova-plugin-statusbar.git

but with no effect.

1 Like
#12

Okay so the issue here is that if overlaysWebView(); is true, you can’t use styleHex('#FF0000');

#13

i think that i’ve tried everything

app.run(function($ionicPlatform, $cordovaStatusbar) {
	$ionicPlatform.ready(function() {
		$cordovaStatusbar.overlaysWebView(false);
		$cordovaStatusbar.styleHex('#FF0000');
	});
});

and

app.run(function($ionicPlatform, $cordovaStatusbar) {
	$ionicPlatform.ready(function() {
		$cordovaStatusbar.styleHex('#FF0000');
	});
});

and am sure i’m injected ‘ngCordova’

and tested on android 5.0.1 nexus 5

also i’ve installed the statusbar from github using

ionic plugin add https://github.com/apache/cordova-plugin-statusbar.git

any suggestions

[doubts] StatusBar Color
#14

Can you try not using ngCordova and just use the pure cordova plugin?

app.run(function($ionicPlatform) {
	$ionicPlatform.ready(function() {
            if(window.StatusBar){
		window.StatusBar.overlaysWebView(false);
		window.StatusBar.styleHex('#FF0000');
            }
	});
});

I’m not sure what else could be the issue.

#15

I’m wondering if it’s a problem with Ionic View itself !

i can share the ionic with u.

#16

Why don’t you try it with using ionic view.

#17

all of that was with ionic view.

#18

sorry, try it without using ionic view

#19

Hi dyaa!

I had the same problem like you!

But today I wanted to install crosswalk canary, but I got an Error, saying that my Cordova was outdated !

So I updated my cordova files, rebuilt my android files and voilá: my statusbar is colored ! :smiley:

I hope this solves your problem.

#20

It worked for me too:

ionic plugin rm org.apache.cordova.statusbar
ionic plugin add https://github.com/apache/cordova-plugin-statusbar.git

$ionicPlatform.ready () ->
            $cordovaStatusbar.styleHex $WPHCConfig.cordova.statubar.color
            if $WPHCConfig.cordova.statubar.show
                $cordovaStatusbar.show()
            else
                $cordovaStatusbar.hide()
1 Like