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.