Develop Reference

TabLayout disappearing behind ViewPager in CollapsingToolBar

Im trying to create an AppBarLayout using the CollapsingToolBar which contains a Toolbar and a TabLayout and im also using the app:behavior_overlapTop attribute on my RelativeLayout which includes a ViewPager. The problem is that when the CollapsingToolBar is expanded my TabLayout disappears behind the ViewPager as the TabLayout is given a layout_gravity = bottom and due to the fact that i have used app:behavior_overlapTop on my RelativeLayout which includes the ViewPager. How can i fix this ? Thanx in advance.
( This is my first question here, sorry if have missed anything, i would have included images for better understanding of the problem but i dont have enough repo )
Here is my XML file
`
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:theme="#style/AppTheme"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/beats"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:minHeight="?attr/actionBarSize"
android:layout_gravity="top"
app:popupTheme="#style/AppTheme"
app:layout_collapseMode="pin"
app:titleMarginBottom="60dp"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabIndicatorColor="#FFFFFF"
android:layout_gravity="bottom"
app:tabMode="fixed"
app:tabGravity="center"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="64dp"
>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
`

Disable toolbar scrolling when pressing on it

I tried to find someone with the same question but didn't really know what to search for. If someone else finds a simliar question, just let me know!
I've implemented the toolbar from the design library as follows:
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<include layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/mainTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
and the toolbar layout:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/mainToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
The AppBarLayout is a direct child to the CoordinatorLayout. Below the AppBar I have a RecyclerView that correctly lets the AppBar collapse when scrolling up.
However I'm able to press directly on the AppBar and then move my finger up and that way the toolbar collapses even though my RecyclerView is completely empty. I can expand it again by scrolling down on the toolbar again. This behavior doesn't happen when scrolling where the RecyclerView is.
I hope my problem is understandable. I'm using version 25.1 of the support library.
Thanks!
Edit: I tried the solutions below. Didn't change anything. Down below I added a video to show what my issue is. So it's really about the situation when the screen is not full (so no elements from the RecyclerView goes off the screen): If that's the case I don't want the Toolbar to hide at all. In other words: Only hide the toolbar if any elements from RecyclerView go off the screen.
https://drive.google.com/file/d/0Bzrw-IuZ9USuMURVVkRfb3dkRTQ/view?usp=sharing
If any more code is needed from my side just let know.

Try this
The entire project is at this location:
https://github.com/slidenerd/Android-Design-Support-Library-Demo
The below code works for me(This Git project belongs to slidenered. Thanx to him):
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="slidenerd.vivz.navigationviewdemo.FourthActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/root_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:layout_width="match_parent"
android:layout_height="192dp"
android:scaleType="centerCrop"
android:src="#drawable/rsz_bg_cover"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
app:layout_collapseMode="pin"
app:tabIndicatorColor="#color/colorPrimary"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#EEE" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
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="bottom|right"
android:layout_margin="16dp"
android:src="#drawable/ic_add_black"
app:borderWidth="0dp"
app:fabSize="mini" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/menu_drawer" />

if u want to fixed the toolbar when appbar is scrolled
try this:
<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="200dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
...
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
put your toolbar under a CollapsingToolbarLayout and app:titleEnabled="false"
By setting it to false, you'll get the desired behaviour. The title stays fixed at the top of the screen.
you can do it programetically also:
CollapsingToolbarLayout.setTitleEnabled(false);

How to set android TabLayout in the bottom of the screen?

My question is how I can set the new android material design TabLayout to be in the bottom of the screen, kind of like Instagram's bottom toolbar.
If you have never seen Instagram's UI here is a screenshot of it :
. If there is a better way of approaching this, please feel free to post it here (with a code example if possible), I will greatly appreciate it.
Here is my code: activity_main.xml
<android.support.design.widget.AppBarLayout
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</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" />
I have tried many methods and workarounds suggested by the Stack Overflow community, but none seems to work with this new implementation of tabs in android. I know this UI design does not follow android design guidelines, so please don't comment on it. This UI design is vital to my application's UX and I would appreciate getting an answer for it. Thank you!

I believe I have the best simple fix. Use a LinearLayout and set the height of the viewpager to be 0dp with a layout_weight="1". Make sure the LinearLayout has an orientation of vertical and that the viewpager comes before the TabLayout. Here is what mines looks like:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<include layout="#layout/toolbar" android:id="#+id/main_toolbar"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white"/>
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/blue"
/>
</LinearLayout>
And as a bonus, you should create your toolbar only once as toolbar.xml. So that way all you have to do is used the include tag. Makes your layout's more clean. Enjoy!
toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
Update 11.2.2016: For those of you who don't know how to inflate the toolbar, here is how. Make sure that your Activity extends AppCompatActivity so you can call setSupportActionBar() and getSupportActionBar().
Toolbar mToolbar = (Toolbar) findViewById(R.id.main_toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

I suggest to use androidx library as android support libraries may get deprecated soon.
We can actually add a tab layout to a viewpager. Below is the code snippet that I used in my project
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00a294"
android:layout_gravity="bottom" />
</androidx.viewpager.widget.ViewPager>
layout_gravity="bottom" is the syntax that puts the tab layout to the bottom

I had a same problem on Android Studio 2.2. This is what i did,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical"
android:layout_height="match_parent">
<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:subtitleTextColor="#color/color_white"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="#string/call_log"
app:titleTextColor="#color/color_white"
/>
<RelativeLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/tabLayout" />
<android.support.design.widget.TabLayout
android:layout_alignParentBottom="true"
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"/>
</RelativeLayout>
</LinearLayout>

Better segregate both AppBarLayout and tabLayout like my code below. This way you can modify the tab bar and view pager properties independently.
<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.design.widget.AppBarLayout
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<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:layout_above="#+id/tabs"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

android:layout_alignParentBottom="true"
Add this setting in
android.support.design.widget.TabLayout

Top of the page LinearLayout settings and set android:gravity="bottom". Thats it. Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px"
android:gravity="bottom"> //Thats it.
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="45dp"
android:id="#+id/tabLayout1">
<android.support.design.widget.TabItem
android:icon="#drawable/home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabItem1" />
<android.support.design.widget.TabItem
android:icon="#drawable/mypage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabItem2" />
<android.support.design.widget.TabItem
android:icon="#drawable/friends"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabItem3" />
<android.support.design.widget.TabItem
android:icon="#drawable/messages"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabItem4" />
<android.support.design.widget.TabItem
android:icon="#drawable/settings"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabItem5" />
</android.support.design.widget.TabLayout>
</LinearLayout>

Replace Your TabLayout code with this
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:elevation="2dp" />

New android Support Design Library, scroll tablayout offscreen not working

Trying to use the new support design library. In my layout I want the ToolBar to stay at the top of the screen, but have the TabLayout go off the screen when the user scrolls down. But it looks like the ViewPager goes underneath the AppBarLayout. I used this blog post for reference
https://medium.com/ribot-labs/exploring-the-new-android-design-support-library-b7cda56d2c32
This is the layout, within the ViewPager holds Fragments that consist of recycler views
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/material_grey50"
android:clickable="true">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tabLayout" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_list"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar_list"
android:background="?attr/colorPrimary"
android:scrollbars="horizontal"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="center" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:elevation="3dp"
android:src="#drawable/ic_videocam_white_36dp"
app:backgroundTint="#color/accent"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>

Don't forget to set this in the viewpager:
app:layout_behavior="#string/appbar_scrolling_view_behavior"

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.