Translucent status/navigation bar support #601

toddwong opened this Issue Aug 17, 2015 · 12 comments


None yet

No description provided.

lscown commented Aug 18, 2015


extends #516

@toddwong toddwong changed the title from iOS translucent status/navigation bar support to Translucent status/navigation bar support Aug 18, 2015

I just knew that Android (above 4.4) has translucent system bars support, too. I change the issue title.

enchev commented Sep 11, 2015

copied from #516

Right now the status bar inherits the colour from it's ActionBar/NavigationBar. This is not so great when you have a hidden ActionBar.

It would be great to be able to hide the status bar or add custom colours to it.

CSS property suggestions:


Would be great to have the status bar transparent as well. This goes for both iOS and Android (I believe the Android one overlays the background content.)

@N3ll N3ll added this to the 1.5 (Under Review) milestone Oct 12, 2015
@atanasovg atanasovg removed this from the 1.5 milestone Nov 26, 2015
@N3ll N3ll added this to the 1.6.0 (Under Review) milestone Dec 15, 2015

Is this still targeting the 1.6 milestone? Super common use case. I could use this support now for a simple demo app. :)

@hshristov hshristov self-assigned this Feb 8, 2016

I created a plugin to do this because I find myself doing it every single time I build an app. It's hard to explain to new {N} devs about navigation controllers and such. The plugin makes it just one line of markup.

<x:StatusBar barStyle="light" />


Looks like this is going to hit in 1.7, so hopefully we can deprecate this plugin then.


I'll note that I can only get setBarStyle to work when the ActionBar is present. When it is not, the StatusBar is always white. I thought that the StatusBar was transparent by default as of iOS 7. is there some setting I need to get the page all the same color besides just...

page {
    background-color: #336699;


@burkeholland The Page has a boolean backgroundSpanUnderStatusBar property that works for iOS and you can set it in XML (does not work in CSS yet).


Thank you! Too easy.

Seems like this should be on by default to mimic the default iOS behavior?


We were discussing this internally today. It may very well become a default.


I vote for a default open in {N}, this is a core app style thing, not really a plugin, should be a property off Page or something

@enchev enchev added the T:Feature label Aug 9, 2016

@burkeholland and anyone what if I want an image to span under the status bar??



You can set background image for your Page via CSS and use the backgroundSpanUnderStatusBar property to span it under the status bar.


Page {
    background-image: url("~/images/logo");


<Page xmlns="" backgroundSpanUnderStatusBar="true" >
@toddwong toddwong closed this Jan 6, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment