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 tried below 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.support.design.widget.AppBarLayout
        android:id="@+id/id_appbar"
        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_scrollFlags="scroll|enterAlways"/>

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

    </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>

Here is the example applications: https://play.google.com/store/apps/details?id=com.contextlogic.wish https://play.google.com/store/apps/details?id=co.vine.android

Hephaestus

could you clarify your target: hide both Toolbar and TabLayout or just TabLayout (and leave Toolbar visible)? – Scarcity

Yes Exactly. I want to hide Tab and leave Toolbar as visible. – Hephaestus

Answer 1

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>

Scarcity

whether the title was in the first version? i.e. it disappeared after these changes? – Scarcity

Hey Sorry, this works fine. I have to uncomment the line supportActionBar.SetDisplayShowTitleEnabled(false); – Hephaestus

Thanks, For helping, But Now I'm stuck on weird position. How can I implement NavigationDrawer with my existing requirement. So first navigation item(fragment1) has tab and second navigation items does not has tab. So please help me on that scenario. – Hephaestus

It's rather difficult to recommend the best solution with no information on the architectural details of your app (interconnection of Navigation Drawer, activities, fragments and adapters). Take a look on this article. Hope it will be helpful for you. – Scarcity

Thanks, for your help. I will look in to that link and if not works, do I have to ask another question? – Hephaestus

I created a sample project. Is there any way to upload that on SO or I have to upload that to dropbox. Sorry I'm new to SO. – Hephaestus

Yes, I think that worthwhile to make this question as a separate post. And you can quote valuable parts of your sample project there – Scarcity

Thanks. I will make a new question. – Hephaestus

It works even without android.support.design.widget.CollapsingToolbarLayout. – Rain

Answer 2

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"

Zoogeography

Answer 3

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"

Chirpy

Tony, the OP wants the opposite to what you have provided. – Agar

Yeah only consider my last comment – Chirpy

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

Centuplicate

Please Provide proper demo, that what should AppBarLayout contains. – Hephaestus

Please don't look for copy and paste solution. I explained it in the text. – Centuplicate