Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't set color of statusbar with cordova-plugin-statusbar

I'm trying to change the color of the native status bar in an ionic app, but I can't get it to work. I've installed cordova-plugin-statusbar, and it installs fine. The following code works perfectly:

if (StatusBar) {
    StatusBar.hide();
}

But trying to use any other of the available functions, for example:

if (StatusBar) {
    StatusBar.backgroundColorByHex('#RRGGBB');
}

doesn't work, the just app uses the standard statusbar.

I've also added <preference name="StatusBarOverlaysWebView" value="true" /> to config.xml, as well as setting it programmatically at runtime.

Cordova is version 5.1.1, Ionic is version 1.5.5 and I'm using Android 21 for testing. Has anyone experienced the same problem or know how to fix it?

like image 694
Almyy Avatar asked Jul 15 '15 11:07

Almyy


People also ask

How can I change the color of my status bar in Cordova?

overlaysWebView to false, you can set the background color of the statusbar by a hex string (#RRGGBB). On Android, when StatusBar. overlaysWebView is true, and on WP7&8, you can also specify values as #AARRGGBB, where AA is an alpha value.

How do I change the color of my status bar in ionic 5?

My app is in IONIC 5 and I am using the following code to change the status bar color in the app. component. ts file . import { StatusBar } from '@ionic-native/status-bar/ngx'; export class AppComponent { constructor( ... private statusBar: StatusBar ... )

What is Cordova Android?

Cordova Android is an Android application library that allows for Cordova-based projects to be built for the Android Platform. Cordova based applications are, at the core, applications written with web technology: HTML, CSS and JavaScript. Apache Cordova is a project of The Apache Software Foundation (ASF).


2 Answers

See me original solution at Can't get cordova-plugin-statusbar to set color on Android

Add the plugin. Run shell command:

$ cordova plugin add cordova-plugin-statusbar

Edit your config.xml:

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#BE1912" />

'#BE1912' is the default color (on app starts).

Change in run time from your java script code:

if (window.cordova && StatusBar)
{
    StatusBar.backgroundColorByHexString('#BE1912');
}
like image 143
Gil Epshtain Avatar answered Oct 26 '22 17:10

Gil Epshtain


Could you try removing the status bar plugin and reinstalling like so:

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

The same has been reported at the ionic issue tracker

like image 25
Ibanez Avatar answered Oct 26 '22 18:10

Ibanez