Develop Reference

How to use a ViewPager with CollapsingToolbar without using NestedScrollView?

I want to make several fragments in the main activity each having a RecyclerView such that I can swipe between them. Also in this activity, I have a collapsing toolbar on top of all these things.
I tried using the RecyclerView Directly inside the ViewPager but unfortunately the Toolbar didn't Collapse (I think it needs a NestedScrollView)
I added NestedScrollView outside the ViewPager which gave me an Exception on adding new items to any of the RecyclerViews java.lang.IndexOutOfBoundsException which I found to be a bug caused by calling runOnUiThread() but if I loaded data using UI thread it would be too slow
I tried using NestedScrollViews inside each fragment (wrapping the RecyclerViews) but it gave the same exception
Is there any way to collapse the toolbar without NestedScrollView?

Have a look with this layout:
<?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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorPrimary">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:elevation="0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:id="#+id/lnr_expandView"
android:layout_width="match_parent"
android:layout_height="130dp"
android:minHeight="130dp"
android:orientation="horizontal"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7">
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:collapseIcon="#drawable/ic_back"
app:contentInsetStart="30dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/googlesans_medium"
android:padding="#dimen/pad_15"
android:text="#string/app_name"
android:textColor="#color/text_color"
android:textSize="20sp"
android:visibility="gone" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.viewpager.widget.ViewPager
android:id="#id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Your 2nd parent child layout must contains this attribute for collapse effect;
app:layout_behavior="#string/appbar_scrolling_view_behavior"

CollapsingToolBarLayout and NestedScrollView smooth scroll issues

I'm using CoordinatorLayout with CollapsingToolBar and NestedScrollView. The elements are being inserted via RecyclerView. Whenever I try to scroll up or down the scroll isn't smooth, it's very slow, regardless the velocity of the gesture. I tried the solution here but it didn't solve my problem.
So I have no idea what causes this problem or how to solve it.
Here is my xml layout
<?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:id="#+id/main_screen_frame">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="225dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/toolbarImage"
android:layout_width="150dp"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/logo"
android:layout_gravity="center"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
android:layout_gravity="bottom"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.SearchView
android:id="#+id/search_view_id"
android:layoutDirection="rtl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:queryHint="#string/search_view_hint"
android:queryBackground="#color/colorWhite"
android:layout_gravity="right"/>
</LinearLayout>
</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="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="#+id/search_panel_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layoutDirection="rtl">
<TextView
android:id="#+id/text_view_id"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textAlignment="center"
android:text="#string/secondary_title"
android:layout_marginBottom="5dp"/>
</LinearLayout>
<FrameLayout
android:id="#+id/fragment_layout_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/search_panel_id"
android:layout_marginTop="10dp"
android:orientation="horizontal">
</FrameLayout>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
The FrameLayout is a place holder for different fragments with different scrollable RecyclerViews.
Thanks in advance.

Layout structure seems okay. So the problem might be here. android:src="#drawable/logo".
Try moving it to drawable-nodpi directory.
Also loading with Picasso / Glide will improve perfomance.

Solved my problem with this solution. The problem was that I was using RecycleView, that came from an injected fragment, inside of NestedScrollVoew. I guess they both contradict each other so that caused the slow scrolling.

recyclerViewsetNestedScrollingEnabled(false);
The above line makes recyclerview scrolling smoother in a NestedScrollView.

Collapsing Toolbar Like Google Play Store

I want to implement a collapsing toolbar like google Play Store. I have achieved functionality somewhat but that is only working for portrait Screen. Here is a sample of screenshot of what i was able to do.
Now what i want to do is when i change my device orientation to LandScape mode it should look Exactly Like This.
So what my main question is how to handle these orientation changes. Is there any official android component available that can do this kind of thing or I will have to Z-index my Layouts to achieve this kind of Layout behavior. Please note that I want the layout to be exactly like this with Margins on Both Sides and Z-indexing on top of picture also the scrolling behavior needs to be exactly like Google Play Store.
I am attaching my sample xml that I have written so far.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
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: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="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.group3amd.materializeyourapp.widgets.SquareImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
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"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
app:cardElevation="#dimen/spacing_medium"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/spacing_large"
android:layout_marginRight="#dimen/spacing_large"
android:layout_marginTop="#dimen/spacing_large"
android:textAppearance="#style/TextAppearance.AppCompat.Headline" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing_large"
android:text="#string/lorem_ipsum"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
style="#style/FabStyle"
app:layout_anchor="#id/app_bar_layout"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>

In this pretty similar issue: collapsing toolbar layout like google play store, you would find an answer as below:
View inside CollapsingToolbarLayout no need to set
app:layout_scrollFlags. No effect. Base on my code, change
app:layout_scrollFlags in CollapsingToolbarLayout to
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" and
set minHeight for it.
As your toolbar is "pin", so enterAlwaysCollapsed will call it when
you scroll down.
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/seffafCollapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="240dp"
android:minHeight="?attr/actionBarSize"
app:expandedTitleMarginEnd="164dp"
app:expandedTitleMarginStart="148dp"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/haber_icerik_resim"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/haber_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ToolbarColoredBackArrow"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/newsRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:clickable="true"
android:background="#color/mainBackground"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
In the comment to that post, you would find also a hint:
add app:contentScrim="?attr/colorPrimary" to your
collapsingtoolbarlayout. It is no need two toolbars to implement this
effect
EDIT: Here you would find an interview with a guy responsible for Google Play Store, he's talking about how he build design in Play Store App:
[UDACITY] Interview with Kirill Grouchnikov, part 1
[UDACITY] Interview with Kirill Grouchnikov, part 2
Hope it help

Collapsing Toolbar. How to adapt custom Layout instead of default ImageView

