Develop Reference

How to put a custom view/layout pinned in CollapsingToolbarLayout ?

Background
The support/design library allows to have a nice resize-as-you-scroll effect, using AppBarLayout and CollapsingToolbarLayout :
http://material-design.storage.googleapis.com/publish/material_v_3/material_ext_publish/0B0NGgBg38lWWcFhaV1hiSlB4aFU/patterns-scrollingtech-scrolling-070801_Flexible_Space_xhdpi_003.webm
The problem
All examples I've seen are of Toolbar being the one pinned as you scroll.
What I'm trying to achieve is that a custom view will be pinned, in a size of a toolbar, while the content above it (some other views) will shrink as you scroll.
Something like that:
Thing is, no matter what I try, something doesn't work this way. Sometimes the content of the toolbar-replacement gets truncated, sometimes it doesn't get pinned, etc...
What I've tried
Since for some reason the Toolbar is the only thing that seems to work well with the app:layout_collapseMode="pin" attribute, I tried to either put views in it, or put views with it.
Here's the current XML layout of what I've tried:
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:background="#fff"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:padding="0px"
app:contentScrim="#eeeeee"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="">
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_marginBottom="0px"
android:background="#33ff0000"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/titleTextView"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#33ffff00"
android:gravity="center"
android:text="someText"
android:textColor="#000"/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling"/>
</android.support.design.widget.CoordinatorLayout>
Sadly, even though the layout editor shows that it looks ok, what I actually see is this truncated text for the toolbar-replacement view:
I also tried using layout_anchor, as shown on a sample of how to use it (here), but even then, the view that is supposed to replace the toolbar seems to overlap the content that's supposed to be below it and the one above it, and even the view that's above it have some space below it that isn't supposed to be there:
And here's the XML layout of this try:
<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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#3300ff00"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<FrameLayout
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:orientation="vertical"
android:paddingBottom="?attr/actionBarSize"
app:layout_collapseMode="none">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="need to be right above 'someText'"
android:textColor="#ff000000"/>
</FrameLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
app:behavior_overlapTop="0dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lorem"/>
</android.support.v4.widget.NestedScrollView>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#33ff0000"
app:layout_anchor="#id/title"
app:layout_anchorGravity="bottom"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:title="">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="someText"
android:textColor="#android:color/white"
android:textSize="20sp"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CoordinatorLayout>
The questions
How can I put custom views so that the toolbar content will stay between the bottom and upper areas, not overlapping any of them, and have the area above the toolbar to shrink as you scroll ?

For now, I'm using a workaround for this issue, by using padding that will prevent the overlapping of the views. I still don't get why the views overlap, but this helps against it.
The problem with this, is that now the toolbar doesn't have a shadow when I scroll enough so that it's the only thing that appears at the top.
Here's a sample XML layout, in case anyone wants to try:
<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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#3300ff00"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<FrameLayout
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom|center_horizontal"
android:orientation="vertical"
android:paddingBottom="24dp"
app:layout_collapseMode="none">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_gravity="bottom"
android:background="#f00"/>
</FrameLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="24dp"
android:scrollbars="none"
app:behavior_overlapTop="0dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lorem"/>
</android.support.v4.widget.NestedScrollView>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#33ff0000"
app:layout_anchor="#id/title"
app:layout_anchorGravity="bottom"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:title="">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="someText"
android:textColor="#android:color/white"
android:textSize="20sp"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CoordinatorLayout>

Donot want to expand Collapsing toolbar

I am using a collapsing Toolbar. If I start a specific Fragment I want to collapse the Toolbar so it behaves like a "normal" one and that the user can not expand it by himself. Also I want only the views ion nested scrollview to scroll and not the toolbar when i collapse. Here is my layout which I use for my Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/collapsing_height"
android:fillViewport="true"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/past_upcoming_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#efeded"
android:fitsSystemWindows="true"
android:orientation="vertical"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<TextView
android:id="#+id/upcoming_heading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:padding="#dimen/spacing_normal_8dp"
android:text="#string/upcoming_appointments"
android:textSize="#dimen/text_size18sp" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/upcoming_heading">
<android.support.v7.widget.RecyclerView
android:id="#+id/upcoming_appointments_recycler_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:orientation="horizontal" />
<TextView
android:id="#+id/no_upcoming_list"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/no_upcoming_appointment"
android:textSize="#dimen/text_size18sp" />
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/past_appointments"
android:textSize="#dimen/text_size18sp" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedscrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#efeded"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/past_appointments_recycle_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
I have used AppBarLayout.setExpanded(false). It initially shows collapsed, but when I expand back it expands.
I have also used
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
lp.height = (int) getResources().getDimension(R.dimen.collapsing_height);
This doesnot stick toolbar to the top. it scrolls up with nested scroll view. Please help.
Thanks in advance

Nestedscroll view scrolls content inside it instead of expanding its layout size when touch to toolbar layout

