Hide Tablayout on Scroll of Content Instead of Toolbar

Hide TabLayout on Scroll of Content instead of ToolBar

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>

How to hide TabLayout instead of Toolbar on Recyclerview OnScroll?

Try this :)

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:openDrawer="end">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

</LinearLayout>

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapse_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|enterAlways"
            app:titleEnabled="false">

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:tabMaxWidth="0dp"
                app:tabGravity="fill"
                app:tabMode="fixed">
            </android.support.design.widget.TabLayout>
        </android.support.design.widget.CollapsingToolbarLayout>

    <include layout="@layout/content_main" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_alignParentEnd="true"
            android:layout_margin="@dimen/fab_margin"
            android:layout_above="@+id/bottom_navigation"
            app:srcCompat="@drawable/ic_filter_list_white_24dp"
            android:layout_alignParentRight="true" />

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            app:itemBackground="@color/colorBottomNavigationBar"
            app:itemIconTint="@drawable/bottom_main_nav_item_style"
            app:itemTextColor="@drawable/bottom_main_nav_item_style"
            android:layout_gravity="bottom"
            app:menu="@menu/bottom_nav_items" />

    </RelativeLayout>

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

<LinearLayout
    android:id="@+id/platforms_filter_drawer"
    android:background="@color/colorPrimaryD"
    android:layout_width="215dp"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:orientation="vertical" >

    <RelativeLayout
        android:paddingTop="12dp"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/filter_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:gravity="center_vertical"
            android:text="FILTER"
            android:textColor="@android:color/white"
            android:textSize="@dimen/header" />

        <Button
            android:textColor="@android:color/white"
            android:textSize="@dimen/header"
            android:id="@+id/btn_clear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:visibility="invisible"
            android:text="CLEAR"
            android:backgroundTint="@color/md_red_600"/>

    </RelativeLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@color/md_grey_700" />

    <ListView
        android:id="@+id/left_drawer_list"
        android:layout_width="215dp"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />

</LinearLayout>

Toolbar and TabLayout don't hide when I scroll the RecyclerView up

You can make it programmatically by adding the addOnScrollListener method.

On the RecyclerView.SCROLL_STATE_DRAGGING method hide the toolbar and TabLayout and on RecyclerView.SCROLL_STATE_IDLE method you can show it again if you want to show them again.

You can try it in such way:

recyclerview.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
    if (newState == RecyclerView.SCROLL_STATE_IDLE) {
        // Show your view again.. If you want to show them..
    } else if (newState == RecyclerView.SCROLL_STATE_DRAGGING) {
        // Hide your view..
    }

    super.onScrollStateChanged(recyclerView, newState);

}});

Or You can use recycler view's addOnScrollListener method:

Refer: addOnScrollListener

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    if (dy > 0) {
        //Scrolling down
        // Show your controllers from here
    } else if (dy < 0) {
        //Scrolling up
        // Hide your controllers from here
    }
}});

Also, you can add some animations there to show and hide your toolbar and tab layouts.

How to hide the tab when scrolling

Is it possible to also scroll while hiding my TABS?

First: In your Toolbar, you have set : app:layout_collapseMode="pin" and this means it will be pinned at top. Then after, app:layout_scrollFlags="enterAlways|scroll" means it should be scrollable and pass when scrolling Activity.

So, remove: app:layout_collapseMode="pin" from Toolbar.

Second: remove app:layout_scrollFlags="scroll|enterAlways" from CoordinatorLayout also.

I couldn't see any Tabs in the layout, i suppose you are using TabLayout inside Fragments. If you are trying to hide TabLayout + Toolbar, place FrameLayout inside the NestedScrollView then, place TabLayout under the Toolbar and inside AppBarLayout then if you set:

app:layout_scrollFlags="enterAlways|scroll"

To both Toolbar and TabLayout they will be hidden after scrolling.

How to hide Only Tablayout when scroll in Fragment's GridView?

It seems that GridView's onScrollListener can not get dx and dy. GridView's setOnScrollChangeListener can do it but requires API level 23.

I suggest you use RecyclerView with GridLayoutManager instead of GridView, it is easy to use.

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        if (dy < 0) {
            // hide the layout here
        }
    }

    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);
    }
});

hide tablayout of appbarlayout Android

I am able to solve issue by moving margins and padding of AppBarLayout to Toolbar and TabLayout

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@color/purple"
android:orientation="vertical"
tools:context=".ui.BottomNavigationActivity">

<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/search_toolbar"
android:background="@color/purple"
android:elevation="0dp"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<androidx.appcompat.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    app:layout_scrollFlags="scroll|enterAlways"
    **android:layout_marginTop="@dimen/fragment_top_margin"**>

<include layout="@layout/custom_search_bar_home" />

</androidx.appcompat.widget.Toolbar>

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabRippleColor="@null"
    app:tabIndicatorColor="@null"
    app:tabTextAppearance="@style/TabTheme"
    app:tabSelectedTextColor="@android:color/white"
    app:tabTextColor="@color/whiteOpacity40"
    app:tabMode="fixed"
    app:tabGravity="fill"
    app:layout_scrollFlags="scroll|enterAlways"
    app:tabMaxWidth="0dp"
    app:tabPaddingStart="0dp"
    app:tabPaddingEnd="0dp"
    **android:paddingBottom="19dp"**>

</com.google.android.material.tabs.TabLayout>
    </com.google.android.material.appbar.AppBarLayout>

<androidx.viewpager.widget.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background_white_round_top_corners20"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

---

Related Topics