En este nuevo capítulo de Material Design vamos a explicar el componente CoordinatorLayout y los elementos que nos permitirán crear animaciones sencillas pero que a la vez quedan muy bien.

¿Qué es CoordinatorLayout?

Se trata de un FrameLayout con una potencia gráfica muy conseguida.

Puede proporcionar muchas interacciones diferentes entre vistas, además sus vistas pueden implementar su propio comportamiento a través de la clase CoordinatorLayout.Behavior.

Pasos para integrarlo:

• Añadirlo a Gradle

Debemos añadir a nuestro fichero de build.gradle la siguiente línea.

compile 'com.android.support:design:24.2.1'

• Modificar el tema de nuestra app

Nuestro tema debe extender de Theme.AppCompat.Light.NoActionBar

Tipos de integración:

A continuación vamos a definir tres formas de integrarlos en nuestras apps

• Coordinator Layout + NestedScrollView

Las vistas contenidas en el CoordinatorLayout (en este caso un AppBarLayout, un NestedScrollView y un FloatingActionButton) serán automáticamente animadas en base a la configuración especificada por XML. No tendríamos que hacer nada por código. Para este ejemplo hemos decidido que el NestedScrollView sea el que “empuje” al AppBarLayout que a su vez contiene una Toolbar, un ImageView y tiene anclado el FAB en su parte inferior derecha. El resultado será unas animaciones muy gratas para la experiencia de nuestros usuarios.

Para hacer todo ello sólo debemos tener los conceptos claros:

1. Debe ser el contenedor de toda nuestra vista, ya que es el que se encarga de animar las vistas en su interior de manera sincronizada y suave.
2. Si queremos usar la Toolbar debemos incluirla dentro de un elemento android.support.design.widget.CollapsingToolbarLayout, éste contiene tanto la Toolbar como el ImageView que queremos que tenga el efecto “Parallax” hasta que se colapse por completo (app:layout_collapseMode="parallax"). Una vez que se ha colapsado la imagen se ocultará automáticamente. Este componente irá contenido dentro de un elemento android.support.design.widget.AppBarLayout que será la encargada de gestionar todas las animaciones de desplazamientos. Todos los elementos contenidos en él deben tener especificada la propiedad layout_scrollFlags que indicará el comportamiento de los elementos cuando se produzca el Scroll. En nuestro ejemplo lo hemos especificado como “scroll|exitUntilCollapsed”, de esta forma la vista será colapsada hasta llegar a su altura mínima. Todos los tipos están en el siguiente enlace.
3. Una vez definida nuestra barra de navegación y su comportamiento, sólo tenemos que añadir el componente android.support.v4.widget.NestedScrollView y su propiedad app:layout_behavior con el valor "@string/appbar_scrolling_view_behavior" para que las animaciones de scroll estén relacionadas con respecto al Scroll de este componente.
4. El último elemento que hay que añadir es el android.support.design.widget.FloatingActionButton que simplemente mostrará un botón junto a la Toolbar. El efecto de ocultación es automático, no tenemos implementar nada para que lo haga. Debemos especificar dos propiedades a este componente:

1. 1. layout_anchorGravity, estableceremos la alineación con respecto a la vista a la que lo hemos fijado.
   2. layout_anchor, indicará a la vista que fijaremos el componente.

5. Propiedad fitsSystemWindows a true. Ésta establecerá si la vista debe tener en cuenta o no las decoraciones de los elementos del sistema, como la barra de estado.

Una vez que hemos seguido todos los pasos obtendremos un comportamiento como el que podemos ver en el siguiente vídeo.

https://www.youtube.com/watch?v=iLmvwlaQvmw

A continuación dejaremos un enlace con el código de como quedaría:

https://github.com/franlopjur/CoordinatorLayout/blob/master/activity_main.xml

• Coordinator Layout + RecyclerView

https://www.youtube.com/watch?v=UVpvmoSiEIs

Otra configuración muy útil es el añadir un RecyclerView en el CoordinatorLayout, de esta forma el título de la toolbar se animará hasta quedar totalmente colapsada y el título colocado en su sitio. Los cambios son menores ya que simplemente tenemos que sustituir el NestedScrollView por nuestro RecyclerView, quedando algo así:

<android.support.v7.widget.RecyclerView

android:id="@+id/home_screen__recycler"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:clipToPadding="false"

android:padding="8dp"

android:scrollbars="vertical"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />

El Coordinator se encargará de animar las vistas para que quede perfecto.

• Coordinator Layout + RecyclerView + TabLayout

https://www.youtube.com/watch?v=zQ1hO-4-bho

En este caso incluiremos el layout con las tabs con el fin de que al hacer Scroll en el Recycler, tanto la imagen como la toolbar se colapsen hasta que solo quede el TabLayout en la parte superior. De esta forma ganamos amplitud de pantalla para que el usuario pueda ver el listado de una forma más cómoda. Para ello simplemente tendremos que añadir el componente TabLayout dentro del CollapsingToolbarLayout y configurarlo en código para que muestre las tabs:

TabLayout tabLayout = (TabLayout) findViewById(R.id.home_screen__tabs);

tabLayout.setTabMode(TabLayout.MODE_FIXED);

tabLayout.addTab(tabLayout.newTab().setText("Kotlin"));

tabLayout.addTab(tabLayout.newTab().setText("Scala"));

tabLayout.addTab(tabLayout.newTab().setText("Java"));

De esta forma vamos a crear un TabLayout que contendrá tres tabs, además todas ocuparán lo mismo (setTabMode(TabLayout.MODE_FIXED)).

Como podemos observar, podemos crear animaciones de una forma sencilla pero dando ese toque distintivo a nuestras apps y consiguiendo una más que notable experiencia de usuario. ¡Espero que te haya gustado!