Transparent Status Bar on Ionic

Hi to all. Sorry for my English :smile_cat:
Help me plz doing Status Bar with transparent background and white text for ios and android.
When i used any code from this documentation (, on ios he becomes only with white background and white text.

Can you please share what you want to achieve? Also, what code have you tried already?

Everything is ok now. I looked through in app Ionic View

This is for those who needed the answer on how to implement this in Ionic2 for Android:

  1. On MainActivity java file on Android platform folder, paste the following code after super.onCreate() (thanks @saademotion_dev):
                    View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
    //Status bar color, set to whatever opacity/color you want
                ContextCompat.getColor(this, R.color.status_bar_transparet));  }
  1. On the variables.scss inside the theme folder, have this included on the Material Design section:

.platform-android5 {
ion-header {
margin-top: 20px;

.platform-android6 {
ion-header {
margin-top: 20px;

.platform-android7 {
ion-header {
margin-top: 20px;

  1. Lastly, on your config.xml file on the root, add an alpha channel on your existing status bar color:
<preference name="StatusBarBackgroundColor" value="#551b1d23" />

That’s it folks, you have your status bar transparent for your Ionic2 app. Hope that helps everyone using Ionic2.

1 Like

ok thank you so much for this response.

Hi, After i add these code to in CORDOVA
I got error: “package Build does not exist” whene build the app.
How can i fix this error?

same here…

/Users/leo/Documents/myApp/platforms/android/src/com/ionicframework/myapp635554/ error: cannot find symbol

I solved it.
(thans @peterbetos @saademotion_dev)

Firstly, Please distinguish between toolBar and statusBar.The discussion hear is about statusBar.
You can simply use cordova-plugin-statusbar StatusBar.styleBlackTranslucent() achieve it on IOS and WP. That’s ok.But android is so poor…

Don’t worry!If you want a Translucent statusBar for android or another platforms.Look at the following demo.



Awesome! :tada::tada::tada:
Upgrade to Ionic 3+
I did some work so that each platform did not affect each other… Learn more

Works perfectly! Thanks!

C:\Users\Admin\sample_Amber\platforms\android\src\amber\company\com\ error: package Build does not exist
C:\Users\Admin\sample_Amber\platforms\android\src\amber\company\com\ error: package Build does not exist
Note: C:\Users\Admin\sample_Amber\platforms\android\src\org\apache\cordova\splashscreen\ uses or overrides a deprecated API.
:compileDebugJavaWithJavac FAILED

How can i fix this error?

same problem for me …how could you resolve?

Remember to add these packages in

import android.os.Build;
import android.view.View;

Hi can I install this using npm, I can’t make it work. Already git clone but when I run npm install, its not installing.

Same here, bad documentation.

Try this and hope it will work for you

Status Bar

$ ionic cordova plugin add cordova-plugin-statusbar
$ npm install @ionic-native/status-bar@beta


import { StatusBar } from ‘@ionic-native/status-bar/ngx’;

private statusBar: StatusBar
) {
this.platform= platform;
this.platform.ready().then( () => {


import { StatusBar } from ‘@ionic-native/status-bar/ngx’;

providers: [StatusBar]

color is changing but not getting transparent…

For Android check this solution