Expand Your Brand With Translucent System UI

Written by: on November 20, 2013

One of the best features of Android has always been the ability to customize UI elements to better fit with your application's visual identity.

Translucent system UI
Translucent status and nav bar with fitsSystemWindows

With the release of Android 4.4, Google has finally removed the bright holo blue from the system UI elements that are present while your application is running. This improvement will instantly apply to all applications, but for your next release you can now make your app stand out by using the new translucent system bars. There are two styles you can manipulate to enable the translucent system bars: windowTranslucentStatus and windowTranslucentNavigation.

Setting windowTranslucentStatus to “true” in your theme will fill the area behind the top status bar. Setting windowTranslucentNavigation to “true” in your theme will fill the area behind the bottom navigation area with your view (on devices that have software buttons). By default, activating these styles will flow content behind the system bars (and the action bar if it exists). If you are attempting to just extend a background style, then setting fitsSystemWindows to “true” will add padding back to your view which will restore your layout to normal bounds while still extending the window background.

If you choose to set fitsSystemWindows to “false” and flow your content under the system UI, you will need to manually manage the space around your views to ensure the user can still reach the content.

What’s next?

This leads us to an important design discussion. Just because we can paint behind the system UI doesn’t mean we should. There are many cases where this kind of styling can be inappropriate. If your view has an action bar extending the background into the status bar, it can be a challenging design problem. The action bar is visually raised above the background, making the peaking window background a little awkward for most action bar scenarios. There are exceptions, of course.

The guys over at Android Design In Action have given us a peek at a full bleed map with a translucent action bar. This particular case works great and really emphasizes the content across the entire screen without disrupting navigation like full screen and immersive mode will.

Last of all, Jeff Gilfelt has created a library to help tint the system bars. He uses a few tricks to place views right under the system UI. If you have content that expands beyond the boarders of the screen, this library will easily allow you to bridge the action bar to the system UI in addition to theming the navigation area. Even if you don’t plan on theming the system bars, it is worth looking at Jeff’s code for some insights into manually grabbing the height of the status bar, action bar and navigation bar.

These new style options offer a great opportunity to expand your application beyond the normal window. Since they are enabled by adding just a few lines to your theme, I encourage everyone to give them a try.

This piece is the eighth of eight in our KitKat Developer’s Guide. For more Android insights, add Insights to your RSS feed or follow us on twitter.

Casey Vincent

Casey Vincent

Casey Vincent is a senior engineer at Double Encore, specializing in Android Development. Casey also has a passion/weakness for Windows Phone devices and cake.
Article


Add your voice to the discussion: