Develop Reference

AppBarLayout and CollapsingToolbarLayout - shrink content

I have AppBarLayout with CollapsingToolbarLayout. Inside I have an ImageView as a background, and ConstraintLayout with TextViews. Expected behaviour on scroll: the AppBarLayout shrinks just enough so that the the whole ConstraintLayout is still visible. Unfortunately what happens for me, is that the ConstraintLayout moves up and is out of view.
Here's what I want it to look like:
Before scroll
after scroll
Instead, this is what I have right now:
Before scroll
After scroll
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="262dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#00FFFFFF"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
android:src="#drawable/img_dashboard"/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="140dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:layout_marginBottom="18dp"
android:layout_gravity="bottom|center_horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="4dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/featured_main_text"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Offline"
android:textColor="#FFFFFF"
android:textSize="12sp"
android:layout_marginStart="28dp"
android:layout_marginEnd="12dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2 hrs ago"
android:textColor="#FFFFFF"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/featured_main_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="John Smith"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:layout_marginStart="28dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Place Holder"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:layout_marginStart="28dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Place Holder"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:layout_marginStart="28dp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_scrolling" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I looked at CollapsingToolbarLayout tutorials, but can't find anything where it just shrinks instead of actually collapsing into a toolbar.

All what you have written in your code will not work out of box. If you want to achieve the result how it shows in your expected screenshot you need to write CoordinatorLayout.Behavior for each View/viewGroup that hold your items. And set it to your View/ViewGroup.

How do I correctly implement toolbars inside fragments in viewpager?

I have a collapsing toolbar in my TimelineFragment which I recently added. And there is an already existing collapsing toolbar which previously worked fine in my ProfileFragment until when I added the similar toolbar to the TimelineFragment. Both of these fragments are contained in a view pager.
I have the ff layout for the ProfileFragment
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/ivProfileAvatar"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/divider_small"
android:src="#drawable/profile_image" />
<Space
android:layout_width="match_parent"
android:layout_height="#dimen/divider_small" />
<TextView
android:id="#+id/tvUserUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="JuanOne"
android:textColor="#android:color/white"
android:textSize="#dimen/text_header"
android:textStyle="bold" />
<TextView
android:id="#+id/tvUserCommunity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="University Name"
android:textColor="#android:color/white"
android:textSize="#dimen/text_content" />
<TextView
android:id="#+id/tvUserBio"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Still learning to face difficulty"
android:textColor="#android:color/white"
android:textSize="#dimen/text_content" />
<Space
android:layout_width="match_parent"
android:layout_height="#dimen/divider_normal" />
<Button
android:id="#+id/btnEditProfile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/btn_gradient_blue"
android:paddingStart="48dp"
android:paddingEnd="48dp"
android:text="Edit Profile"
android:textAllCaps="false"
android:textColor="#android:color/white" />
<!--
DO NOT CHANGE,
CHANGE ONLY IF TOOLBAR SIZE (FOR TAB_LAYOUT) IS ALSO CHANGED
-->
<Space
android:layout_width="match_parent"
android:layout_height="56dp" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:layout_collapseMode="pin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<android.support.design.widget.TabLayout
android:id="#+id/tabsProfile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
app:tabBackground="#null"
app:tabGravity="center"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="2dp">
<android.support.design.widget.TabItem
android:id="#+id/tabProfileMySSSS"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:id="#+id/tabProfileMySSSSS"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
<ImageButton
android:id="#+id/ibtnProfileTimelineRefresh"
android:layout_width="128dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_marginRight="#dimen/divider_normal"
android:layout_weight="1"
android:background="?attr/selectableItemBackground"
android:src="#drawable/ic_autorenew_white_24dp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
which is inside a CoordinatorLayout
and the ff layout for the TimelineFragment
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="92dp">
<android.support.design.widget.AppBarLayout
android:fitsSystemWindows="true"
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/cvCreateSSSSS"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/divider_small"
android:layout_marginRight="#dimen/divider_small"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardCornerRadius="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="#dimen/divider_normal">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/svg_nav_create_SSSSSS" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingStart="#dimen/divider_normal"
android:text="What's on your mind?"
android:textColor="#android:color/black"
android:textSize="#dimen/text_content" />
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:padding="#dimen/divider_xsmall"
android:src="#drawable/svg_insert_image" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:visibility="gone">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<...some other layouts />
</android.support.design.widget.CoordinatorLayout>
For visuals on what my issue is
** This image is from the ProfileFragment
The extra space which I marked red has not existed before, when I still haven't added the AppBarLayout (containing the toolbar) on the TimelineFragment.
I have tried removing the whole AppBarLayout on the TimelineFragment, and it does fix the weird extra space on the ProfileFragment. Why is it that there is a relation between these fragments when they do not share anything besides being in the same ViewPager?
How do I remove the space that I marked red on the image? It might be related to the toolbar since it is same in color. The AppBarLayout uses a lighter color than the toolbar.

