Toolbar on top of Appbar - CoordinatorLayout

Question

I struggled with AppBarLayout / Toolbar / CoordinatorView . You want the Toolbar slide up the scroll bar and immediately return to scroll down (for example, most reading applications, g + example). However, this is what I get:

Normal:

Little scroll:

Full scrolling:

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 read a lot of blog posts, but none of their configurations seem to work for me. Hiding on scrolling up / showing on scrolling down works fine, only Toolbar moves around the application bar. Checking the hierarchy of the Android View I see that they Toolbar are above the blue application bar and they move together.

EDIT 1

Removing fitsSytemWindows=true from CoordinatorLayout leads to the expected behavior, but the application panel turns white, regardless of the bg color for CoordinatorLayout :

I assume that the behavior has not really changed, that it happened that it no longer covers the application bar, so the toolbar does not go through 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 this:

 app:layout_scrollFlags="scroll|enterAlwaysCollapsed" 

What could you add to your CollapsingToolbarLayout . enterAlwaysCollapsed is a good practice for CollapsingToolbarLayout , not Toolbar .

UPDATE: And I saw several problems in layouts and identifiers.

For example, I'm not sure if you saw it or not, but I will explain it. Firstly, Toolbar id: id_toolbar , which in onCreate :

 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 , the name of which comes from Manifest → android:label , and you need to change it (if you want to change it, do it programmatically.)

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

Just add this to your Toolbar :

 app:layout_scrollFlags="scroll|enterAlways" 

And finally, here you can see my answer about this: fooobar.com/questions/1242178 / ...

What we have:

Update: I have not used:

 android:fitsSystemWindows="true" 

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

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

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

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

This gives appropriate behavior and appearance.