I want to make collasping toolbar, in which is my custom Layout . On the image below is presented use of new released design.support lib. On the img.1, the element (ImageView) is disappearing. In my project I want to disappear a Layout.
Because inside Layout will be ViewPager it can not be resized like the image, it should dissolve in Toolbar background - should become transparent.
img. 1
Additionaly I want to open/hide ToolbarLayout by moving ToolbarFooter - belt to move - bright blue Layout. So expand/collapse are not like in img.1 Instead it should works like status bar that shifts up and down by blick on ToolbarFooter.
img.2
The think is I read about it a lot (collapsing with button , layout inside) of but I've found any clue or implementation. I don't know how to approach to this topic.
I suppose that my ViewPager and RelativeLayout(or whatever) should be outside of the toolbar. And they should just take a place of toolbar view like this:
<android.support.v4.widget.DrawerLayout
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">
<RelativeLayout
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:clipChildren="false">
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_max_height"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/AppBarTheme">
<Button
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
android:layout_gravity="left|top"
android:gravity="center_vertical|left"
android:text="ToolbarTitle"
android:background="?android:attr/selectableItemBackground"
android:textAllCaps="false"/>
</android.support.v7.widget.Toolbar>
<net.android.app.views.ViewPagerToolbar
android:id="#+id/calendar_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="?attr/actionBarSize"/>
<RelativeLayout
android:id="#+id/toolbar_footer"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:layout_alignParentTop="false"
android:layout_alignBottom="#+id/app_bar">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="8dp"
android:text="#string/belt_to_move"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/belt_to_move"/>
</RelativeLayout>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/app_bar">
<android.support.v4.view.ViewPager
android:id="#+id/vp_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"/>
Now can anyone tell me what component should I use?
Support library offers CoordinateLayout, CollapsedToolbar, Appbar.
By standard approach can be use RelativeLayout or FrameLayout which overlap view. So guys what you recommend me, how from which side should I eat this cake?
UPDATED:
Finally I've found the solution. It isn't CollapsingToolbar but ViewDragHelper.
The solution I followed: Blog, GitHub project, YouTube explanation,

You need attach a viewPager above toolbar.
Example for ImageView :
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="240dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="2dp">
<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="?attr/colorPrimary"
app:elevation="2dp"
app:collapsedTitleTextAppearance="?attr/autoCompleteTextViewStyle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
// put here your content
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:elevation="2dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

CoordinatorLayout using the ViewPager's RecyclerView

I am using the view CoordinatorLayout from android.support.design. I want to attach the app:layout_behavior to the fragment's RecyclerView?
In the example given by Google, they only attach it in the RecyclerView of the same XML file where the CoordinatorLayout was attached.
Is there a way to attach CoordinatorLayout to the fragment's RecyclerView within the ViewPager?
The sample is in this blog post at Android Developers blog.

Chris Banes has posted a sample on Github which shows exactly what you want to do.
Here is the xml file that defines how one can indirectly attach a coordinator layout to the viewpager's fragments.
<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android: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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
The idea is to let the viewpager have the layout_behavior attribute.

This might be dumb, but it didn't worked due to the fact that the build tool was not updated in the build.gradle of the application version to 22, I was using 21 that is why it is not working as expected to be.
Edit:
Also what SanderTuit said: adding com.android.support:recyclerview-v7:22.2.0 will also solve the problem

Use a FrameLayout and inject your fragment into that FrameLayout. Then set
app:layout_behavior to it. The only thing you need to do is set layout_behavior
to a sibling of AppBayLayout and that sibling will below the toolbar.
<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android: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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/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 recently had the same problem mentioned in the post, and the above solutions did not work for me. Luckily I managed to solve it. So just to share I am posting here
The problem was that in my code I had set
recyclerView.setNestedScrollingEnabled(false);
due to which the appbar was not responding to recyclerView's scrolls despite setting the layout_behaviour attribute to the viewPager. Changing the above-mentioned attribute to
recyclerView.setNestedScrollingEnabled(true);
solved the problem and the appbar started responding to the recylerView's scroll.

After a few tests, I found that put the TabLayout outside AppBarLayout, will works, whatever the viewpager's Fragment contains. This is my main xml.
<com.tqmall.legend.konwledge.view.VerticalSwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/swipe_refreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFE6ECF0">
<android.support.design.widget.AppBarLayout
android:id="#+id/kn_main_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#android:color/black"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
layout="#layout/banner_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.9" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#33000000"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/main_fragment_issue_list_tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:tabGravity="center"
app:tabIndicatorColor="#FF2CA2D5"
app:tabPaddingEnd="30sp"
app:tabPaddingStart="30sp"
app:tabSelectedTextColor="#FF2CA2D5"
app:tabTextColor="#FF4F5354" />
<android.support.v4.view.ViewPager
android:id="#+id/main_fragment_issue_list_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

I'm having the same problem, i solved the scrolling but putting toolbar and the tabs inside the app bar and wrap it and the viewpager with a coordinatorlayout.
Also in the layout of my recycle view(to be inflated) i add the layout_behavior. It works but the problem is everything is over each other.
This is my main page
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/music_foot"
>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/view_pager"
/>
<view
android:layout_width="match_parent"
android:layout_height="wrap_content"
class="android.support.design.widget.AppBarLayout"
android:id="#+id/appBar"
>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#1e88e5"
android:id="#+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways"
></android.support.v7.widget.Toolbar>
<view
android:layout_width="match_parent"
android:layout_height="56dp"
class="com.astuetz.PagerSlidingTabStrip"
android:id="#+id/pager_tabs"
android:layout_below="#+id/appBar"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</view>
and this is my layout for the adapter
<android.support.v7.widget.RecyclerView
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/recycleView" />
If I get it to work better ill tell you.