I have already fixed it. Apparently, the Activity that was holding all these fragments is using coordinator layout. So I removed that, and that space was gone. I believe that using a toolbar inside these fragments made the activity holding them create a toolbar on its own.

Issue with collapsing toolbar in marshmallow and above

I am facing a little issue with Collapsing toolbar and only for the devices having OS marshmallow and above, for lower versions its working fine
following is my 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:background="#color/fp_dashboard_backgrd"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlways">
<include
layout="#layout/filter_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/MyToolbar"
android:layout_width="match_parent"
android:background="#color/fund_screener_toolbar"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="#style/ActionBar">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:maxLines="1"
android:text=" Fund Screener "
android:textColor="#color/color_white"
android:textSize="#dimen/dimen_txt_20" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
android:id="#+id/scrolll"
layout="#layout/recycle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include
android:id="#+id/imageViewProgress"
layout="#layout/layout_bull_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</android.support.design.widget.CoordinatorLayout>
And here are the first image showing when i scroll up
and when i scroll down i get this extra white space above my toolbar I am not sure what is going wrong. check below image. As you guys can see white space above my Fund Screener toolbar
Guys please help me I have done lot of changes and research but not able to get any solution. Please help
EDIT
filter_search.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:background="#color/white"
android:orientation="vertical"
android:padding="10dp">
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/spnAMCName"
style="#style/Base.Widget.AppCompat.Spinner.Underlined"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/SpinnerBottomLine" />
<com.app.widgets.TextViewRobotoRegular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:text="#string/lbl_asset_type"
android:textColor="#color/fp_light_gray"
android:textSize="13sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<com.app.widgets.TextViewRobotoLight
android:id="#+id/btnequity"
android:layout_width="#dimen/dimen_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/btn_border_default"
android:gravity="center"
android:paddingBottom="7dp"
android:paddingTop="7dp"
android:text="#string/equity"
android:textColor="#color/fp_light_gray"
android:textSize="13sp" />
<com.app.widgets.TextViewRobotoLight
android:id="#+id/btndebt"
android:layout_width="#dimen/dimen_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/btn_border_default"
android:gravity="center"
android:paddingBottom="7dp"
android:paddingTop="7dp"
android:text="#string/debt"
android:textColor="#color/fp_light_gray"
android:textSize="13sp" />
<com.app.widgets.TextViewRobotoLight
android:id="#+id/btnhybrid"
android:layout_width="#dimen/dimen_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/btn_border_default"
android:gravity="center"
android:paddingBottom="7dp"
android:paddingTop="7dp"
android:text="#string/hybrid"
android:textColor="#color/fp_light_gray"
android:textSize="13sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:weightSum="1">
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/spnFundSubCategory"
style="#style/Base.Widget.AppCompat.Spinner.Underlined"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_weight="0.5"
android:paddingRight="2dp"
android:theme="#style/SpinnerBottomLine" />
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/spnFundNature"
style="#style/Base.Widget.AppCompat.Spinner.Underlined"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_weight="0.5"
android:paddingLeft="2dp"
android:theme="#style/SpinnerBottomLine" />
</LinearLayout>
</LinearLayout>

You are using android:layout_marginTop="?attr/actionBarSize" where you are including your layout="#layout/filter_search". This is causing actionBarSize space above your CollapsingToolbarLayout in expanded mode. Just remove it as follows.
<include
layout="#layout/filter_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
I hope this works for you.Thank You