In Coordinatorlayout inside Nestedscrollview I have RelativeLayout and inside RelativeLayout I have Textview. When Nestedscrollview touches to Toolbar bottom part it scrolls textview content instead to full Relativelayout card.
Here is my code.
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/product_bottom_layout"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="192dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/white"
app:expandedTitleTextAppearance="#style/TransparentText"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/product_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:fitsSystemWindows="true"
app:imageUrl="#{viewModel.imageUrl}"
android:scaleType="centerInside"
app:layout_collapseMode="parallax"
android:background="#color/white"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:gravity="center_vertical"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/dimen_60"
android:layout_marginLeft="#dimen/dimen_7"
android:layout_marginRight="#dimen/dimen_7"
android:layout_marginTop="#dimen/dimen_7"
android:background="#drawable/card_bg"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dimen_3"
android:layout_marginRight="#dimen/dimen_3"
android:layout_marginTop="#dimen/dimen_3"
android:background="#color/white">
<app.com.test.Views.CustomTextView
android:id="#+id/description_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dimen_12"
android:layout_marginRight="#dimen/dimen_12"
android:layout_marginTop="#dimen/dimen_12"
android:lineSpacingExtra="8dp"
android:textColor="#color/title_color"
android:textSize="14sp"/>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

I got the solution. It's actually NestedScrollView does not scroll its child, it actually scroll content inside its child so to scroll whole layout instead of text we need to add one more parent layout like this:
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:layout_marginBottom="#dimen/dimen_60"
android:scrollbars="none"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/dimen_10"
android:background="#color/bg_color"
android:orientation="vertical"
android:padding="#dimen/dimen_6">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/dimen_10"
android:layout_marginLeft="#dimen/dimen_3"
android:layout_marginRight="#dimen/dimen_3"
android:layout_marginTop="#dimen/dimen_3"
android:background="#drawable/card_bg">
<app.com.test.Views.CustomTextView
android:id="#+id/product_title_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dimen_12"
android:layout_marginRight="#dimen/dimen_12"
android:layout_marginTop="#dimen/dimen_12"
android:text=""
/>
</RelativeLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

Collapsing toolbar issue with RecyclerView

I have a CollapsingToolbarLayout in layout, below that I have placed a RecyclerView. it works perfect and the parallax effects comes smoothly when the RecyclerView scrolls, but the issue, is suppose if the RecyclerView has less items and there is nothing to scroll, still it scolls and an empty space shows at the bottom. what my requirment is it shouldn't scroll if the RecyclerView can accomodate all the views in the visible screen, is there any way to do this ?
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:id="#+id/container_id"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/toolbar"/>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg_color"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
toolbar.xml
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
app:layout_scrollFlags="scroll"
app:layout_collapseMode="parallax"
android:layout_below="#+id/toolbar"
android:minHeight="250dp"
android:layout_height="300dp"
android:layout_width="match_parent"/>
<android.support.v7.widget.Toolbar
app:layout_collapseMode="pin"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ToggleButton
android:layout_centerVertical="true"
android:layout_margin="#dimen/dimen_xs"
android:layout_width="20dp"
android:layout_height="20dp"
android:gravity="center"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:textOff=""
android:textOn=""/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

AppBarLayout / CollapsingToolbarLayout expands indefinitely

I'm trying to use the AppBarLayout + CollapsingToolbarLayout to have a collapsible toolbar with an image that fades away while scrolling up but the toolbar remains.
The problem is when I set both AppBarLayout & CollapsingToolbarLayout android:layout_height = "wrap_content", the toolbar fills the entire screen.
http://i.stack.imgur.com/be1m6.png
When I set android:layout_height = "200dp", the height is fixed, but it doesn't work with the NestedScrollView and resize.
http://i.stack.imgur.com/MTao2.png
Here's the xml:
<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:id="#+id/articleLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.gmail.senokt16.bosphoruschronicle.ArticleActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/articleCollapsingToolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/article_app_bar">
<ImageView
android:id="#+id/articleActivityImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:minHeight="100dp"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
android:fitsSystemWindows="true"/>
<include
android:id="#+id/article_app_bar"
android:fitsSystemWindows="true"
layout="#layout/article_app_bar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="300dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/articleActivityContents"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="30dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="5dp" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/articleFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:src="#android:drawable/ic_menu_share" />
</android.support.design.widget.CoordinatorLayout>

This happened to me as well.
First, I removed <include> and added the toolbar manually.
It still happened, so after some fiddling I found that it happens because my toolbar had a minimumHeight, but layout_height=wrap_content. I changed it to layout_height=?attr/actionbarsize, and it worked. Here is my example. (The FrameLayout has a nestedscrollview like yours inside.)
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:src="#drawable/logo"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:background="#android:color/transparent"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

I did some changes on the code and fixed the issue somewhat. Now I have another problem:
CollapsingToolbarLayout & NestedScrollView don't work together