intive Argentina Blog

Material Motion, las animaciones de Material Design

Hoy queremos contarles sobre cómo crear y aplicar transiciones en apps de Android, siguiendo las últimas políticas y actualizaciones de Material Design de Google.

Podrán notar que el paquete Android transition fue agregado con Kitkat en la API 19 y se encuentra actualmente en la librería de soporte a partir de la API 14. Dicho paquete incluye las nuevas funciones de «Scenes» y «Transitions» que describiremos en detalle a continuación.

SCENES (transiciones dentro de una pantalla)

Las scenes se utilizan para lograr transiciones dentro de una pantalla, aunque a este tipo de transiciones también las podemos lograr creando una “transition” (ver más abajo el módulo de transitions).

Normalmente se utilizan para aquellas situaciones en las que precisamos cambiar un layout por otro. A cada layout se lo denomina Scene.

  • Cómo crear la Scene:

Ejemplos

  1. sceneRoot : Es el layout por el que se va a reemplazar. Ejemplo: findViewById(R.id.root)
  2. layoutId : Es el layout que se va a inflar para mostrarse. Ejemplo: R.layout.activity_main_scene_info
  3. context : Es el context de la aplicación. Ejemplo: MainActivity.this
  • Cómo arrancar la transición:

Esto es, llamar al método go del transition manager pasándole una scene.

TRANSITIONS

Por su parte, los transitions contienen la información de la animación que se va a realizar con el cambio de Scene. Las diferentes transiciones que han ido introduciendo por cada paquete son:

API 19: Fade, AutoTransition (Default), ChangeBounds, Transition Set

API 21: Explode, Slide, ChangeClipBounds, ChangeImageTransform, ChangeTransform

Veamos entonces cómo crear y aplicar una “transition”. Podrán observar que hay dos opciones por las que podemos encaminarnos a la hora de su creación: una es utilizando XML, y la otra es de manera programática. En ambos casos, la utilización de la “transition” será solo de manera programática.

  • Opción 1 (con XML)

¿Cómo crear una transición con xml?:

¿Cómo utilizar una transition realizada con xml?:

  • Opción 2 (de manera programática)

¿Cómo crear una transición programáticamente y usarla?:

 

Elementos compartidos entre pantallas

Los elementos compartidos entre pantallas fueron agregados en la API 21 con Android Lollipop, y no están incluidos en librerías de soporte para versiones anteriores, al menos oficiales. La idea de los elementos compartidos es hacer más fluido el cambio de Scene, manteniendo un elemento compartido entre ellas. Se suele utilizar una sola view compartida entre Scenes para que el usuario no se distraiga con varias vistas que van de un lado o otro.

Cuando utilizamos Activities, es necesario activar la función, no así en el caso de utilizar Fragments. Veamos cómo sería el proceso.

  • ¿Cómo activar esta función cuando trabajamos con Activities?

  • ¿Cómo identificar el elemento compartido?

Al elemento compartido lo podemos identificar como el atributo Android: transitionName en ambas pantallas

Pantalla 1:
layout/activity_a.xml

Pantalla 2:
layout/activity_b.xml

  • ¿Cómo utilizar elementos compartidos con Activities?

Para utilizar elementos compartidos cuando trabajamos con Activities, debemos pasar un bundle en el intent

**debe coincidir con el “transition” name.

  • ¿Cómo aplicar una transición entre dos fragments?

Como se puede apreciar, el sharedElement es la view en el Fragment que está desapareciendo que matchea con la vista en el fragment nuevo.

En FDV aplicamos recientemente shared elements para algunas de las apps que desarrollamos. En los videos a continuación, podrán apreciar ejemplos de shared elements utilizados para nuestros clientes. Tanto en la app de Avantrip como en la de Beautiful Losers, logramos que con una pequeña animación, se compartan las fotografías entre dos pantallas.

Aquí les dejamos algunas librerías de soporte no oficiales (no están probadas):

https://github.com/andkulikov/transitions-everywhere
https://github.com/takahirom/PreLollipopTransition
https://github.com/lgvalle/Material-Animations
https://github.com/guerwan/TransitionsBackport

Algunas referencias:

https://developer.android.com/reference/android/support/transition/package-summary.html
http://developer.android.com/intl/es/reference/android/transition/package-summary.html
http://developer.android.com/intl/es/reference/android/app/FragmentTransaction.html#addSharedElement

¡Esperamos hayan encontrado útil este artículo! A la espera de que nos muestren sus propias animaciones para sus apps con Material Design, y nos compartan sus experiencias, ¡nos despedimos hasta la próxima!

Diego Pappalardo

Diego Pappalardo desarrolla aplicaciones Android para la compañía desde septiembre de 2015. También es Team Leader de la brigada Android, en la que coordina el desarrollo de investigaciones y escritura de artículos. Se recibió en 2009 en la Universidad Tecnológica Nacional de ingeniero electrónico. Además de ser un rockstar con Android, Diego conoce mucho de  Java, Git, dispositivos móviles y  desarrollo de software en general.

Deja un comentario