Transparent status bar not working with windowTranslucentNavigation="false"

Question

I am developing an Activity where I need to make the navigation bar opaque, and the status bar transparent on devices running 5.0+ (API 21+). The styles I am using are below, along with an explanation of my problem.

AppTheme extends Theme.AppCompat.Light.NoActionBar

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

FullscreenTheme extends AppTheme

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

This makes the app look like this

If I remove the android:windowTranslucentNavigation style, or set it to false in Fullscreen, it fixes the navigation bar issue. The problem is the status bar turns completely white instead of staying transparent and displaying the content behind it.

I have tried using fitsSystemWindow="true" in my layouts, but it didn't fix the issue. Anyone know why this is happening?

Solution 1

android:windowTranslucentNavigation does one thing that android:statusBarColor doesn't do, which is requesting the SYSTEM_UI_FLAG_LAYOUT_STABLE and SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN flags.

These are the ones that you need to request in order to draw behind the status bar.

Request them in the onCreate of your Activity:

getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

Alternatively you can also simply set your apps theme background and that will also pop up behind your status bar.

More information here.

Solution 2

As far as I know there's no proper way to set the color of the status bar on APIs lower than 19.

For API 19+ you can use a similar attribute to windowTranslucentNavigation only for the status bar:

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

Notes:

• The reason you were getting a white status bar is because of

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

• There are some hacks that work on specific manufacturer devices, but I wouldn't use them myself.

Solution 3

I struggle with this for over 3 hours. Wrap everything in a CoordinatorLayout it is the only one that seems to pay attention to the fitsSystemWindow="true" or "false"

This is my main activity fragment

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include layout="@layout/layout_google_map"/>

    <include layout="@layout/layout_toolbar_transparent"/>

    <include layout="@layout/layout_action_buttons"/>

    <include layout="@layout/layout_bottom_sheet"/>

</android.support.design.widget.CoordinatorLayout>

this is my toolbar layout

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:theme="@style/ToolbarTheme"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <android.support.v7.widget.AppCompatImageView
            android:layout_width="wrap_content"
            android:layout_height="?actionBarSize"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center"
            android:adjustViewBounds="true"
            app:srcCompat="@drawable/ic_fynd_logo_red"/>

    </android.support.v7.widget.Toolbar>
</android.support.design.widget.CoordinatorLayout>

as you can see, my fragment layout makes the google map be drawn under the status bar.

I have an action bar where the company's logo goes.

And other ui buttons "layout_action_buttons" also wrapped in a Coordinator layout , so the fitsSystemsWindows works.

Check it out.