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="enterAlways
The former feature means that the tabs will be 'pinned' on top when scrolling upwards
And thats all