Hagamos un ejemplo de cómo implementar transiciones en nuestras aplicaciones. Aquà tengo la aplicación que hemos estado trabajando durante todos nuestros cursos. Es nuestra aplicación de contactos. Y como observamos pues hasta el momento nuestra aplicación se ve asÃ. Tenemos una ligera transición que es más bien las transiciones que nos proporciona el sistema operativo Android en la versión que estemos. Y bueno esta es la aplicación que tenemos hasta el momento. Vamos a darle un poco más de movimiento a todo esto que está aquÃ. Todo este cambio que hago desde esta actividad hasta llegar a esta. Y vamos a trabajar las transiciones. Como you vimos, tenemos tres tipos de transiciones. Tenemos la transición explode, la transición slide y la transición fade. Entonces qué te parece si para trabajar esta pantalla vamos a generar una transición explode. Y el modo en que lo vamos a estar trabajando, que es la manera más fácil que hasta el momento tenemos, es a través de solamente código Java, puro código Java. Vamos a estar trabajando en la transición explode. Entonces para esto es muy importante que antes de realizar cualquier transición analices un poco el estatus o qué es lo que va a realizar exactamente la transición. Es decir, por ejemplo en este caso es una transición muy breve. Pero me encuentro en la actividad A, digamos, que la actividad A es la que tiene esta lista de perritos. Y lo que yo quiero es pasar de la actividad A a la actividad B. Y precisamente esa transición entre la actividad A y la actividad B es donde yo voy a darle un efecto. Ahora, como vimos en los vÃdeos anteriores, podemos agregar estos efectos que you les dijimos cuáles eran. El efecto explode, el efecto slide o el efecto fade. Yo puedo agregarlos a una transición donde yo puedo decir que ese efecto se agregue cuando yo estoy saliendo de la actividad A y llegando a la actividad B. Yo puedo decir que ese efecto, por ejemplo el efecto explode, ocurra mientras la actividad A está saliendo. O al mismo tiempo yo puedo decir que el efecto, por ejemplo, slide ocurra cuando estoy llegando a la actividad B. O puedo decir también de otra forma que el efecto fade, por ejemplo, ocurra cuando estoy regresando a la actividad A. Entonces voy a tener varios estatus de los movimientos que hago entre mis actividades. Cuando la actividad está saliendo. Cuando la actividad está llegando, por decirlo asÃ, o entrando. Y cuando la actividad está regresando a su actividad anterior. Entonces estos eventos precisamente los voy a estar cachando en el métodos setExitTransition, cuando la actividad está saliendo, setEnterTransition, cuando la actividad está entrando. Y setReturnTransition, cuando la actividad está regresando a su estado anterior. Entonces en esas transiciones, en esos tres momentos, yo puedo meter el efecto fade o el efecto slide o el efecto explode. Entonces hagamos que esta actividad cuando sale tenga el efecto explode. Y de acuerdo a nuestro proyecto, como lo tenemos organizado, es que cuando yo paso de la actividad A a la actividad B, es en el momento en el que yo le doy clic a esta foto. O a cualquiera de las que están aquÃ. Entonces como lo que estoy manejando es un recycler view, yo tengo que localizar donde está ese método on clic de la foto. Entonces el método on clic de la foto si recuerdas está en mi clase contactoAdaptador. Esta es la estructura de cómo tengo mi proyecto. Por supuesto el proyecto está disponible en el GitHub que más adelante te voy a colocar el enlace del GitHub. Y entonces yo tengo aquà mi proyecto en la carpeta Java. Buscaré en la carpeta adapter y ahà está la clase ContactoAdaptador. Vamos a abrir esa clase y especÃficamente en esa clase ContactoAdaptador voy a buscar dentro, voy a buscar en mi RecyclerViewAdapter, en mi clase ContactoAdaptador RecyclerViewAdapter. Voy a buscar el método onBindViewHolder. Donde recuerdas que ahà está el view image foto que es exactamente este view que tenemos en la tarjeta, en la card view. Y entonces aquà tenemos you nuestro método onClick. Este método onClick lo que está haciendo es que a través de un intent está yendo a la ventana de detalle contacto. Y entonces aquà tenemos activity.startActivity(intent). Bien, como hemos visto anteriormente en los vÃdeos, las transiciones es una caracterÃstica que fue incluida en Android Lollipop, en la versión 5.0 de Android. Por lo tanto en versiones anteriores esta caracterÃstica en especial no va a estar disponible. Las transiciones no están disponibles en versiones anteriores a Android. Entonces, por lo tanto lo que yo voy a tener que hacer es generar precisamente esa detección o esa validación de versiones que mi aplicación en algún momento debe estar manejando. Es decir, a nivel de código la aplicación debe detectar en qué versión se encuentra del sistema operativo Android. Y entonces a partir de ahà habilitar la opción de transiciones. Entonces la forma en que haré esos será colocando un if. Voy a colocar mi if antes de activity.startActivity. Entonces voy a colocar un if y a través de la clase Build voy a poner .VERSION.SDK_ INT. Que esto en realidad lo que me está dando es la versión del sistema operativo donde está corriendo mi aplicación. Entonces yo tengo que comparar que la versión del sistema operativo donde corre mi aplicación si esta versión es mayor o es igual a precisamente la versión Lollipop. Y la versión Lollipop la traerá también a partir de la clase Build.VERSION_CODES_CODES.LOLLIPOP. Entonces gracias a esta validación yo puedo decidir en qué momento ejecutar mis transiciones. Entonces dijimos que vamos a trabajar con la transición explode. Yo más arriba estoy acarreando un objeto activity que viene desde el momento en el que estamos instanciando ContactoAdaptador y se pasa por aquÃ, etc. Pero si estás corriendo esto lo podrÃas correr en un contexto de actividad. O sea, podrÃas estar trabajándolo en tu clásico MainActivity que esté heredando directamente de la clase Activity. Y entonces podrÃas ejecutarlo directamente como getWindow y asà sucesivamente. Pero en mi caso como no estoy en un contexto de actividad pues yo tengo que colocar activity, el contexto que estoy trayendo y entonces gerWindow. Si tú estuvieras en una actividad solamente partirÃas de aquà en adelante. Entonces serÃa getWindow. Dijimos que el efecto de explode se va a ejecutar cuando la actividad parta hacia la actividad B. O cuando la actividad salga hacia la actividad B. Entonces por eso colocamos setExitTransition. Y simplemente dentro de este método vamos a colocar la instrucción new Explode. Y además después de esto voy a colocar activity.startActivity. Y vamos a pasar el intent que estamos trabajando arriba, y le voy a poner ActivityOptionsCompat.makeSceneTransition- Animation. Le voy a poner de nuevo activity. En estos lugares donde estoy colocando activity, especÃficamente aquÃ, si tú estás trabajando en un contexto de actividad puedes colocar this solamente. Después necesitaremos por acá abajo nuestro objeto view que estamos recopilando en nuestro método onClick. Y después un parámetro. Colocaremos asà por el momento porque más adelante lo vamos a estar trabajando. Bien, es todo. Y vamos a poner al final .toBundle. Voy a darle aquà un salto de lÃnea. Con esto estamos habilitando que esta caracterÃstica, este efecto explode está pasando como transición de la actividad A en la que estoy. Y al iniciar la actividad B entonces se ejecute ese efecto. Entonces vamos a darle play para ver cómo se ve. Y you estoy corriendo el proyecto. Entonces de de este lado vamos a tener la forma en que se ve el proyecto sin transiciones. Y de este lado vamos a trabajar cómo se empieza a ver con transiciones. Bien, entonces vamos a ver. Aquà vamos a darle clic. Y se alcanza a ver por ahà el efecto. Pero estamos teniendo por ahà algo extraño. Y eso es porque se está ejecutando dos veces el método startActivity. Muy bien. Si alguna de las versiones no está trabajando con esto entonces es importante colocar un else y entonces ejecutar un startActivity sencillo. Vamos a correrlo de nuevo. you está. Le voy a dar play, le voy a dar clic. Ahà está. Si observaste el efecto explode. El efecto explode es básicamente todos los demás elementos, es como si explotaran y entonces salen disparados uno en cada dirección. Por ejemplo si yo le doy clic aquà y entonces se ve la foto del animalito. Le doy clic acá, se ve la foto del perrito. Y en comparación con lo que tenemos aquà pues este efecto simplemente se ve el efecto de que la actividad se sobrepone a la otra. Y aquà you se ve mucho mejor. Además el efecto que nosotros le pasamos, new Explode, lo pasamos como un objeto directo. Podemos nosotros también estar manipulando un poco el efecto explode creando directamente un objeto. Llamémoslo de forma aparte. Y puedo estarle colocando new Explode, asÃ. Y entonces a explode colocarle .setDuration, por ejemplo. Entonces yo puedo hacer que la duración sea un poco más prolongada. Aquà la duración se mide en milisegundos. Entonces yo puedo hacer que la duración se vea asÃ. Entonces tomando el objeto por aparte puedo empezar a manipular más opciones. Puedo estar trabajando con los métodos que lo componen. Entonces vamos a incrementar la duración para ahora ver cómo es que esto se está viendo. Vamos a correrlo. Y you está listo. Le voy a dar play. Y alcanzas a observar que la transición se está dando de una forma más lenta. Y acuérdate que esta transición está dándose cuando la actividad A está saliendo para llegar a la actividad B. Perfecto. Ahora vamos a trabajar con los siguientes efectos que tenemos. Con el efecto slide y el efecto fade. Yo quiero que ocurra algo lindo. Que cuando llegue yo a la actividad B que ocurra un efecto como de slide. Entonces voy a estar trabajando con el slide y además con el método setEnterTransition. Entonces voy a irme en mi código a la actividad B, que esta actividad B es especÃficamente la actividad DetalleContacto. Esa actividad DetalleContacto la tengo aquà a nivel casi en la raÃz de mi proyecto, en la raÃz de mi package. La voy a abrir y aquà de la misma forma tengo que colocar la misma validación. La voy a colocar debajo de donde estuvimos trabajando con Picasso. Básicamente es comparar Build.VERSION.SDK_INT. Que sea mayor o igual a Build.VERSION_CODES.LOLLIPOP. Y entonces aquà dentro trabajar mis transiciones. Y acá afuera trabajar cualquier otra cosa que en este caso pues no corresponda a transiciones. Entonces el efecto slide, yo voy a crear aquà un objeto. Y le voy a dar Slide slide = new Slide. Y entonces yo puedo decir que este slide tenga una duración .setDuration de unos 500 milisegundos. Y entonces puedo decirle getWindow. Como observas aquà sà estoy en un contexto de actividad y entonces puedo llamar directamente al método set getWindow. Aquà el método que voy a estar trabajando es que quiero que cuando la actividad entre, entonces voy a poner setEnterTransition. Cuando la actividad entre entonces ejecuta el efecto slide. El objeto que acabo de definir. Entonces al mismo tiempo. Yo puedo estar trabajando con varias transiciones o con varios efectos. Pero puedo trabajar varios efectos en diferentes momentos. you trabajamos cuando la actividad está saliendo en la parte de setExitTransition. Pero ahora cuando la actividad está llegando. También yo podrÃa trabajar cuando la actividad está regresando a la actividad anterior con el método setReturnTransition. Voy a hacer que cuando voy a poner aquà getWindow.setReturnTransition, que cuando regrese entonces se ejecute el método Fade. Listo. Vamos a probar esto. Los cambios you fueron aplicados. Vamos a darle aquà regresar. Perfecto. Entonces vamos a darle clic al perrito. Y como observas se ejecuta el método slide y regresa con un efecto de fade. Esta ahà el slide yendo de abajo hacia arriba y con efecto de fade. Ahora, a este efecto de slide, yo puedo estar trabajando con él varias direcciones. Porque puedo hacer slide en varias direcciones especÃficamente. Como observamos pues ahorita el slide se está dando de abajo hacia arriba. Y además está yendo en una velocidad de 500 milisegundos, medio segundo más o menos. Entonces yo puedo trabajar las direcciones del slide. Por ejemplo, el método constructor de la clase Slide es precisamente quien recibe la dirección o el sentido hacia donde debe ejecutarse el slide. Yo puedo utilizar por ejemplo la clase Gravity, punto. Yo puedo utilizar BOTTOM, puedo utilizar TOP, puedo utilizar RIGHT, puedo utilizar LEFT. Y asà varios parámetros de la clase Gravity. Por ejemplo, vamos a hacer que el slide ahora se dé a la derecha. Me voy a regresar aquÃ. Vamos a hacer que el efecto además dure un poco más. Para que podamos ver más pronunciado el efecto. Vamos a correrlo de nuevo. Listo, you está. Voy a darle aquà clic. El efecto se da desde la derecha, más bien el slide proviene de la derecha. Puedo regresar y aquà de nuevo está hacia la derecha. Esto mismo puedo utilizar RIGHT, puedo ahora colocar LEFT. De nuevo. Corremos. Y ahora proviene de la izquierda. Puedo hacer el TOP. Y al hacer clic proviene de abajo hacia arriba. El que particularmente a mà me gusta más es el de BOTTOM. Y me gustarÃa que aquà fuese como unos 1200 para ver el efecto. Voy a darle aquà back. you está. Y ahà está el de bottom, como que viene de abajo hacia arriba y como que da mayor el efecto de Material Design. Bien, estos son parámetros que podemos estar trabajando en la clase slide. Y entonces recuerda que podemos generar eventos de entrada, eventos de salida y eventos de regreso. Adicionalmente podemos trabajar con algo que se conoce como elementos compartidos. Y son esas transiciones que ocurren cuando este elemento, por ejemple esta foto, está siendo compartida en la actividad en la otra actividad. Entonces cuando yo tengo un elemento de la actividad inicial A y que este elemento es compartido en la actividad final B, yo puedo manejar una animación en ese elemento que está siendo compartido. Entonces para hacer esto tenemos que detectar el elemento en particular. Por ejemplo esto, que es la imagen, es una imagen que primeramente esta imagen aquà en esta actividad A está contenida en una tarjeta. Y coincidentemente la imagen que está en la actividad B también está contenida en una tarjeta. Entonces este card, esta tarjeta de la actividad A la voy a encontrar en la carpeta RES en layout. Y si recuerdas se llamaba cardview_grid_contacto. Y el elemento en el que debo estar trabajando es especÃficamente en la foto, o en elemento ImageView. Entonces ahora debo detectar el elemento que está en la segunda actividad, en la actividad B. Y si mal no recuerdo esto es un activity, entonces debe estar en el activity_detalle_contacto_foto. Debe estar ahi. Es esto. Y entonces aquà está también nuestro ImageView que se llama imgFotoDetalle. Bien. Si nosotros queremos trabajar con esto una animación, en que este elemento al momento de llegar acá tenga una animación, yo debo trabajar una propiedad que se llama android:transitionName. Y entonces lo que yo coloque aquà tiene que ser lo mismo en ambos elementos. Es un parámetro, es simplemente un identificador. Entonces dice android:transitionName. El identificador lo voy a estar dando de alta en el archivo string. Y le voy a poner transicion_foto. Voy a darle un clic, un alt + enter para crear el valor string value. Y le voy a poner animacion_foto. Entonces esta propiedad también debe tenerla. Voy a dar un copiar, debe tenerla el CardViewContacto, especialmente en el image_foto. Entonces debe tenerla quien tu quieras que esté compartiendo la animación. Bien, you tenemos este parámetro que hay que definir en el layout. Ahora debo detectar de nuevo el clic. Dónde se está dando la animación inicial. El clic está aquà en mi contacto adaptador en el método on clic de la foto. Entonces en el método on clic de la foto, donde yo tenÃa activity.startActivity(intent. Recuerdas que habÃamos colocado esta clase ActivityOptionsCompat.makeSceneTransition y habÃamos dejado este parámetro vacÃo. Muy bien. Este parámetro debe tener precisamente la llave o la clave que nosotros definimos como transition name para estos elementos compartidos. Para que el código Java le asigne una animación a esos elementos. Y entonces como comparten el mismo nombre le asignará la animación a ambos elementos. Voy a ponerle un activity.getString. Recuerda que si tú estás en un contexto de activity simplemente dices getString directamente. Y lo que voy a hacer es accesar el recurso R.string. Se llamaba transicion_foto. Perfecto. Vamos a correrlo. Es todo lo que hay que colocar. Simplemente el parámetro que se está compartiendo. Lo estamos corriendo, está you apunto de lanzarse. Y listo. Entonces vamos a ver cómo se ve la transición. Voy a darle clic a la foto. Y se ve cómo la foto como que entra y se pone al foco, y entonces regresa. Entonces igualmente por acá, asà entra la foto y regresa. Y entonces nos da ese efecto como si la foto se hiciera grande, si tuviera un efecto de zoom sobre la transición. Bien. Pues estos son algunos tipos de transiciones que podemos manejar, los efectos que Material Design maneja. El efecto explode, el efecto slide, el efecto face. Manejamos también los eventos en las transiciones como setExitTransition. Una transición de salida, una transición de entrada, una transición de regreso. Transición es cuando elementos compartidos y además un último detalle que también podemos estar capturando, es que podemos estar capturando los callbacks que tenga una transición en especÃfico. ¿Y esto cómo lo hacemos? Es que a veces nosotros necesitamos detectar cuándo la transición you terminó. Es decir, esto setEnterTransition se da cuando la actividad está entrando. Pero a veces yo quisiera saber ¿En qué momento está iniciando la transición y en qué momento está terminando la transición? Para eso yo necesitaré saber precisamente los call backs que nos estará devolviendo este efecto. Entonces yo puedo accesar al objeto slide y colocar .addlistener y entonces dentro colocaré el objeto new transition listener. Y entonces me estará trayendo, sobre escribiendo todos los métodos callback de ese efecto en esa transición. Entonces, como observas pues una transición también tiene un ciclo de vida comenzará con iniciándose. Cuando la transición en algún momento se cancele o se ponga en pausa o se termine, o cuando esté también en un estado de onResume. Entonces yo podrÃa estar por acá trabajando. Y voy a manejar unos toast. Aquà no olvides poner el punto y coma. Entonces voy a manejar aquà un toast. Yo probablemente quisiera saber cuándo la transición está empezando. Entonces empezando la transición. O yo quisiera saber especÃficamente cuándo la transición you terminó. ¿Esto para qué? ¿Para qué me servirÃa hacer esto? ¿Para qué me servirÃa conocer? Porque yo podrÃa estar personalizando más animaciones. O podrÃa decir que cuando la transición termine entonces colócale un texto o pinta de color un elemento y etcétera. ¿No? Podemos hacer muchos efectos sobre los call backs de transiciones. Entonces vamos a correr esto para ver cómo es que estamos detectando este call back, que éste se da en el efecto de slide. Bien, entonces al darle clic aquà nos lanza empezando y termina. Entonces como observas está detectando cuándo empieza la transición y además cuándo termina. Por supuesto estos toast tienen que ver más también la forma en cómo se están mostrando. Con la cantidad de tiempo que dura cada toast. Pero lo que nos importa es que ambos toast se están ejecutando en un orden efectivo. Cuando un toast, cuando una transición inicia y cuando la transición termina. Entonces esto es interesante. Esa es la forma en como podemos estar trabajando transiciones en Android con Material Design.