Why scrolling stops at collapsed toolbar when scrolling up? (Not expanding to show image)

As I explained on the title, if I scroll from the bottom to top fastly with removing my finger immediately after pulling down, scrolling stops at collapsed toolbar. I want it to expand. If I pull smootly the nestedscrollview, there is no problem, toolbar expands properly.
I have recycler view in nestedscrollview.
Here is my layout
<android.support.design.widget.CoordinatorLayout
android:id="#+id/detail_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="160dp"
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"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="#dimen/article_keylines"
app:expandedTitleMarginStart="#dimen/md_keylines"
app:expandedTitleMarginBottom="#dimen/article_keylines"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleTextAppearance="#dimen/tile_padding"
>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/a"
android:fitsSystemWindows="true"
android:foreground="#drawable/scrim_profile"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:elevation="4dp"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</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:id="#+id/nestedscrollview"
android:background="#color/background"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:id="#+id/inner_relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/md_keylines"
android:paddingRight="#dimen/md_keylines"
android:background="#color/white"
android:paddingBottom="#dimen/article_keylines"
android:paddingTop="#dimen/article_keylines"
android:focusableInTouchMode="true"
>
<TextView
android:id="#+id/tw1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text"
android:textSize="16sp"
android:lineSpacingExtra="4sp"
android:text="Text"
android:layout_marginBottom="#dimen/md_keylines"/>
<View
android:id="#+id/divider_1"
android:layout_width="2dp"
android:layout_height="50dp"
android:background="#color/divisor"
android:layout_below="#id/tw1"
/>
<View
android:id="#+id/divider_2"
android:layout_width="2dp"
android:layout_height="50dp"
android:background="#color/divisor"
android:layout_below="#id/tw1"
android:layout_toRightOf="#+id/tw2"
android:layout_toEndOf="#+id/tw2" />
<View
android:id="#+id/divider_3"
android:layout_width="2dp"
android:layout_height="50dp"
android:background="#color/divisor"
android:layout_below="#+id/tw1"
android:layout_toRightOf="#+id/followers"
android:layout_toEndOf="#+id/followers"/>
<TextView
android:id="#+id/count"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/text"
android:textSize="20sp"
android:text="14"
android:lineSpacingExtra="-4sp"
android:layout_alignTop="#id/divider_1"
android:layout_marginTop="6dp"
android:layout_alignRight="#+id/experience"
android:layout_alignEnd="#+id/experience"
/>
<TextView
android:id="#+id/tw3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text"
android:textSize="14sp"
android:text="Text"
android:paddingRight="12dp"
android:paddingEnd="12dp"
android:paddingLeft="12dp"
android:paddingStart="12dp"
android:layout_below="#id/tw2"
android:layout_toRightOf="#id/divider_1"
/>
<TextView
android:id="#+id/count2"
android:layout_toRightOf="#id/divider_2"
android:layout_toLeftOf="#id/divider_3"
android:layout_below="#id/tw1"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/text"
android:textSize="20sp"
android:layout_alignTop="#id/divider_1"
android:layout_marginTop="6dp"
android:text="200"
/>
<TextView
android:id="#+id/tw4"
android:layout_below="#id/tw3"
android:layout_toRightOf="#id/divider_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="#color/text"
android:textSize="14sp"
android:text="text"
android:paddingLeft="12dp"
android:paddingRight="12dp"
/>
<Button
android:id="#+id/button"
android:layout_toRightOf="#id/divider_3"
android:layout_below="#id/tw1"
android:layout_marginLeft="12dp"
android:layout_width="match_parent"
android:layout_height="38dp"
android:textColor="#color/orange_button"
android:gravity="center_vertical|start"
android:text="text"
android:textSize="16sp"
android:textAllCaps="false"
android:paddingLeft="18dp"
android:drawableLeft="#drawable/i"
android:drawablePadding="4dp"
android:layout_alignTop="#id/count"
style="?android:attr/borderlessButtonStyle"
android:background="#drawable/button"/>
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:padding="#dimen/md_keylines"
android:id="#+id/recycler_view"
android:layout_below="#id/inner_relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/inner_relativeLayout"
android:layout_marginTop="30dp"/>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Thanks in advance.

