Técnicas de Scroll

Según la documentación de Google sobre Material Design

Cuando se diseña un comportamiento de scroll, las App Bars contienen cuatro regiones principales (también llamadas bloques) que conforman la estructura de scrolling:

  • Status bar
  • Tool bar
  • Tab bar/search bar
  • Espacio flexible.

¿Cómo se añade?

I. En tu archivo build.gradle añade la última versión de la librería design:

dependencies {  
    compile 'com.android.support:design:X.X.X'
    // X.X.X especifica la versión
}

II. Haz que tu actividad extienda de android.support.v7.app.AppCompatActivity

public class MainActivity extends AppCompatActivity {  

III. Añade la Toolbar dentro de un AppBarLayout, y éste a su vez dentro de un CoordinatorLayout:

<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:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:elevation="@dimen/toolbar_elevation">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            style="@style/AppTheme.Widget.Toolbar"/>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

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

A partir de este momento, la configuración depende de de ciertos flags:

App Bar Estándar: Desaparece al hacer scroll

La Toolbar necesita especificar los siguientes flags con el parámetro app:layout_scrollFlags:

  • scroll: se mostrará y ocultará con el scroll de la vista que especifiquemos.
  • enterAlways: Siempre que hacemos scroll hacia arriba, la vista vuelve a aparecer, en lugar de esperarse a que finalice el scroll.
  • snap: Si la vista se queda semi-visible cuando se detiene el scroll, se mostrará u ocultará por completo automáticamente.
<android.support.v7.widget.Toolbar  
    ...
    app:layout_scrollFlags="scroll|enterAlways|snap"/>

También hay que indicar la vista de la que se observará el scroll, en este caso el ViewPager. Se usará app:layout_behavior:

<android.support.v4.view.ViewPager  
    ...
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

Tabs

Las tabs (o pestañas) suelen permanecer ancladas en la parte superior cuando la App bar se oculta. Para ello, tendremos que añadir las tabs al AppBarLayout. La anterior configuración es suficiente para que se comporte como queremos:

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

    <android.support.v7.widget.Toolbar
        ...
    />

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.DarkOverlay"/>

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

Espacio flexible

Para generar App bars de tamaño flexible, necesitaremos el componente CollapsingToolbarLayout, usado dentro de un CoordinatorLayout.

<android.support.design.widget.AppBarLayout  
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:theme="@style/AppTheme.DarkOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            tools:src="@mipmap/ic_launcher"/>

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

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

Espacio flexible con imagen

Muy similar al anterior, pero añadiendo una imagen al CollapsingToolbarLayout.

<android.support.design.widget.AppBarLayout  
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.DarkOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:layout_collapseMode="parallax"/>

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

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

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

Espacio flexible con contenido solapado

La App bar se encuentra inicialmente por detrás del contenido, y durante el scroll se hace más pequeña hasta que alcanza su posición. A partir de ese punto el contenido pasa por debajo de ella. Se necesita app:behavior_overlapTop en la vista de la que se observa el scroll.

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="172dp"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/AppTheme.DarkOverlay"
            android:background="@null"
            app:layout_collapseMode="pin"/>

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

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

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:behavior_overlapTop="64dp"/>

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