Transparent actionBar and statusBar in Android lollipop

Question

I am trying to create this interface :

And here is my actual result :

• The status bar is well transparent and we see my image as background : OK
• The action bar is not transparent : NOK

Here is the code of my theme that I use for this activity :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- inherit from the material theme -->
    <style name="MaterialAppDetailTheme" parent="android:Theme.Material.Light">

        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowActionBarOverlay">true</item>

        <!-- enable window content transitions -->
        <item name="android:windowContentTransitions">true</item>

        <!-- specify shared element transitions -->
        <item name="android:windowSharedElementEnterTransition">
            @transition/change_image_transform</item>
        <item name="android:windowSharedElementExitTransition">
            @transition/change_image_transform</item>

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

    </style>
</resources>

Solution 1

You can change your toolbar color to transparent like this:

mToolbar.setBackgroundColor(getResources().getColor(android.R.color.transparent));

You can change it's background on the XML too:

android:background="@android:color/transparent"

Or if you're using ActionBar:

getSupportActionBar().setBackgroundDrawable(new ColorDrawable(getResources().getColor(android.R.color.transparent)));

Use getActionBar() if you're not using ActionBarActivity

Result:

Solution 2

Use this style:

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:textColorPrimary">@color/my_text_color</item>
    <item name="colorPrimary">@android:color/transparent</item>
    <item name="windowActionBarOverlay">true</item>
</style>

Solution 3

For API that >= 21, add to theme these lines of code

<item name="android:windowDrawsSystemBarBackgrounds">true</item> <item name="android:statusBarColor">@android:color/transparent</item>

Don't forget to add

android:fitsSystemWindows="true"

Comments

[Nikola Despotoski]

He needs to add additional marginTop to the size of the status bar, if he uses fitSystemWindow in theme/layout xml. Otherwise, status bar bottom line will be on the navigation icon, which doesn't look good.

[Pedro Oliveira]

I suppose he got that covered since the only problem he described was the fact that his actionbar was not transparent. The current screen was just something I built just to show the effect.

[Nikola Despotoski]

Yep, just as precaution. :)