Diseñando aplicaciones Android con Material Design (IV)

Volvemos a la carga con esta sección dedicada a los desarrolladores y los diseñadores. En la anterior entrega de esta sección, introducimos uno de los conceptos más importantes de cara al diseño en Material Design: las animaciones.

Si ya hemos hablado de la importancia de las superficies y cómo organizar y mostrar la información, no menos importante es la forma en que ésta aparece. Es decir, convertir el contenido estático en contenido dinámico.

Las primeras animaciones

Para comprender las animaciones en Material Design, primero deberíamos saber de dónde venimos.

En las anteriores versiones de Android utilizábamos la clase AnimationSet, con la cual podíamos definir  en nuestros recursos dististos elementos bajo la carpeta anim.

Luego, en Android 4 llegó ViewPropertyAnimator y ObjectAnimator, nuevas clases que pretendían ayudar a automatizar las animaciones, muchas veces tan complejas de gestionar.

TransitionManager, la remodelación

Entonces, con la llegada de Android KitKat, llegó una clase para facilitarlo todo: TransitionManager. Esta clase nos permitirá gestionar las animaciones de forma mucho más fácil y sencilla, consiguiendo las animaciones estándares de una forma realmente simple.

Originalmente incluían 4 posibilidades, pero con la llegada de MaterialDesign, se añadieron 5 más, entre las cuales destacan ya por ejemplo transformaciones o explosiones.

Esto nos llevaba a una nueva API de Animación, la cual nos permitía esta gestión a través de TransitionManager de una forma eficaz y pudiendo aislar las animaciones en los recursos (en las carpetas anim, transition…).

Transición entre actividades

Una de las animaciones más importantes es la que gestionamos al hacer cambios de pantalla, pues muchas veces es clave esta transición para captar la atención del usuario.

Como desarrolladores debemos optimizar este proceso, para lo que utilizaremos transiciones de contenido, como en el ejemplo anterior. Y hemos de destacar que es clave no sólo cómo gestionamos la entrada de una nueva pantalla, sino también la salida de la anterior.

Animando elementos compartidos

Si queremos conseguir una fluidez clave en las pantallas, una de las mejores opciones pasa por gestionar la transición en base a elementos compartidos, como podemos ver en la anterior imagen. Esto llevará a que el usuario no vea ese salto de pantallas, lo que lo hará realmente llamativo.

Para ello utilizaremos, por ejemplo, un elemento tipo Grid, sobre el cual montaremos una animación de transición basándonos en uno de sus elementos. A partir de ahí, es jugar según nos interese con él.

Y si aprendemos a jugar correctamente con estas animaciones, conseguiremos una aplicación tan pulida al nivel de diseño y visual, que conseguiremos captar la atención de los usuarios de una forma superior al resto de aplicaciones. Por ello, desde aquí os animamos, nunca mejor dicho, a que no dejéis en el olvido esta parte. ¡Hasta la semana que viene!