Cordova: StatusBar plugin works on emulator but not on device

Question

I have a cordova project and I installed the StatusBar plugin to color the status bar of the device in the Android platform. The plugin displays the correct status bar color if I run the project on an AVD (pic1), but when I run it on the device it does not appear to work.

I also noticed that when I run the project on device with the plug in uninstalled the view takes up the entire screen, but if I run it with the plugin installed there is black space between the app view and the top and bottom of the phone's nav bar and status bar (pic2).

Device: Samsung S9 running Android 8.0.0 (Oreo)
Cordova version: 8.0.0
StatusBar plugin version: 2.4.2
Cordova whitelist plugin: 1.3.3

index.js:

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
        StatusBar.backgroundColorByHexString("#CF4D4D");
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
    }
};

app.initialize();

And where's the code you are using to set the statusbar color from config.xml? That is, the `StatusBarBackgroundColor` value. The index.js file has nothing to do with the statusbar plugin settings. — andreszs, May 16 '18 at 22:39
@andreszs thank you for your reply, as far as I understand the is not necessary anymore. The status bar colors correctly in the AVD with or without it, and it does not color on device weather I add it to the config file or not. — Brian, May 17 '18 at 15:34

score 1 · Accepted Answer · answered May 21 '18 at 10:39

1

I've tested your code and it works fine on 4 different devices with Android 5, 6, 7 and 8.1, so it's clearly a bug in the plugin. (probably device specific or vendor specific)

So report it on https://issues.apache.org/jira/browse/CB providing all the possible information. (The information on this "question" should be enough)

answered May 21 '18 at 10:39

jcesarmobile

51,328
11
132
176

thank you for your comment! I will accept your answer as soon as this is confirmed to be a plugin bug. – Brian May 23 '18 at 09:41

score 1 · Answer 2 · answered May 25 '18 at 13:51

You can set them in your config.xml too:

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#CF4D4D" />
<preference name="StatusBarDefaultScrollToTop" value="false" />

If that helps you in any way.

Cordova: StatusBar plugin works on emulator but not on device

2 Answers2