After I tried a lot with overriding AppBarLayout.Behavior in another stackoverflow answer,
I have found a library that resolves my problem. ( smooth-app-bar-layout
)
There are 3 steps in usage. Be careful about the 3rd step. You should put nestedscrollview above the smoothappbarlayout below the coordinatorlayout.
<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.support.v7.widget.NestedScrollView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
android:id="#+id/smooth_app_bar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:layout_collapseMode="pin"
app:navigationIcon="#drawable/ic_toolbar_arrow_back"
style="#style/AppStyle.MdToolbar" />
</android.support.design.widget.CollapsingToolbarLayout>
</me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout not collapsing when scrolling with RecyclerView

I am using a CollapsingToolbarLayout for a collapsing tool bar and it works for the most part. When you start scrolling on any part of the page besides the RecyclerView it will scroll fine and the toolbar will collapse like it should. However when you do start scrolling on the RecyclerView it doesn't collapse the tool bar and doesn't look the best.
I've tried a lot of different solutions I've found online and none have seemed to help. I'm using appcompat-v7:23.2.1. Here's what the layout file looks like:
<?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">
<android.support.design.widget.AppBarLayout
android:id="#+id/movie_detail_app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/movie_detail_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/movie_detail_backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:contentDescription="#string/cd_backdrop"/>
<android.support.v7.widget.Toolbar
android:id="#+id/movie_detail_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- Movie Content here -->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:padding="16dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/movie_detail_out_yet_layout"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:layout_width="20dp"
android:layout_height="20dp"
tools:background="#drawable/green_square">
<ImageView
android:id="#+id/movie_detail_out_yet_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:src="#drawable/ic_checkmark"/>
</RelativeLayout>
<TextView
android:layout_toRightOf="#+id/movie_detail_out_yet_layout"
android:layout_toEndOf="#+id/movie_detail_out_yet_layout"
android:id="#+id/movie_detail_release_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/textAppearanceMedium"
tools:text="March 21, 2016"/>
<TextView
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:id="#+id/movie_detail_mpaa_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/textAppearanceMedium"
android:textStyle="bold"
tools:text="PG-13"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
<TextView
android:layout_marginTop="16dp"
style="?android:listSeparatorTextViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/h_plot"/>
<TextView
android:layout_marginTop="5dp"
android:id="#+id/movie_detail_plot"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:layout_marginTop="16dp"
style="?android:listSeparatorTextViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/h_ratings"/>
<TextView
android:id="#+id/movie_detail_no_ratings_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/unknown"
android:visibility="gone"/>
<LinearLayout
android:orientation="horizontal"
android:id="#+id/movie_detail_rating_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Critics Section -->
<LinearLayout
android:layout_weight="0.5"
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="match_parent">
<TextView
android:id="#+id/movie_detail_critics_rating_box"
android:layout_marginTop="5dp"
tools:background="#drawable/orange_square"
tools:text="6.7"
android:textColor="#android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_gravity="center_vertical"
android:id="#+id/movie_detail_critics_rating_tv"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/textAppearanceMedium"
android:text="#string/critics_rating"/>
</LinearLayout>
<!-- Audience Section -->
<LinearLayout
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="match_parent">
<TextView
android:id="#+id/movie_detail_audience_rating_box"
android:layout_marginTop="5dp"
tools:background="#drawable/orange_square"
tools:text="6.7"
android:textColor="#android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/textAppearanceMedium"
android:text="#string/audience_rating"/>
</LinearLayout>
</LinearLayout>
<TextView
android:layout_marginTop="16dp"
style="?android:listSeparatorTextViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/h_cast"/>
<TextView
android:id="#+id/movie_detail_no_cast_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
style="?android:textAppearanceMedium"
android:text="#string/unknown"
android:visibility="visible"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/movie_detail_cast_member_rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:visibility="gone"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
For the RecyclerView, I set it to have a LinearLayoutManager and to my custom adapter. Any help would be great, it's been a couple weeks and I still haven't been able to figure this out.
Edit: It appears to only happen when scrolling up. If the tool bar is collapsed and I scroll down, it does expand like it should. However, as before, when scrolling up it doesn't seem to work.