Cordova Android status Bar set to transparent

Question

I am trying to use this plugin below to set the statusbar to transparent. But i can not achieve it, i can change it to different colours, but not transparent. https://github.com/apache/cordova-plugin-statusbar

Also it works on my Android 5.0.2, but not 5.0.

I tried just leaving out the hexcode value like they suggested but doesnt work, i tried all those below, none of those set my statusbar to transparent.

<preference name="StatusBarBackgroundColor"/>

    <preference name="StatusBarStyle" value="lightcontent" />



if (cordova.platformId == 'android') {
StatusBar.styleBlackTranslucent();
}

Did you ever have any luck with this? I have the same issue – Giovanni Sep 03 '16 at 20:09 — Giovanni, Sep 03 '16 at 20:09
Not on Android 5.0....only on the versions after that – John Sep 07 '16 at 02:48 — John, Sep 07 '16 at 02:48

score 8 · Answer 1 · answered May 18 '20 at 10:00

I tried so long to fix this issue. There is no documentation how to make status bar transparent for Android included paddings for the <ion-header>

So here is how i fixed it. After platform ready in app.component.ts:

if (this.platform.is('android')) {
   Plugins.StatusBar.setOverlaysWebView({overlay: true});
   Plugins.StatusBar.setBackgroundColor({color: '#33000000'});
}

Don't set background color if you want your status bar transparent. In my case it will be a black status bar with 20% opacity.

And DONT'T FORGET to force Ionic for the statusbar padding when you import its modules in app.module.ts. Otherways your header will be sticky to the status bar:

IonicModule.forRoot({_forceStatusbarPadding: true})

Versions:

ionic-native/status-bar: ^5.0.0
capacitor/android: ^2.1.0

Is there any reason that "_forceStatusbarPadding" is still not documented in Ionic docs? ^^ — Pierre, Nov 06 '21 at 14:51
_forceStatusbarPadding is an internal parameter, they dont recommend to use it, but i couldnt find another way to get the status bar padding https://github.com/ionic-team/ionic-framework/issues/15624#issuecomment-447091433 — Mert Aksoy, Nov 06 '21 at 19:50

score 3 · Answer 2 · answered Mar 11 '21 at 11:43

Using IONIC Native Status Bar Plugin

app.component.ts:

import { Platform } from '@ionic/angular';
import { StatusBar } from '@ionic-native/status-bar/ngx';
...
...
constructor(private platform: Platform, private statusBar: StatusBar){
  this.initializeApp();
}

initializeApp() {
  this.platform.ready().then(() => {
    this.statusBar.overlaysWebView(true);
    this.statusBar.backgroundColorByHexString('#33000000');
  });
}

app.module.ts:

IonicModule.forRoot({_forceStatusbarPadding: true})

score -5 · Answer 3 · edited Jul 25 '18 at 22:17

-5

I just found it, its not mention in their documentation, but its simple as that:

<preference name="StatusBarBackgroundColor" value="transparent" />

And voilà, Its working :)

edited Jul 25 '18 at 22:17

Brian

3,850
3
21
37

answered May 28 '16 at 21:08

Eran Levi

877
2
12
31

@Eusthace You need to install the plugin StatusBarBackgroundColor first `cordova plugin add cordova-plugin-statusbar` See https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/#statusbarstyleblacktranslucent – odiseo Aug 14 '17 at 21:36
1

Adding the above line to config.xml does not make status bar transparent at all. – Angel Todorov Jul 11 '18 at 12:01
This is an old comment, I guess they removed it since then. – Eran Levi Nov 08 '20 at 08:05

Cordova Android status Bar set to transparent

3 Answers3

Linked