I am using android support design 'com.android.support:design:22.2.1' my problem is that when the scroll has no content in it, the collapsing toolbar still enables the collapse action. I need to remove the collapsing of the view if the scroll has no content in it.
My XML :
<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/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="#android:color/white"
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">
<fragment
android:id="#+id/pawfile_header"
android:name="com.lightbulb.pawesome.fragments.PawfileHeaderFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<fragment
android:id="#+id/pawfile_timeline"
android:name="com.lightbulb.pawesome.user_timeline.PawesomeUserTimelineFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
UDPATE QUESTION:
I'm done with disabling and enabling the collapsing of the view. I used this line of code in order to disable the collapsing:
AppBarLayout.LayoutParams appbarParams = (AppBarLayout.LayoutParams) collapsingToolbar.getLayoutParams();
appbarParams.setScrollFlags(0);
collapsingToolbar.setLayoutParams(p);
The problem is that the appbar is force to have the elevation of the scrollflags is set to 0. I tried using appbar.setElevation(0) but it has no effect. how can I remove the elevation from my appbar?
get your appbarlayout reference and set the setScrollFlags.
AppBarLayout.LayoutParams p = (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
p.setScrollFlags(0);
toolbar.setLayoutParams(p);
Try appbarParams.setScrollFlags(-1); and appBarLayout.setExpanded(true, true) to remove the elevation.
And if you have recyclerView in the fragment, try recyclerView.setNestedScrollingEnabled(false);
Need to disable expand on CollapsingToolbarLayout for certain fragments
To stop collapse of collapsingtoolbar dont give
app:layout_scrollFlags="scroll|exitUntilCollapsed" in the XML file..You can remove that code
By "scroll has no content in it", I take it that you mean "there is no fragment". For that, I think you'll have to first change the <fragment> to a <FrameLayout> , then add the fragment programatically using getFragmentManager().beginTransaction() , and then check if the fragment is present (i.e. not null) like so:
if (getFragmentManager().findFragmentById(R.id.fragment_name) != null) {
// here try RKNP's code to disable the appBar from collapsing
}
Related
I am trying to use CollapsingToolbarLayout but getting this blue space under my content. Collapsed state doesn't have this problem.
The Empty space under the expanded content seems to be equal to status bar height. I am unable to understand why that would happen.
My xml looks like this
<android.support.design.widget.CoordinatorLayout
android:fitsSystemWindows="true" ...>
<android.support.design.widget.AppBarLayout
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true" ...>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed|enterAlwaysCollapsed"
app:statusBarScrim="#android:color/transparent">
<android.support.constraint.ConstraintLayout
android:id="#+id/expanded_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax".../>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:navigationIcon="?attr/homeAsUpIndicator"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<android.support.constraint.ConstraintLayout.../>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Update
I found a workaround for the time being
collapsingToolbar.post {
val params = (collapsingToolbar.layoutParams as ViewGroup.MarginLayoutParams)
params.height = findViewById<View>(R.id.expanded_toolbar).height
collapsingToolbar.layoutParams = params
}
I think you should try changing the layout_height of your collapsing toolbar to wrap_content instead of match_parent
I believe that the blue color is because of the toolbar within the collapsing toolbar. So you should make sure that your background is applied to the appbar layout, or the collapsing toolbar layout.
However, that may cause problems since you're using an image background instead of just a color. So I recommend that you keep track of the collapsing toolbar's status, whether it's collapsed or open, and update your background accordingly.
Setting "match_parent" in the constraint inside the CollapsingToolbarLayout works for me:
<android.support.constraint.ConstraintLayout
android:id="#+id/expanded_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax".../>
Here is the 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"
android:id="#+id/main"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="100dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/mytoolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="#string/app_name"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/main_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_collapseMode="none"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!--<android.support.v4.widget.NestedScrollView-->
<!--android:id="#+id/nestedscroll"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="match_parent"-->
<!--android:fillViewport="true"-->
<!--android:scrollbars="horizontal"-->
<!--app:layout_behavior="#string/appbar_scrolling_view_behavior">-->
<android.support.v4.view.ViewPager
android:id="#+id/main_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.support.design.widget.FloatingActionButton
android:id="#+id/main_fab"
android:layout_margin="16dp"
android:src="#android:drawable/ic_media_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/main_viewpager"
app:layout_anchorGravity="bottom|end"/>
</android.support.design.widget.CoordinatorLayout>
The problem:
1) Toolbar is not visible.
2) Collapsing toolbar doesn't collapse at all. [Solved]
3) Viewpager and FAB also not visible if put inside nestedScrollView. [Solved]
Extra detail:
Layout for fragments of Viewpager have Linearlayout as root and inside that have a recyclerview.
Everything seems to be alright as per the code. Unable to understand what is missing. A good explanation of how coordinator layout and collapsing toolbar work together would also indeed help.
1) Toolbar is not visible.
First of all you need define what Toolbar do you want to use in your activity class:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Change existing xml code:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:title="#string/app_name"
app:layout_collapseMode="parallax">
</android.support.v7.widget.Toolbar>
to:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" //set initial height
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" //this might be also useful
app:title="#string/app_name"
app:layout_collapseMode="parallax" />
2) Collapsing toolbar doesn't collapse at all.
Did your activity using correct theme. Set to your AppBarLayout:
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
as in this example: include_list_viewpager.xml
3) Viewpager and FAB also not visible if put inside nestedScrollView.
There's no reason to do that. Adding these lines:
android:layout_marginTop="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
to ViewPager should be enough.
Both of them should be direct children of CoordinatorLayout.
Follow this example: http://blog.nkdroidsolutions.com/collapsing-toolbar-with-tabs-android-example/
If you're new to Material Design or feel a bit lost with some its behaviours, I highly recommend to check Chris Banes Material Design project cheesequare: https://github.com/chrisbanes/cheesesquare/
Hope it will help
First of all you should tell your activity that what toolbar you are using, so in onCreate method you should have:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
your second and third problem should solve together. You should use NestedScrollView as the main layout for fragments inside ViewPager and then inside that, put your LinearLayout or anything else.
I am trying to create some combined layout using CoordinatorLayout and also CollapsingToolbarLayout.
In the first state, when we on the most top page, and didn't scrolled yet, I want the toolbar to expend as shown below (yes, i did it):
In the second state, when starting to scroll down, the image and toolbar should disappear, as shown below (only tab will show):
And in the last state once I am at some point in the list (but not the top of the list) I want to start scrolling up, once I start scrolling up I want the toolbar (and not the expended one with the image) to start whowing, as shown below (if didn't reaches the top of the list, the image will not show, only the toolbar):
I was able to achive the the first state, but the other 2 state are problematic,
once toolbar is implemented inside CollapsingToolbarLayout, the flexability of what I can do with it outside of CollapsingToolbarLayout component is not clear.
I can't make the toolbar hide, if I do so, then it will only be shown once I reaches the top.
Anyways, my current XML (showing below) is in state where the first picture is implemented, but once I start scrolling down, the toolbar stay at the top and do not hide. Note: I must tell the toolbar to stay "pin" because if I didn't then the information inside the toolbar disappear, and only an empty toolbar will show (that's for another post, but it still interesting to know why this happen?).
here is my current xml:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/benefit_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_material_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<include
android:id="#+id/toolbar_search_container"
layout="#layout/search_box"
android:layout_height="192dp"
android:layout_width="match_parent"
app:layout_collapseMode="parallax"
/>
<include
android:id="#+id/toolbar_benefit"
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentScrim="?attr/colorPrimary"
/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/benefit_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
app:tabIndicatorColor="#color/accentColor"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/black"
app:tabIndicatorHeight="4dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/benefit_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include
layout="#layout/floating_btn_benefits"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
/>
</android.support.design.widget.CoordinatorLayou
I have fixed the issue, just to clerify, I wanted my Toolbar to be able to expand with a paralex image once it reaches the top, but I also wanted the toolbar to disappear if scrolling down, and show itself again (without the paralex image) once I scroll up. the paralex image effect should only displayed if I reaches the top.
So basically the solution is, change the component CollapsingToolbarLayout with the following attribute:
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
and also change toolbar component with the following attribute
android:minHeight="?attr/actionBarSize"
regarding my paralex effect image (which is my toolbar_search_container) I shouldn't add any layout_scrollFlags to it.
So why is it working?
To understand it, you need to know what is enterAlwaysCollapsed,
The enterAlwaysCollapsed effects views that added the minHeight attribute. this means, every child of CollapsingToolbarLayout which have minHeight will be effected by this attribute.
So my toolbar will be effected.
enterAlwaysCollapsed attribute definition in simple words:
Assuming enterAlways is declared and you have specified a minHeight, you can also specify enterAlwaysCollapsed. When this setting is used, your view will only appear at this minimum height. Only when scrolling reaches to the top will the view expand to its full height..."
Well, isn't this exactly what we want? (do not answer this retorical question ;) )
One more thing to add, the parallax component (toolbar_search_container) is depends on the toolbar to expand, and because the toolbar will expand only when it reaches the top, then this is all just working great!
The new code is :
<android.support.design.widget.CoordinatorLayout
android:id="#+id/benefit_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_material_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
>
<include
android:id="#+id/toolbar_search_container"
layout="#layout/search_box"
android:layout_height="192dp"
android:layout_width="match_parent"
app:layout_collapseMode="parallax"
/>
<include
android:id="#+id/toolbar_benefit"
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:contentScrim="?attr/colorPrimary"
app:layout_collapseMode="pin"
android:fitsSystemWindows="true"
/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/benefit_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
app:tabIndicatorColor="#color/accentColor"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/black"
app:tabIndicatorHeight="4dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/benefit_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include
layout="#layout/floating_btn_benefits"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
/>
</android.support.design.widget.CoordinatorLayout>
Add this line of code to your CollapsingToolbarLayout
app:layout_scrollFlags="scroll|snap|enterAlways|enterAlwaysCollapsed"
I have a CollapsingToolbarLayout setup and im placing a wallpaper there. I want to be able to stop it from collapsing all the way.
I have tried minheight and many other things but can't figure it out.
How can i get it to stop collapsing to the second screenshot?
View when activity is loaded
Desired Stopping Point
Current Stopping Point
CollapsingToolbarLayout works really closely with Toolbar and as such the collapsed height depends on the toolbar.
I was able to solve your problem using this layout (Note it goes into the normal CoordinatorLayout/AppBarLayout Setup, With Fab and a NestedScrollView or RecyclerView):
<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"
app:statusBarScrim="?attr/colorPrimaryDark"
app:contentScrim="#android:color/transparent"
app:titleEnabled="false"
>
<!-- There isnt a contentSCrim attribute so the toolbar is transparent after being
collapsed
Disabled the title also as you wont be needing it -->
<ImageView
android:id="#+id/image_v"
android:layout_width="match_parent"
android:layout_height="360dp"
android:layout_gravity="center"
android:scaleType="centerCrop"
android:src="#drawable/md2"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
tools:ignore="ContentDescription"
/>
<!-- Normal Imageview. Nothing interesting -->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="168dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
<!-- The toolbar is styled normally. However we disable the title also in code.
Toolbar height is the main component that determines the collapsed height -->
<TextView
android:text="#string/app_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?attr/colorPrimaryDark"
android:paddingLeft="72dp"
android:paddingRight="0dp"
android:paddingBottom="24dp"
android:paddingTop="24dp"
android:textColor="#android:color/white"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
/>
<!-- The title textView -->
</android.support.design.widget.CollapsingToolbarLayout>
The related activity looks like this:
...
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
// Disable toolbar title
getSupportActionBar().setDisplayShowTitleEnabled(false);
...
Here's a video of the interaction
I have faced with the same problem.
First I just set the height of Toolbar as described in previous answers and it works.
But this led to another problem. Toolbar view eat touch events, so my collapsing view (which is MapView) does not take any touch events in its part overlapped by the Toolbar.
Finally my solution is to remove Toolbar from CollapsingToolbarLayout. In my case it is OK because I have used it only to restrict collapsing.
And to set the minimum collapsing height in onCreateView like this:
CollapsingToolbarLayout layoutCollapsing = (CollapsingToolbarLayout) rootView.findViewById(R.id.layoutCollapsing);
layoutCollapsing.setMinimumHeight(120);
Just add the desired stop-height to your toolbar and set app:contentScrim="#00000000" for your CollapsingToolbarLayout.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#00000000"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/ImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="100dp"
/> <!-- set desired stop-height as height -->
</android.support.design.widget.CollapsingToolbarLayout>
I need to create a GUI with a ListView and an ActionBar which will hide when scrolling down and when scrolling up it must reappear.
The following guides didn't help me:
https://mzgreen.github.io/2015/06/23/How-to-hideshow-Toolbar-when-list-is-scrolling%28part3%29/
https://github.com/ksoichiro/Android-ObservableScrollView
I need something like this:
If you would like to obtain a list with this behaviour, you should:
add the design support library with compile 'com.android.support:design:22.2.0'
Use a CoordinatorLayout with a Toolbar where you have to define app:layout_scrollFlags="scroll|enterAlways"
Use a RecyclerView instead of a ListView. As described here ListView and the GridView have the expected behavior with the CoordinatorLayout only with API>21. In this case you have to use setNestedScrollingEnabled(true);
The official blog post shows this case:
<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">
<! -- Your Scrollable View -->
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways">
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I would recommend using the new support design library by Google.
Include it in your dependecies:
compile 'com.android.support:design:22.2.0'
and then use the AppBarLayout together with NestedScrollView.
For your Toolbar define app:layout_scrollFlags="scroll|enterAlways", which says it will disappear as you scroll, and come back immediately if you scroll up (meaning you don't have to scroll all the way up).
<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.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.NestedScrollView>
Use [CoordinatorLayout]:https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html, which allow co-oridanation among child views. it's like, act(AppBarLayout->scrolling) on some view when there is a behaviour observed(ListView->scroll) in another view.
Make Listview nestedScrollingEnabled, works for >API 21
android:nestedScrollingEnabled="true"
Trigger layout behaviour to appbar scrolling.
android:nestedScrollingEnabled="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
Any layout(ToolBar/TabLayout/any), which is required to show-hide/scroll, place it inside AppBarLayout, and enabled scroll flag.
app:layout_scrollFlags="scroll|enterAlways"
you should use CoordinatorLayout for this task. It is part of the support design library. Here, in the CoordinatorLayout and the app bar section, you can find an example