Toolbar going on top of Appbar - CoordinatorLayout

Question

I've been struggling with the AppBarLayout / Toolbar / CoordinatorView . Want the Toolbar to slide up on scroll, and return immediately on scroll down (like most reading apps, g+ is an example also). However, this is what I'm getting:

Normal:

A little scroll:

Full scroll:

This is my code:

<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="main.MainActivity">

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

        <android.support.v7.widget.Toolbar
        android:id="@+id/id_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
        android:title="Hello World"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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


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

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

main__activitycontent :

<android.support.v4.widget.NestedScrollView
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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="main.MainActivity"
tools:showIn="@layout/main__activity">

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/text_margin"
    android:text="@string/large_text"/>

</android.support.v4.widget.NestedScrollView>

I've been reading a lot of blog posts, but none of their configs seems to work for me. The hide on scroll up/show on scroll down works fine, only the Toolbar is moving over the appbar. Checking the Android View Hierarchy I see that they the Toolbar is above the dark blue appbar, and they move up together.

EDIT 1

Removing the fitsSytemWindows=true from the CoordinatorLayout leads to the expected behavior, but the appbar becomes white, no matter the bg color for the CoordinatorLayout :

My guess is that the behavior actually didn't change, what happend is that it doesn't cover the appbar anymore, so the toolbar doesn't go over it.

EDIT 2

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>

</resources>

EDIT 3

package main;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

import com.ee.oef.refactor.R;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main__activity);
    Toolbar toolbar = (Toolbar) findViewById(R.id.main__toolbar);
    setSupportActionBar(toolbar);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main__menu, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}
}

Answer 1

The problem is in the:

app:layout_scrollFlags="scroll|enterAlwaysCollapsed"

Which you could add this to your CollapsingToolbarLayout . enterAlwaysCollapsed is a good practice for CollapsingToolbarLayout and not the Toolbar .

UPDATE: And i've seen few problems in the layouts and the ids.

For example, not sure you saw that or not but i'll explain that.The first thing is, Toolbar 's id: id_toolbar which in the onCreate is:

Toolbar toolbar = (Toolbar) findViewById(R.id.main__toolbar);

So, just change it to:

<android.support.v7.widget.Toolbar
            android:id="@+id/main__toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Ps: i just deleted the title and Scrollflag which the title is coming from Manifest -> android:label and you need to change it.(if you want to change it, do it programmatically.)

and return immediately on scroll down (like most reading apps, g+ is an example also).

Just add this to your Toolbar :

app:layout_scrollFlags="scroll|enterAlways"

And finally, here you can see my answer about this one: https://stackoverflow.com/a/35241363/4409113

Which we have:

Update: I didn't use:

android:fitsSystemWindows="true"

In the CoordinatorLayout too. as you can see the example here:

https://github.com/chrisbanes/cheesesquare/blob/master/app/src/main/res/layout/include_list_viewpager.xml

Update: To solve the white toolbar problem, set on values-v21/styles.xml:

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

This gives the appropriate behavior AND appearance.