Transparent Status Bar on Ionic

Ionic Framework ionic-v3
4

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): 
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

            getWindow().getDecorView().setSystemUiVisibility(
                    View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
                            View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    //Status bar color, set to whatever opacity/color you want
        getWindow().setStatusBarColor(
                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