Collapse to Tabs

The new Material design support library basically handles this feature. This is by the use of the CoordinatedLayout which can take any interactions like drags, swipes, flings, or any other gestures.
When it comes to handling collapse to tabs on scrolling, CoordinatedLayout is placed as the root as follow
<android.support.design.widget.CoordinatorLayout
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/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="android.aaron.com.material.ui.CollapseToToolbarActivity">
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/primary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="enterAlways"
>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Notice that Toolbar has an attribute app:layout_scrollFlags="scroll|enterAlways".
The scroll feature means that the Toolbar will be scrolling off the screen during upscrolling while the enterAlways means that it will 'enter' to its initial place during downscrolling. Hiding animations, when to hide and when to 'reveal' are all taken care of by the library.
Tabs do scroll up and down but never 'disappear. This is done but using the following attributes
app:layout_collapseMode="pin"
app:layout_scrollFlags="enterAlwaysThe former feature means that the tabs will be 'pinned' on top when scrolling upwards
And thats all