[SOLVED] Transparent status bar in Android

cordova
1

Hi, there is no transparent status bar in Android.
In iOS it’s working fine but in Android there is black status bar.

Examples:
My app without status bar styling:

image
Screenshot_2015-07-26-17-25-44.png1080×1920 354 KB

Lolipop app with transparent status bar:
image
Screenshot_2015-07-26-17-28-22.png1080×1920 202 KB

image
Screenshot_2015-07-26-17-34-29.png1080×1920 112 KB

2

Bump
Someone know any cordova plugin?

3

i looked around a little time ago and there are only pre-defined color-schemes you can use.
You are not allowed to hide or set the color transparent on android.

But maybe someone else knows a little bit more.

4

Not allowed to make status bar transparent?
But every native material design app doing it…

5

I don’t think it’s possible as well. I went into the android source code for the status bar to make sure and couldn’t find anything.

But I don’t think its really a big deal, not really a big detail when you look at an app.

6

This should do the job?
http://www.martinadamko.sk/posts/translucent-bar-android-278
I am not on my pc for the next days so I don’t know if it’s working.

1 Like
7

Tested it, seems to work pretty well. Should get you what you want.

8

Thanks you. I will use this plugin.

9

wow, learning never stops :smile:

10

I have problem to install this plugin.
This is my error:

Fetching from npm failed: No compatible version found: git@'github.com:ekuwang/cordova-plugin-statusbar.git'
Valid install targets:
["0.1.0","0.1.1","0.1.2","0.1.3","0.1.4","0.1.5"]
Error: No compatible version found: git@'github.com:ekuwang/cordova-plugin-statusbar.git'
Valid install targets:
["0.1.0","0.1.1","0.1.2","0.1.3","0.1.4","0.1.5"]
    at installTargetsError (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/node_modules/npm/lib/cache.js:719:10)
    at /usr/local/lib/node_modules/cordova/node_modules/cordova-lib/node_modules/npm/lib/cache.js:638:10
    at saved (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/node_modules/npm/node_modules/npm-registry-client/lib/get.js:142:7)
    at /usr/local/lib/node_modules/cordova/node_modules/cordova-lib/node_modules/npm/node_modules/graceful-fs/polyfills.js:133:7
    at FSReqWrap.oncomplete (fs.js:95:15)

Any solution? How you made it work?

11

Hmm, I just ionic plugin add https://github.com/ekuwang/cordova-plugin-statusbar.git and it worked fine for me.

12

I think this has also been documented as a formula as well. http://learn.ionicframework.com/formulas/customizing-the-status-bar/

Comparing the formula to the current docs for cordova-plugin-statusbar, it looks like the formula could use some updating.

13

Did you manage to get this working? I tried but can’t get it to work at all

14

I’ve installed the plugin but sometimes it work and sometimes not, when it works, if i touch the statusbar it hides and goes fullscreen, even the navbar hides. What i can do? Help please :sweat_smile:

15

The link http://www.martinadamko.sk/posts/translucent-bar-android-278 does not work any more. Is it possible to post the entire solution?

16

Just making the page below the single go to location for the solution for Ionic2:

17

If someone is looking for solution for Ionic5 check this