Transparent Status Bar on Ionic

Ionic Framework ionic-v3
1

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 (https://ionicframework.com/docs/v2/native/status-bar/), on ios he becomes only with white background and white text.

2

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

3

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

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
5

ok thank you so much for this response.

6

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

7

same here…

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

8

Hi,all
I solved it.
(thans @peterbetos @saademotion_dev)

Firstly, Please distinguish between toolBar and statusBar.The discussion hear is about statusBar.
So,
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.

image

3 Likes
9

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

10

Works perfectly! Thanks!

11 
C:\Users\Admin\sample_Amber\platforms\android\src\amber\company\com\MainActivity.java:37: error: package Build does not exist
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
         ^
C:\Users\Admin\sample_Amber\platforms\android\src\amber\company\com\MainActivity.java:37: error: package Build does not exist
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                                  ^
Note: C:\Users\Admin\sample_Amber\platforms\android\src\org\apache\cordova\splashscreen\SplashScreen.java uses or overrides a deprecated API.
:compileDebugJavaWithJavac FAILED

How can i fix this error?

12

same problem for me …how could you resolve?

13

Remember to add these packages in MainActivity.java.

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

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.

15

Same here, bad documentation.

16

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

app.component.ts

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

constructor(
private statusBar: StatusBar
) {
this.platform= platform;
this.platform.ready().then( () => {
this.statusBar.overlaysWebView(false);
this.statusBar.backgroundColorByHexString(’#30cfd0’);
});
}

app.module.ts

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

providers: [StatusBar]

17

color is changing but not getting transparent…

18

For Android check this solution