Android’s System Bars And Your Interface – Whether And How To Theme

April 25, 2015 - photo frame

Google updated a pattern spec recently. The component spec, that Google says is a vital request (as evidenced by a ongoing updates), gained serve superintendence on floating movement buttons, dialogs, updates on typography, and a lot more.

One less-advertised refurbish was a change to a territory in “Structure” concerning a navigation bar in Android. The “color variants” calm is still matching to that from a “status bar” subsection, though an picture arrangement nav bars themed to compare your device’s hardware was removed. Here’s a picture in question:

Screen Shot 2015-04-24 during 1.39.01 AM

Theming according to device tinge is – as distant as this author knows – not probable on Android during a moment, and conjunction is theming a nav bar to a “light style” various also shown in a guidelines, where a nav bar is white and a buttons spin gray.

But those dual discrepancies aside, a change brought a doubt behind to a tip of my mind that’s been rolling around for a while now – if Google’s discipline had “usage” recommendation for nav bar theming, what would it say? When is it suitable to thesis a navigation bar, and when isn’t it? How does a navigation bar describe to a standing bar, and how do both of them describe to a tangible app you’re using?

I suspicion it competence be fun to try these questions in essay (and pictures), so let’s get started.

Mixed signals

Part of a difficulty when it comes to theming Android’s complement bars, we think, comes from a fact that Google seems to send churned signals on a subject. The component spec is meagre on guidance, though demonstrates dark, light, translucent, and pure variations, and – until recently – colored variants. Meanwhile Google’s developer documentation creates no skeleton about when to theme:

When we customize a navigation and standing bars, possibly make them both pure or cgange usually a standing bar. The navigation bar should sojourn black in all other cases.

It’s tough to immediately see that is correct, but it’s easy to see what’s possible. After all, developers can set navigationBarColor to whatever they want, and as we explained in Your Brand Can Survive A Material Redesign using colors in an interface can be critical to progressing peace between your code and a interface itself. So meaningful that, because not theme?

It seems there are dual possibilities that could explain a churned signals: one, that a component pattern spec indeed reflects an opinion or truth toward nav bar theming that has nonetheless to be totally spotless adult or two, that a developer support is a source that’s incorrect, and Google skeleton to yield central superintendence or examples of theming in a future.

Either way, to get to a base of a emanate it’s required to take a demeanour during a truth behind theming a complement bars.

System bars and apps – another plane

The complement bars are not material, and don’t act according to a same manners – they exist on another craft outward a interface. The usually component in possibly of a complement bars that indeed impacts a app you’re now regulating – in terms of communication – is a behind button, so it’s easy to see a subdivision between complement bars and apps. The complement bars are some-more critical to a device in general than they are to the app in specific.

But even within this apart plane, there’s serve eminence between a dual bars.

While both bars are eccentric of a app itself, one is many closer than a other. Consider a position of both complement bars. The standing bar is roughly always adjacent to an app’s toolbar, where a app’s primary tinge is established. The navigation bar, meanwhile, lives all a proceed opposite a arrangement past all a app’s content, during a really bottom of a screen. So cruise a manifest impact of coloring any bar according to a app’s primaryDark color.

On one hand, a standing bar is right subsequent to a clearly determined primary tinge and nothing else. On a other hand, a navigation bar is a possess tinge retard vital subsequent to whatever calm comes a way.

Of march a apparent hole in this outline would distortion in scrolling divided a toolbar when a user scrolls by a straight set of content. See a Play apartment of apps for example.

Screenshot_2015-04-25-01-22-11 Screenshot_2015-04-25-01-23-21 Screenshot_2015-04-25-01-23-44 Screenshot_2015-04-25-01-24-23

I would disagree that this use of a standing bar is especially a duty of continuity. Negotiating a mutation from themed to dim or from themed to unclouded would outcome in larger manifest attrition than simply progressing a tinge until a toolbar is corkscrew behind into perspective (as shortly as a user scrolls adult a few pixels). The apparent outlier to this trend is Newsstand. Ever a pattern rebel, Newsstand doesn’t thesis a standing bar during all.

