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();
}

Answer 1

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