How to fix footer properly which is inside CoordinatorLayout

Question

I tend to further elaborate from this

Android - footer scrolls off screen when used in CoordinatorLayout

and

https://code.google.com/p/android/issues/detail?id=177195

I wish to hide TabLayout while performing scrolling on RecyclerView. That's why I have the following layout.

<CoordinatorLayout>
    <CollapsingToolbarLayout>
        <TabLayout>
    <ViewPager>
        <RecyclerView>
        <Footer>

For my situation, I have a ViewPager which contains multiple fragments.

Most of the fragments, contains RecyclerView and footer. They look like the following

<LinearLayout>
    <RecyclerView />
    <LinearLayout id="@+id/footer" />
</LinearLayout>

Unfortunately, the footer is movable when scrolling, although I would like it to be static.

Note, it is important to have app:layout_behavior to place in ViewPager instead of RecyclerView. If not, TabLayout will not appear.

My implementation is as follow

my_fragment.xml

<?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/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways|snap">

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabIndicatorColor="?attr/portfolioTabIndicatorColor" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="org.yccheok.xxx.CustomScrollingViewBehavior"
        />

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

The very key class is org.yccheok.xxx.CustomScrollingViewBehavior, which is copied and pasted from https://stackoverflow.com/a/33396965/72437

org.yccheok.xxx.CustomScrollingViewBehavior is the best solution I can find so far. However, it is far from perfect, as it yields the following behavior.

It causes flickering, when you scroll up a little, and release your finger. Please refer to the following video.

https://youtu.be/8RvCZJeQvS0

I was wondering, based on proposed solution at https://stackoverflow.com/a/33396965/72437, is there any further improvement I can done on CustomScrollingViewBehavior class, to avoid flickering effect?

Answer 1

I was able to achieve what I want, by following tutorial at

https://mzgreen.github.io/2015/02/15/How-to-hideshow-Toolbar-when-list-is-scroling%28part1%29/

http://mzgreen.github.io/2015/02/28/How-to-hideshow-Toolbar-when-list-is-scrolling%28part2%29/

The key ideas are

1. Don't use CoordinatorLayout
2. Place TabLayout and RecyclerView within FrameLayout, so that TabLayout will overlay on the top of RecyclerView
3. Add top padding on RecyclerView. Having android:clipToPadding="false" is important as well.
4. To hide/ show TabLayout during scrolling, attach HidingScrollListener to RecyclerView.

The shortcoming for this solution is that, requiresFadingEdge will no longer work on RecyclerView, due to the top padding.