Transparent Status Bar on Ionic


#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.


[SOLVED] Transparent status bar in Android
How to make status bar to be transparent in android
Ionc2- android: Splashscreen doesn’t transparent StatusBar
#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


#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.