I'm trying to use both Toolbar and TabLayout with CollapsingToolbarLayout but I'm getting a very strange behavior with the tab layout. The idea is to have the TabLayout with a transparent background when the Toolbar is expanded, and when collapsed, to be under the Toolbar like any other Activity with both Toolbar and TabLayout.
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:theme="#style/Theme.MaterialComponents.Light.NoActionBar"
android:layout_width="match_parent"
android:layout_height="250dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#color/primary"
app:expandedTitleTextAppearance="#style/CollapsingToolbarExpandedTitleTheme">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#null"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
app:titleTextAppearance="#style/ToolbarTitleTheme"
app:layout_collapseMode="pin"/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
android:layout_gravity="bottom">
<com.google.android.material.tabs.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.google.android.material.tabs.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
UPDATE: Following the example mentioned by # ismail alaoui (https://android.jlelse.eu/parallax-scrolling-header-tabs-android-tutorial-2cc6e40aa257), the layout better, but the TabLayout is still WHITE. There's no Style associated with it.
UPDATE: Adding android:background="transparent" to the TabLayout, as #ismail suggested, solves this issue. I also added an style to the TabLayout (Widget.MaterialComponents.TabLayout.Colored) just to improve the layout.
i suggest you to follow this tutorial , it explain how to do what you are exactly looking for , it's not using androidx component , but you can use it the same way , enjoy !
edit :
add this to appBarLayout and TabLayout attribute :
android:background="#android:color/transparent"
Related
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>
`
In my application I want show BottomNavigation bottom of CoordinatorLayout and for this I write below code :
<?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/main.appbar"
android:layout_width="match_parent"
android:layout_height="150dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
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">
<include
android:id="#+id/mainToolbar"
layout="#layout/toolbar_main" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<com.aurelhubert.ahbottomnavigation.AHBottomNavigationViewPager
android:id="#+id/mainViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/mainBottomNavigation"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.aurelhubert.ahbottomnavigation.AHBottomNavigation
android:id="#+id/mainBottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:layout_anchorGravity="bottom"
app:selectedBackgroundVisible="true" />
</android.support.design.widget.CoordinatorLayout>
But when run application show me BottomNavigation top of CoordinatorLayout!
How can I show BottomNavigation bottom of CoordinatorLayout ?
I hope the answer is not too late. I just had the same problem, I used android:layout_gravity="bottom".
I have a Toolbar, a BottomNavigationView, and in the middle, I have a FrameLayout that is used as a placeholder for a fragment. 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_main"
android:minHeight="?attr/actionBarSize">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorTab"
app:layout_scrollFlags="scroll|enterAlways"
/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<android.support.v4.view.ViewPager
android:id="#+id/slide_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:itemBackground="#color/colorTab"
app:itemIconTint="#drawable/bottom_navigation_toolbar"
app:itemTextColor="#drawable/bottom_navigation_toolbar"
app:menu="#menu/bottom_bar"
/>
</android.support.design.widget.CoordinatorLayout>
Also check out this question, it uses almost the same layout, and it also shows how to change the behavior of the BottomNavigationView so that it hides when you scroll. If you wish to implement that feature make sure to create the class BottomNavigationBehavior (or whatever you want to call it) and add this line to your BottomNavigationView in XML:
app:layout_behavior="com.yourpackage.yourpackage.BottomNavigationBehavior"
Hope it helps!
This helps me resolve the issue of bottom of view going behind bottom navigation bar.
I have resolved it by:
adding app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
to the BottomNavigationView.
Changing the parent layout of ActivityMain to CoordinatorLayout &
Adding android:layout_gravity="bottom" to BottomNavigationView.
I'm trying to work with different AppBarLayouts in one Activity.
When a Fragment is loaded, it can call a "ToolbarManager", that handles the replacing of the currently active Toolbar (namely an AppBarLayout).
For some of these Toolbars (using CollapsingToolbarLayout) I want them to draw behind the StatusBar.
This works fine when setting the "fitsSystemWindow" to true in the XML.
But when using just a Toolbar with layout_scrollFlags="scroll", the Toolbar Title is displayed even behind the StatusBar.
To avoid this, I want to disable the "fitsSystemWindow" when loading such a Toolbar by using setFitsSystemWindow(false).
Disabling works fine, but when re-enabling by setFitsSystemWindow(true) for using with CollapsingToolbarLayout, the StatusBar is colored and the Toolbar is placed below the StatusBar with a padding in size of the StatusBar on top.
Image: Drawn below StatusBar instead of behind
When I don't use setFitsSystemWindow(true) and just set it to true in the XML layout, the display of CollapsingToolbarLayout is fine.
Is this a bug in setFitSystemWindow or is this method just different from the XML attribute?
Here are the layouts I use:
Activity:
<android.support.v4.widget.DrawerLayout 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"
android:id="#+id/drawer_layout"
android:fitsSystemWindows="true"
tools:context=".activities.MainActivity"
style="#style/AppTheme">
<android.support.design.widget.CoordinatorLayout
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:id="#+id/coordinator_layout">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="wrap_content">
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragment_container"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</FrameLayout>
<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
android:indeterminateDuration="1000"
android:layout_marginBottom="-7dp"
android:id="#+id/loadingBar"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_gravity="center_horizontal|bottom"
android:gravity="bottom"/>
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/include_navigationview" />
The AppBarLayout is replaced every time a new Fragment is loaded.
The following layout is the Toolbar which should not draw behind the StatusBar, but the Toolbar should scroll (leaving only the TabLayout visible)
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:id="#+id/toolbar_discover"
android:fitsSystemWindows="true"
android:paddingBottom="0dp">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/AppTheme.Toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|snap">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tablayout_discover"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabMode="fixed"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
This used to work when I set fitsSystemWindows=false on the CoordinatorLayout in the MainActivity Layout. When doing so, the following CollapsingToolbar cannot draw behind the StatusBar.
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:id="#+id/toolbar_account"
android:fitsSystemWindows="true"
android:paddingBottom="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:id="#+id/collapsingToolbarLayout">
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:id="#+id/banner_image"
android:src="#mipmap/img_header"/>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="#+id/toolbar"
android:fitsSystemWindows="false"
android:layout_height="?attr/actionBarSize"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/AppTheme.Toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I am new for CoordinatorLayout i want to use coordinatorLayout in my application but it cause some problem in display CollapsingToolbarLayout view.
i want to design view like whatsApp screen Tabs in Coordinatorlayout
My XML Code
<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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="false"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="32dp"
app:expandedTitleMarginStart="24dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<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.v7.widget.Toolbar>
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabanim_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabanim_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
// child view
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>`
I Found Solution for Tabs in CoordinatorLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/tabanim_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/tabanim_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/tabanim_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.v7.widget.Toolbar>
/***
Here You can add custom layout
**/
<android.support.design.widget.TabLayout
android:id="#+id/tabanim_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabanim_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
CoordinatorLayout is delicate sometimes, I suggest you to follow the next example using it as a base and adding more complexity step by step if you need:
https://gist.github.com/RicardAparicio/f41523daaa0edbe0b4399549fff4da3f
Hope it helps.
"but it cause some problem in display" doesn't say what kind of problem You had, glad You found the solution though.
There is indeed problem in both 22.2.1 and 23.0.1 support libraries with TabLayout and ViewPager in CoordinatorLayout while using fitsSystemWindows="true". While using RecyclerView and scrolling it up TabLayout header goes into status bar while it's background color is not being pinned.
I might only imply that above was one of Your problems, if yes then removing fitsSystemWindows is not best solution as application will loose a lot of it's look in 5.0+ Android.
It is not good solution either but I managed to fix this issue by adding nested android.support.design.widget.CoordinatorLayout, but if You use DrawerLayout there, then nothing is needed as shown in this example: https://github.com/chrisbanes/cheesesquare
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