How to create a layout like Twitter profile page in Android

Question

I am developping an app that has a page where there must be a header followed by multiple recycler views within a viewpager. However, I do not know how to "hide" the header when scrolling down.

The following layout would not work :

- RecyclerView
    - Header
    - SlidingTabLayout
    - ViewPager
        - RecyclerView

Because a verticaly scrollable view cannot be put inside another verticaly scollable view. But it is possible to create this type of layout in another way because twitter did it :

So how does one achieve to create this type of layout?

Theorical solution suggestion

If we had this layout :

- LinearLayout
    - Header
    - SlidingTabLayout
    - ViewPager
        - RecyclerView

And when the RecyclerView is scrolled, we would move manually every element upwards so the Header would progressively be "hidden" and the ViewPager would be higher, could it work?

Answer 1

Because a verticaly scrollable view cannot be put inside another verticaly scollable view

That is not true, you can put scrollable view into another scrollable view. It is only very hard to manage the scrolling events and most of the times it is not necesseary. You should not nest scrollable views.

However, there are interfaces for NestedScrollingChild and NestedScrollingParent which, when implemented properly can hadle the scrolling events. The commonly used case is nesting a RelativeLayout or NestedScrollView within a CoordinatorLayout. This is also how you could implement a Twitter–like layout.

You can find information in the blogpost announcing the Android Design Support Library or many other tutorials. The basic layout you should use is following

<android.support.design.widget.CoordinatorLayout
    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:layout_height="192dp"
        android:layout_width="match_parent">

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

            <android.support.v7.widget.Toolbar
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"/>

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

    <! -- Your Scrollable View -->
    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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