To thesis or not to theme

Accepting a proof above means substantiating that theming a standing bar can (and arguably should) be implemented often, while theming a nav bar should ideally be implemented reduction often. So when is it suitable to change a nav bar? There are a few cases that come to mind, that I’ve illustrated for this post.

The initial box is one already mentioned by Google’s spec – a unclouded nav bar. This various of a nav bar should be used when we wish users to be means to look during approaching content, though a calm is a formidable picture or set of images.

Google’s picture is of a black bar during about 20% opacity, though we cruise a unclouded bar is indeed one of a improved opportunities for theming with a app’s darker primary tinge during 40% opacity. See an instance in a picture below. The outcome is pointed though feels agreeable with a standing bar though apropos too concerned in the tangible interface.


A second instance Google gives is a pure bar, with a reason that it should be used over an even-toned image. The pattern spec isn’t pure on what should be going on with a standing bar, and while a dev doc is clear, for a consequence of this practice let’s see an instance with and though a pure standing bar. This is kind of a singular use. After all, carrying a square of manifest calm with an even adequate tinge to not disquiet a navigation buttons isn’t really common. And a pattern spec isn’t job for a gradient-laden proceed taken by apps like Google Search – it shows a totally pure nav area.

So, does this use mangle a above logic by bringing a nav buttons usually a little too tighten to a interface? Personally, we think in many contexts it does, though if there isn’t formidable calm (like formidable images or text) issuing behind a nav, this competence indeed be okay. The nav bar is deemphasized, though as prolonged as it isn’t thesis to a whims of a app’s content, it won’t get too tangled adult in a interface.

Of march accomplishing this in an app that isn’t usually a full-screen print would be difficult. In a recipe app instance below, a tangible “recipe” and “comments” tabs would substantially have to lie a window support by slicing off calm before it got to a nav bar.


Photo: Cristian Bortes under CC BY-SA 2.0 Recipe: Saveur

Outside of those dual variants and a customary black nav bar, a usually other various shown in a pattern spec is a “light” character nav bar – a white bar with gray buttons. This doing hasn’t seemed anywhere nonetheless unless you’ve got tinge inversion switched on, and given – as distant as I’m wakeful – it isn’t probable for a normal app to tinge a tangible navbar icons, we’ll omit that character for now.

So what other possibilities are there? The answer isn’t clear-cut, as a following examples are rarely contingent on a needs and inlet of a particular app.

One superficial instance is a Google Now shade inside Google Now Launcher. When a Google app is accessed from another launcher, a complement bars are both black, though when accessed from Google’s launcher, both have slope credentials protection.

As with a colored standing bar in a Play suite, we would contend this theming choice is done for smoothness – a launcher uses gradients to strengthen a standing bar and nav bar so opening a Google app, that indeed lives “in” a launcher itself, should continue that manifest style.


Another box competence be a media actor that shows cover art or other manifest media during full frame. If we wish a app to keep complement bars manifest during playback, unclouded bars could be employed, though entirely colored bars could work too. This is really a non-standard approach, though one that could help to deemphasize a complement bars though creation them harder to see.


Photo: Cristian Bortes under CC BY-SA 2.0 Recipe: Saveur

Final thoughts

In a end, either – and how – a bars should be themed will depend on a specific context and calm of an particular app. That said, there are a few cases where theming a bars will always be appropriate, if we select to theme. Hopefully a examples above have illustrated some of those in a proceed that creates sense. Outside of that, as prolonged as a preference is deliberate carefully, holding into comment a roles of both bars and their attribute to a app itself, all should spin out well.

small.wp_rp_excerpt { line-height:115%; font-style:normal; } .related_post_title { } ul.related_post { line-height:120%; } ul.related_post li { list-style-type:none; clear:both; margin:0 0 0 3px; } ul.related_post li a { font-weight: bold; display:block; margin:0 0 5px 0; } ul.related_post li a:hover { text-decoration:underline; } ul.related_post li A img { width:130px; height:auto; }

More frame ...

› tags: photo frame /