Android transparent status bar and actionbar

Question

I've done a few researches on this topic and I couldn't find a complete solution so, step by step and with some trial and error, I finally find out how can we achieve these results: having a transparent or coloured Actionbar and Statusbar. See my answer bellow.

Answer 1

I'm developing an app that needs to look similar in all devices with >= API14 when it comes to actionbar and statusbar customization. I've finally found a solution and since it took a bit of my time I'll share it to save some of yours. We start by using an appcompat-21 dependency.

Transparent Actionbar:

values/styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light"> ... </style>  <style name="AppTheme.ActionBar.Transparent" parent="AppTheme">     <item name="android:windowContentOverlay">@null</item>     <item name="windowActionBarOverlay">true</item>     <item name="colorPrimary">@android:color/transparent</item> </style>  <style name="AppTheme.ActionBar" parent="AppTheme">     <item name="windowActionBarOverlay">false</item>     <item name="colorPrimary">@color/default_yellow</item> </style> 

values-v21/styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light">     ... </style>  <style name="AppTheme.ActionBar.Transparent" parent="AppTheme">     <item name="colorPrimary">@android:color/transparent</item> </style>  <style name="AppTheme.ActionBar" parent="AppTheme">     <item name="colorPrimaryDark">@color/bg_colorPrimaryDark</item>     <item name="colorPrimary">@color/default_yellow</item> </style> 

Now you can use these themes in your AndroidManifest.xml to specify which activities will have a transparent or colored ActionBar:

    <activity             android:name=".MyTransparentActionbarActivity"             android:theme="@style/AppTheme.ActionBar.Transparent"/>      <activity             android:name=".MyColoredActionbarActivity"             android:theme="@style/AppTheme.ActionBar"/> 

Note: in API>=21 to get the Actionbar transparent you need to get the Statusbar transparent too, otherwise will not respect your colour styles and will stay light-grey.

Transparent Statusbar (only works with API>=19):
This one it's pretty simple just use the following code:

protected void setStatusBarTranslucent(boolean makeTranslucent) {         if (makeTranslucent) {             getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);         } else {             getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);         }     } 

But you'll notice a funky result:

This happens because when the Statusbar is transparent the layout will use its height. To prevent this we just need to:

SOLUTION ONE:
Add this line android:fitsSystemWindows="true" in your layout view container of whatever you want to be placed bellow the Actionbar:

    ...         <LinearLayout                 android:fitsSystemWindows="true"                 android:layout_width="match_parent"                 android:layout_height="match_parent">             ...         </LinearLayout>     ... 

SOLUTION TWO:
Add a few lines to our previous method:

protected void setStatusBarTranslucent(boolean makeTranslucent) {         View v = findViewById(R.id.bellow_actionbar);         if (v != null) {             int paddingTop = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT ? MyScreenUtils.getStatusBarHeight(this) : 0;             TypedValue tv = new TypedValue();             getTheme().resolveAttribute(android.support.v7.appcompat.R.attr.actionBarSize, tv, true);             paddingTop += TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());             v.setPadding(0, makeTranslucent ? paddingTop : 0, 0, 0);         }          if (makeTranslucent) {             getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);         } else {             getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);         }     } 

Where R.id.bellow_actionbar will be the layout container view id of whatever we want to be placed bellow the Actionbar:

...     <LinearLayout             android:id="@+id/bellow_actionbar"             android:layout_width="match_parent"             android:layout_height="match_parent">         ...     </LinearLayout> ... 

So this is it, it think I'm not forgetting something. In this example I didn't use a Toolbar but I think it'll have the same result. This is how I customize my Actionbar:

@Override     protected void onCreate(Bundle savedInstanceState) {         View vg = getActionBarView();         getWindow().requestFeature(vg != null ? Window.FEATURE_ACTION_BAR : Window.FEATURE_NO_TITLE);          super.onCreate(savedInstanceState);         setContentView(getContentView());          if (vg != null) {             getSupportActionBar().setCustomView(vg, new ActionBar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));             getSupportActionBar().setDisplayShowCustomEnabled(true);             getSupportActionBar().setDisplayShowHomeEnabled(false);             getSupportActionBar().setDisplayShowTitleEnabled(false);             getSupportActionBar().setDisplayUseLogoEnabled(false);         }         setStatusBarTranslucent(true);     } 

Note: this is an abstract class that extends ActionBarActivity
Hope it helps!

Answer 2

It supports after KITKAT. Just add following code inside onCreate method of your Activity. No need any modifications to Manifest file.

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {                 Window w = getWindow(); // in Activity's onCreate() for instance                 w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);             }