I am having issues with the expected scroll behavior of a collapsing toolbar layout within an app. To ensure I kinda knew what I was doing I created a simple test project and was able to achieve the desired result, but a NestedScrollView was used in that example and the content that required scrolling was just a RelativeLayout containing a CardView with a lot of text. In the real app the scroll content is a RecyclerView, which I assume is the problem. It is as if the RecyclerView is handling the scrolling and the parent CollapsingToolbar is left out of the loop.
Notice that the app:layout_behavior="#string/appbar_scrolling_view_behavior" is not currently in the layout. I have tried adding it to various places without the desired result.
Attached is an image of the app after a small amount of scrolling has been performed with the collapsing toolbar above not reducing it's height.
<?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"
tools:context=".ui.ArticleListActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/theme_primary"
app:contentScrim="#color/theme_primary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/empty_detail"
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">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:src="#drawable/logo" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
According to your code what's missing is that you have to set the scrolling flag "scroll" to the imageview above the Toolbar.
I've done a similar thing and as you can see on the code below, all the views that are meant to react to the RecyclerView Scrolling have the scrolling flag and they are before the views that we don't want to scroll such asthe Toolbar:
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:id="#+id/collapsingToolbar"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
>
<include layout="#layout/movie_details_header_layout" android:id="#+id/headerLayout"
app:layout_scrollFlags="scroll"
/>
<android.support.v7.widget.Toolbar
android:layout_height="56dp"
android:layout_width="match_parent"
android:id="#+id/toolbar"
app:navigationIcon="#drawable/ic_arrow_back"
android:navigationContentDescription="Back"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
The project came using version 22.x of the compat libraries, updating to 23 seemed to fix everything.
Related
I have an activity with a toolbar and a recyclerview. On top of the recyclerview I have a panel that I want to be scrollable (to move along with the scroll of the recyclerview).
I want this panel to scroll behind the toolbar, so when the scrolling happens, the toolbar stays in place and the panel slides behind it.
Kind of what they do here:
https://i.imgur.com/fQA6bPH.gif
But I cant find the right combination of options with CollapsingToolbarLayout to achieve this effect:
<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:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".ui.profile.ProfileActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/profile_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/topbar_gradient"
android:theme="#style/AppTheme.Dark">
<android.support.design.widget.CollapsingToolbarLayout
android:orientation="vertical"
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
app:layout_collapseMode="none"
android:minHeight="?android:attr/actionBarSize" />
<LinearLayout
android:layout_marginTop="?actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="none"
app:layout_collapseParallaxMultiplier="0.5">
...
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
(...)
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
To simplify, I've changed the structure to this:
<android.support.design.widget.CollapsingToolbarLayout
android:orientation="vertical"
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?colorPrimary"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
app:layout_collapseMode="pin"
android:minHeight="?android:attr/actionBarSize" />
<LinearLayout
android:layout_marginTop="?actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/bar"/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
It does exactly the same when we add an ImageView inside the CollapsingToolbarLayout like this with parallax flag of app:layout_collapseMode:
<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">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="pin" />
<ImageView
android:src="#drawable/cheese_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" //Here is the solution
android:minHeight="100dp" />
</android.support.design.widget.CollapsingToolbarLayout>
So you may want to add :
app:layout_collapseMode="parallax"
To your view (LinearLayout) or anything inside.
Read: https://guides.codepath.com/android/handling-scrolls-with-coordinatorlayout#creating-parallax-animations
I solved this problem by moving Toolbar outside of AppBarLayout. Then in code setup Toolbar as SupportActionBar.
<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:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".ui.profile.ProfileActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/profile_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/topbar_gradient"
android:theme="#style/AppTheme.Dark">
<android.support.design.widget.CollapsingToolbarLayout
android:orientation="vertical"
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_marginTop="?actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="pin">
...
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
(...)
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
android:minHeight="?android:attr/actionBarSize" />
</android.support.design.widget.CoordinatorLayout>
You need to change this to get desired effect:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
app:contentScrim="?colorPrimary"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed"
app:titleEnabled="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?actionBarSize"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/bar" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
android:minHeight="?android:attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
Your change was in CollapsingToolbar, by using these three attributes "scroll|enterAlwaysCollapsed|exitUntilCollapsed" together will change that effect.
Description :
app:layout_collapseMode="" is attribute used to collapse/pin child views of CollapsingToolbarLayout.
There are three attributes to this :
none : No effects at all.
pin : Pin that view at CollapsingToolbar when scrolled.
parallax : Hide view parallel with CollapsingToolbar hiding.
so if you're having Toolbar pinned to CollapsingToolbarLayout then add this property pin (which will pin it to Collapsing toolbar when scrolled) and parallax will animate it until collapsed.
Let's see
How does scrolling actually works using these 4 attributes in
app:layout_scrollFlags=""
scroll : The view will be scroll in direct relation to scroll
events.(Necessary, otherwise any other attribute won't work)
enterAlways : When entering (scrolling on screen) the view will
scroll on any downwards scroll event, regardless of whether the
scrolling view is also scrolling.
enterAlwaysCollapsed : An additional flag for 'enterAlways' which
modifies the returning view to only initially scroll back to it's
collapsed height.
exitUntilCollapsed : When exiting (scrolling off screen) the view
will be scrolled until it is 'collapsed'.
snap : Upon a scroll ending, if the view is only partially visible
then it will be snapped and scrolled to it's closest edge.
More details from here & demo here
Findout more from here : link
I encountered a problem on first launch of a fragment. It seems like CoordinatorLayout adds a negative margin to NestedScrollView which is equal to CollapsingToolbarLayout's height in collapsed state (I tested it by changing the height's value). As a result RecyclerView which lives in the NestedScrollView cannot scroll up to show few of its bottom items.
There are some similar questions on SO (like this, this and this), but they don't provide a solution that worked for me, and moreover, they don't give any explanations of what can cause the issue.
One interesting note is that if I rotate, or turn the screen off and on it would rebuild the layout and afterwords it will show up correctly. Also, if I click on an item it will trigger something so then I would be able to scroll those hidden items. As a workaround it would be nice to call a function that rebuilds the layout correctly manually but I failed to figure out what it was (see what I tried to do below)
What I tried to do:
adding bottom margin equal to toolbar's height to NestedScrollView. Although it helped on first launch but after I clicked on an item or rotate the screen the extra margin would push the view up from the bottom of the screen.
I couldn't find any problem in my code while debugging.
calling getView.invalidate() didn't help as well.
Can somebody help me to figure out what can cause the issue, please?
fragment_player.xml
<?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="ru.orgin.glagol.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:stateListAnimator="#animator/appbar_always_elevated">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<include layout="#layout/player_view"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/player_toolbar_height"
app:layout_collapseMode="none"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
<ViewAnimator
android:id="#+id/viewAnimator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inAnimation="#android:anim/fade_in"
android:outAnimation="#android:anim/fade_out">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="64dp"
android:layout_gravity="center"
style="?android:attr/progressBarStyle"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:nestedScrollingEnabled="false"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
android:layout_width="match_parent"
android:layout_height="64dp"
android:gravity="center"
android:layout_gravity="center"
android:text="#string/empty_history_books" />
<TextView
android:layout_width="match_parent"
android:layout_height="64dp"
android:gravity="center"
android:layout_gravity="center"
android:text="#string/error_loading_data" />
</ViewAnimator>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Update:
Still don't know the reason but it seems like adding minHeight attribute to CollapsingToolbarLayout does the trick.
Adding minHeight attribute prevents CollapsingToolbarLayout from unexpected behavior:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:stateListAnimator="#animator/appbar_always_elevated">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:minHeight="#dimen/player_toolbar_height"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<include layout="#layout/player_view"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/player_toolbar_height"
app:layout_collapseMode="none"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I've found strange behavior in RecyclerView with CollapsingToolbarLayout.
When I scroll RecyclerView - it works perfectly. But when I try to fling it and stop that fling fast enough - I can see, that RecyclerView is scrolled "inside itself".
Bad fling behavior:
RecyclerView should not be scrollable before CollapsingToolbarLayout fully collapses, but it is (in normall scroll everything works perfectly, problem only appears when flinging).
My layout looks like this:
<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"
tools:context="kg.nongrate.arseniii.collapsingtoolbarlayouttest.MainActivity">
<android.support.design.widget.AppBarLayout
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:layout_scrollFlags="scroll|exitUntilCollapsed">
<TextView
android:layout_width="match_parent"
android:layout_height="240dp"
android:layout_marginTop="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:text="1. Hello World!\n\n\n2. Hello World!\n\n\n3. Hello World!"
android:textColor="#color/colorAccent"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
android:gravity="center" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0cc"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Here are sources and two videos that show what I mean:
https://NonGrate#bitbucket.org/NonGrate/collapsingtoolbarlayout-recyclerview-bug.git
If i have such a configuration as shown below, like a custom View inside a CollapsingToolbarLayout with height more than a screen height, i cannot collapse it.
What for i need to do it? I need to have a content which will scroll up with a recyclerview below it. Without parallax or other effect, just scroll.
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/refresher"
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:background="#color/accent_material_light"
android:isScrollContainer="false">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin"/>
<View android:layout_width="match_parent"
android:layout_height="1500dp"
android:background="#color/green_A100"
app:layout_scrollFlags="scroll"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycle_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/cardview_light_background"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.SwipeRefreshLayout>
Per the Support Library 23.1 release blog post:
You’ll also find that AppBarLayout now allows users to start scrolling from within the AppBarLayout rather than only from within your scrollable view
If you'd like to start scrolling from within your AppBarLayout/CollapsingToolbarLayout, you'll want to update to at least version 23.1.0 of the Design Library.
I have looked long and hard for a working answer to this problem and it seems either I'm working around a bug in the Design library, or there isn't an answer to what I want to do.
I have a CollapsingToolbar with Parallax Image and a ViewPager below. The ViewPager will only act on horizontal scrolls, while the dark box at the bottom is a TextView which will do vertical scrolls and collapse the Toolbar.
My solution now isn't great for several reasons - Here's a VIDEO to show why.
On API22 (and presumably 21), my TitleBar has a shadow under it, which breaks the continuity with the TabLayout below.
My ViewPager can only page horizontally. It needs to also accept vertical input and collapse the Toolbar.
I have a TextView which pages vertically, collapsing the ToolBar. So it does work, just not as an all-in-one solution with the ViewPager only.
Why the ViewPager can't take care of Horizontal and Vertical scrolling is beyond me. Maybe the functionality doesn't exist in the Design Library yet and there is no workaround. I have tried everything, looked everywhere. This is the best I can do:
<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"
tools:context=".MainActivity"
android:id="#+id/main_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="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/md_white_1000"
android:scaleType="fitCenter"
android:src="#drawable/backdrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>
<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"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</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/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
style="#style/CustomTabs"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/viewpager_padding_default"/>
</LinearLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/drawer_padding_default"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:padding="#dimen/drawer_padding_default"
android:textColor="#color/textColorPrimary"
android:background="#drawable/myrect" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_action"
android:src="#mipmap/ic_action_help"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/drawer_padding_default"
android:scaleType="center"
app:borderWidth="0dp"
app:layout_anchor="#id/main_content"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
1)create a separate layout for the viewPager fragments,use NestedScrollView
as a your root,and add app:layout_behavior="#string/appbar_scrolling_view_behavior",to it.
2)add app:layout_behavior="#string/appbar_scrolling_view_behavior" to the viewPager