How to enable the translucent status and navigation bar

Android 4.4 (also known as KitKat) introduced a way for developers to make the background of the status and navigation bars translucent and draw under them. This is the effect that can be seen in the homescreen of the Nexus 5 (or rather the Google Experience launcher): the status bar and the navigation bar are both translucent, with part of the background showing behind them. These features can also be used in apps, allowing developers to further enhance the look-and feel.

Translucent system bars

Usage is quite easy, it took only a few minutes to include it in our app and make the necessary adjustments. Just set the theme to Theme.Holo.NoActionBar.TranslucentDecor or Theme.Holo.Light.NoActionBar.TranslucentDecor to achieve the effect. This will make both the status bar (where the notification icons appear) and the navigation bar (if the device is not equipped with hardware nav keys) translucent, allowing the app to use the space behind them. This is particularly cool with lists or other vertically scrolling mechanisms: the content also runs through below the translucent system bars.

If you only want to extend the background (eg. don’t want to put views under them), set the fitsSystemWindows property to true. This will not increase the available screen estate for your views, so the bounds remain the same as with solid system bars, but the background will spread below the status bar and the navigation bar. Don’t forget: using this theme will increase the height of the parent view by the status bar (25 dp) and if available, the navigation bar. The latter can be calculated with this line:

getResources() .getDimensionPixelSize(getResources().getIdentifier("navigation_bar_height", "dimen", "android")

Of course, you also have the choice of selecting which system bar you’ll want to use in translucent mode, just add a few lines to the theme definition; you can also use it paired with the ActionBar. The following will show you how:

<style> <item name="android:windowTranslucentStatus">true</item> <item name="android:windowTranslucentNavigation">true</item> </style>

So there you have it, only a few extra lines of code will make your app much more easy on the eyes, translucent bars is a feature definitely worth to use above a certain API level. You can find more info here.