Translucent StatusBar on kitkat with FrameLayout above the Toolbar and using CoordinatorLayout

Question

I was trying to achieve Translucent StatusBar on kitkat with the following FrameLayout and it's working without CoordinatorLayout like this:

Layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:weightSum="1">

    <FrameLayout
        android:id="@+id/statusbar"
        android:layout_width="match_parent"
        android:layout_height="25dp"
        android:background="@color/colorPrimaryDark" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="@color/colorPrimary" />

</LinearLayout>

And this line in Styles.xml-v19 of course:

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

And of course in the onCreate:

if (Build.VERSION.SDK_INT < 19) {

            FrameLayout statusbar = (FrameLayout) findViewById(R.id.statusbar);
            statusbar.setVisibility(View.GONE);
        }

And that worked:

But, i'm wondering how we can achieve that with CoordinatorLayout and AppbarLayout?

Here is my try by the way:

<android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/toolbarCollapse"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <FrameLayout
                    android:id="@+id/statusbar"
                    android:layout_width="match_parent"
                    android:layout_height="25dp"
                    android:background="?attr/colorPrimaryDark" />

                    <android.support.v7.widget.Toolbar
                        android:id="@+id/toolbarmain"
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        android:background="@color/ColorPrimary"
                        app:layout_scrollFlags="scroll|enterAlways"
                        app:popupTheme="@style/ToolbarStylepopuptheme"
                        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />


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

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary"
                android:minHeight="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:tabIndicatorColor="@android:color/white"
                app:tabIndicatorHeight="2dp"
                app:tabMode="scrollable" />

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

And didn't work.

Update: Also this one is not working:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".ui.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@+id/statusBar"
            android:layout_width="match_parent"
            android:layout_height="25dp"
            android:background="@color/colorPrimaryDark"
            android:translationZ="8dp" />

        <android.support.design.widget.CoordinatorLayout
            android:id="@+id/root_coordinator"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.v4.widget.NestedScrollView
                android:id="@+id/nestedscrollview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

...
...

Any solutions to achieve that?

Something like ADM app on GooglePlay design.

Also, let's mention that, i've had the same problem with SystemBarTint when i was using CoordinatorLayout(same condition).

I couldn't figured out how they could do that.

Also, there is a good tutorial here, https://youtu.be/YCThIedqbCQ but it doesn't work for me.

Answer 1

Can you not just do this? It seems like you're moving your faux status bar into the Coordinator layout when you don't need to?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="1">

<FrameLayout
    android:id="@+id/statusbar"
    android:layout_width="match_parent"
    android:layout_height="25dp"
    android:background="@color/colorPrimaryDark" />

<Coordinator>
    <AppBarLayout>
        <CollapsibleToolbarLayout>
            <Toolbar/>
        </CollapsibleToolbarLayout>
    </AppBarLayout>
    <NestedScrollView/>
</Coordinator>
</LinearLayout>