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

Question

I need to hide Tablayout and Filter Layout when scroll in fragment's GridView. Here I tried to hide only Tablayout by refers this link but its not working. How to Hide two layouts when scroll.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/ll_main_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="false"
    android:orientation="vertical">

        <android.support.design.widget.CoordinatorLayout
        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.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/tab_layout_discover"
                    style="@style/AppTabLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:elevation="6dp"
                    android:minHeight="?attr/actionBarSize"
                    app:tabTextAppearance="@style/AppTabTextAppearance"
                    app:layout_scrollFlags="scroll|enterAlways"/>
            </android.support.design.widget.CollapsingToolbarLayout>

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

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager_discover"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

Here shared my example

where are filter layout and toolbar in the xml? – GPack Jul 09 '16 at 07:05 — GPack, Jul 09 '16 at 07:05
That is in main Fragment – Naveen Kumar M Jul 12 '16 at 06:00 — Naveen Kumar M, Jul 12 '16 at 06:00

score 3 · Accepted Answer · answered Jul 09 '16 at 23:37

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);
    }
});

score 1 · Answer 2 · answered Jul 13 '16 at 06:31

I also suggest you to use RecyclerView as it has more powerful features which are compatible with old Api Versions.

To achieve the desired result you should do something like this:

 rvList.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);

            if (dy > 0) {
                Log.d("TAG", "SCROLL Up");// scrolling up
                parentView.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        parentTabs.setVisibility(View.VISIBLE);
                    }
                }, 300);

            } else {
                Log.d("TAG", "SCROLL Down");
                parentTabs.setVisibility(View.VISIBLE);
            }

        }

        @Override
        public synchronized void onScrollStateChanged(RecyclerView recyclerView,
                                                      int newState) {
            super.onScrollStateChanged(recyclerView, newState);
            if (newState == AbsListView.OnScrollListener.SCROLL_STATE_TOUCH_SCROLL) {
                onScroll();
            }
            // If scroll state is touch scroll then set userScrolled
            // true
            if (newState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE) {

                parentView.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        parentTabs.setVisibility(View.VISIBLE);
                    }
                }, 1000);

                onIdle();
            }
        }

    });

score 0 · Answer 3 · edited May 23 '17 at 12:32

I think I solved a similar situation in this post: Dynamic Endless RecyclerView scrolling issues

This is the keyword: app:layout_scrollFlags="scroll|exitUntilCollapsed" With this setting the item contained is going to scroll until disappear.

You can nest the two scrolling layout in order to scroll away the filter in the parent and than the tab in the container.

The two layout should be like this:

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

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/app_bar_layout"
>
<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
>

---- include here everything you want to scroll away ----
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
---- this is your pager or whatever is the content
<include layout="@layout/fragment_pager"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"

android:layout_below="@+id/app_bar_layout"

/>

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

I hope it helped.

score 0 · Answer 4 · answered Jul 19 '16 at 11:33

After refers below Harlon and Muhammad answers, Finally I achieve this hide / shown with animation.

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

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                visibleItemCount = gridLayoutManager.getChildCount();
                totalItemCount = gridLayoutManager.getItemCount();
                pastVisiblesItems = gridLayoutManager.findFirstVisibleItemPosition();
                if (dy > 0 && !isShow) {
                    isHide = true;
                    view.postDelayed(new Runnable() {
                        @Override
                        public void run() {

                            discoverFragment.llFilterTabContatiner.animate().alpha(0).setDuration(500).translationYBy(-discoverFragment.llFilterTabContatiner.getHeight()).setListener(new AnimatorListenerAdapter() {
                                @Override
                                public void onAnimationEnd(Animator animation) {
                                    discoverFragment.llFilterTabContatiner.setAlpha(1);
                    discoverFragment.llFilterTabContatiner.setVisibility(View.GONE);
                              }
                            });
                        }
                    }, 500);
                } else if (dy < 0 && !isHide) {
                    isShow = true;

                    view.postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            discoverFragment.llFilterTabContatiner.setVisibility(View.VISIBLE);
                            discoverFragment.llFilterTabContatiner.setAlpha(1);
                            discoverFragment.llFilterTabContatiner.animate().setDuration(500).translationY(0).setListener(new AnimatorListenerAdapter() {
                                @Override
                                public void onAnimationEnd(Animator animation) {
                                    discoverFragment.llFilterTabContatiner.setAlpha(1);
                                    isShow = false;
                                }
                            });

                        }
                    }, 500);
                }

                if (pastVisiblesItems == 0 && gridLayoutManager.getChildAt(0) != null && gridLayoutManager.getChildAt(0).getTop() == 0) {
                    swipeRefreshLayout.setEnabled(true);
                } else {
                    swipeRefreshLayout.setEnabled(false);
                }

                if ((visibleItemCount + pastVisiblesItems) >= totalItemCount) {
                    if (CommonUtil.isConnectingToInternet(context)) {
                        pbViewMore.setVisibility(View.VISIBLE);
                        startPaginationAsync();
                    }
                }
            }
        });

the view refers to filter container. refer image on my question. and isHide is false in beginning i.e onCreate or globally — Naveen Kumar M, Feb 08 '18 at 04:17

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

4 Answers4