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
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

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