Android Status Bar Transparent

Ionic Framework ionic-v3
1

Hi everyone .

I want a status bar transparent on Android.
I used status bar plugin :

  • Added this in config.xml for android platform :
       <preference name="StatusBarOverlaysWebView" value="true" />
       <preference name="Fullscreen" value="true" />

And this in app.component.ts (after platform ready) :

      this.statusBar.styleBlackTranslucent();

I obtain this result :
image

The app is in fullscreen, and the transparent status bar appeared when I scroll down at top of my App.

How can I achieve this without fullscreen mode and have the status bars that overlay the webview with transparent effect ? Like this :
image

Thanks for any help :slight_smile: and Happy new Year and coding

2

Update :

I found this :

which give me this result in test :
image

Is there an easy way to adapte the padding of the header ? (the header height should be : header height + status bar height )

3

modifiying the css/scss for the header.

what does that do showUnderSystemUI()?

can’t you cheat by setting this.statusBar.backgroundColorByHexString('#ffffff'); to a little bit darker color with this plugin: https://ionicframework.com/docs/native/status-bar/?

4

I don’t achieve it with status bar.
showUnderSystemUI is like showUnderStatusBar but with bottom bar too, I want only under StatusBar

The first expected result I wanted :
image

1 Like
5

ah a gradient… then you have to do the css/sccs route. (thinker around with $navbar-md-height in your theme/variables.scss)

[ion-header: Header Parent Component for Ionic Framework Apps]

6

I have the gradient . (Look at my first comment).

The problem was with statusbar, i couldn’t have the gradient effect.

My second answer was just a test with Ionic FullScreen plugin.
I will try the variable u give me

7

If your Status Bar overlaps your Header/Toolbar be sure that you have this line of code in your index.html file:

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Another Solution would be this if you running on Android:

Another Solution would be this Cordova Plugin (+ Step by Step Guide):

8

Hi guys …

I actually have the same problem …

Do you have one solution working today ?

The super bar from jeneser is working but cause a bug with the keyboard who show above the input…

9

Hi, how did you achieve the black font on the status bar ?

10

added this to app.component.ts after platform ready : this.statusBar.backgroundColorByHexString(‘hex string of a darker shade of the toolbar color i.e. #3880ff’);

1 Like