Hide TabLayout on Scroll of Content instead of ToolBar

Question

I want to hide TabLayout on scrolling my content. Currently I searched the net but I found samples which hide the Toolbar, but I want to hide TabLayout. So please help me. I

Answer 1

While doing animation on scroll, CoordinatorLayout starts searching all the children views of AppBarLayout in a linear manner and it stops animating layouts once it finds a layout with non-scrolling tag.

Exp1:

<CoordinatorLayout>
    <AppBarLayout>
         <layout1 with scrollFlag = "scroll|enterAlways">
         <layout2 with no scrollFlag>
    </AppBarLayout>
</CoordinatorLayout>

Only layout1 will have animation

Exp2:

<CoordinatorLayout>
    <AppBarLayout>
         <layout1 with no scrollFlag>
         <layout2 with scrollFlag = "scroll|enterAlways">
    </AppBarLayout>
</CoordinatorLayout>

None of them will have animation

Exp3: If none of them have scrollFlag, none of them will have animation

Exp4: If both of them have scrollFlag, both of them will have animation

---

In your case, you'll need to keep toolbar outside the coordinator layout and add tablayout as a child of AppBarLayout with scrollFlags = "scroll|enterAlway"

Answer 2

Hello is you wish to disappear the toolbar and the tabs still view, you must write the next code:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|enterAlways"
        ></android.support.v7.widget.Toolbar>

And if you want hide the TabLayout use scrollFlags in the block of TabLayout

app:layout_scrollFlags="scroll|enterAlways"

Answer 3

Try this approach. The main idea is to move Toolbar outside the CoordinatorLayout and wrap this view structure with other container layout.

<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.support.design.widget.AppBarLayout
        android:id="@+id/id_toolbar_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.v7.widget.Toolbar
            android:id="@+id/id_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|exitUntilCollapsed" />
    </android.support.design.widget.AppBarLayout>

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/id_toolbar_container">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/id_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:layout_scrollFlags="scroll|enterAlways">

                <android.support.design.widget.TabLayout
                    android:id="@+id/id_tabs"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize" />
            </android.support.design.widget.CollapsingToolbarLayout>

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+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.CoordinatorLayout>
</RelativeLayout>

Answer 4

You need to move the Toolbar as top view in the layout and replace it with View that will placehold previous Toolbar space and will scroll as TabLayout does, inside your AppBarLayout.

Here is how you need to set your layout.

<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/preview_top_parent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"> 
<android.support.design.widget.AppBarLayout...> 
<android.support.v4.view.ViewPager...>    
<android.support.v7.widget.Toolbar/>    <-!--- Toolbar is direct child of CooridnatorLayout and z-order above all views --!->
</android.support.design.widget.CoordinatorLayout>

Here is video