Overlay an action bar with a translucent status bar

Question

I am trying to achieve the effect shown here: http://www.youtube.com/watch?v=6QHkv-bSlds&t=15m48s by Nick and the boys. I can make the action bar overlay, but I can’t figure out how to extend it to the status bar. I would also like to know how they controlled the transparent black background behind the navigation bar (but this is not so important).

Any help / advice would be greatly appreciated as I currently don't know how to do this (and I'm starting to worry that this may be an image rather than a real implementation).

Edit: I know how to make panels completely transparent (this is the easy part)! I do not know how to expand the background of the action bar to appear behind the current status bar.

Answer 1

I had the same question and found this library: https://github.com/jgilfelt/SystemBarTint

Look at line 300 at: https://github.com/jgilfelt/SystemBarTint/blob/master/library/src/com/readystatesoftware/systembartint/SystemBarTintManager.java

setupStatusBarView() Adds a view to the window decor. This allows you to later set the color / pattern for this view.

If you use the SystemBarTint library, the following will cause the status bar to match the specified color, which can then be mapped to the background of your action bar:

 SystemBarTintManager tintManager = new SystemBarTintManager(this); tintManager.setStatusBarTintEnabled(true); tintManager.setStatusBarTintColor(Color.parseColor("#DD000000")); 

In this case, you set the background of your action bar: # DD000000

Answer 2

As described in the Android 4.4 API :

Now you can make the system panels partially translucent with new themes, Theme.Holo.NoActionBar.TranslucentDecor and Theme.Holo.Light.NoActionBar.TranslucentDecor . By enabling translucent system panels, your layout will fill the area behind the system bars, so you should also include fitsSystemWindows for parts of your layout that should not be covered by system buses.

If you are creating a custom theme, set one of these themes as the parent theme or enable the windowTranslucentNavigation and windowTranslucentStatus style properties in your theme.

In your case (where you want the ActionBar), the second option - including two new properties in your theme - will give you a translucent navigation and status bar.

Answer 3

They use the new feature of transparent system bars (on Android 4.4 and higher).

Transparent system panels

You can now make the system lattices partially translucent with new themes, Theme.Holo.NoActionBar.TranslucentDecor and Theme.Holo.Light.NoActionBar.TranslucentDecor. Due to the possibility of translucent system bars, your layout will fill the area behind the system bars, so you should also include fitsSystemWindows for parts of your layout that should not be covered by system buses.

If you are creating a custom theme, set one of these themes as the parent theme or enable windowTranslucentNavigation and windowTranslucentStatus Style Properties in your theme.