Android Status Bar Transparent


#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


#5

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

[https://ionicframework.com/docs/api/components/toolbar/Header/]


#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):