Overlay Action Bar With A Translucent Status Bar

I'm trying to achieve the effect shown here: http://www.youtube.com/watch?v=6QHkv-bSlds&t=15m48s by Nick and the boys. I can get the action bar to be overlayed, but cannot figu

Solution 1:

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

Have a look at line 300 in: https://github.com/jgilfelt/SystemBarTint/blob/master/library/src/com/readystatesoftware/systembartint/SystemBarTintManager.java

setupStatusBarView() Adds a view to the window's decor. This allows you to later set a color/drawable to this view.

If using the SystemBarTint library, the following will allow you to force the status bar to a specified color, which you can then match to your action bar's background:

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

In this case you would set your action bar's background to: #DD000000

Solution 2:

As described in the Android 4.4 APIs:

You can now make the system bars partially translucent with new themes, Theme.Holo.NoActionBar.TranslucentDecor and Theme.Holo.Light.NoActionBar.TranslucentDecor. By enabling translucent system bars, your layout will fill the area behind the system bars, so you must also enable fitsSystemWindows for the portion of your layout that should not be covered by the system bars.

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

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

Solution 3:

They are using the new Translucent system bars feature (on Android 4.4 and up).

Translucent system bars

You can now make the system bars partially translucent with new themes, Theme.Holo.NoActionBar.TranslucentDecor and Theme.Holo.Light.NoActionBar.TranslucentDecor. By enabling translucent system bars, your layout will fill the area behind the system bars, so you must also enable fitsSystemWindows for the portion of your layout that should not be covered by the system bars.

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