contacto[arroba]digitallearning.es

Proyecto Android: transiciones y animaciones con Material Design

Post Series: Material Design

En este tutorial, vamos a desarrollar un proyecto Android donde mostraremos varias funcionalidades de Material Design, el nuevo lenguaje de diseño implementado con Android 5.0 Lollipop. 

En esta aplicación ejemplo, tendremos la posibilidad de seleccionar una película de un listado que presentamos en pantalla, y mostrar información de la misma, utilizando diferentes animaciones asociadas a eventos del usuario sobre la pantalla y transiciones entre activities.

Vemos dos pantallas de la Aplicación (lista de películas y la sinopsis de una de ellas) y un gif animado debajo donde se visualizan esos efectos, al mover y seleccionar una película de la lista:

 

Lista peliculas en la App

App ejemplo: sinopsis película

Transicciones en la App ejemplo

 

Se comenzará en primer lugar por enumerar los elementos necesarios para el desarrollo del proyecto que denominaremos “TransicionesAndroidLollipop”:

  • Clase SplashScreen, que herede de la clase base Activity, encargada de lanzar una pantalla de presentación al iniciar la aplicación, proporcionando una mayor inmersión del usuario en la aplicación.
  • Clase MainActivity, que herede de la clase base Activity, que permite visualizar un listado de películas, que al seleccionar cualquier imagen del listado, mostrará una transición definida con el nuevo estilo material design para lanzar una nueva activity.
  • Clase Adaptador, que herede de la clase base BaseAdapter, que sobrescribe una serie de métodos, que permiten construir una vista personalizada para el componente de selección GridView.
  • Clase TransicionActivity, que herede de la clase base Activity, que posibilita la lectura de la sinopsis de la película seleccionada, mostrando una transición de entrada y salida al lanzar la nueva activity, además de una animación al pulsar la imagen asociada a la sinopsis.
  • Layout activity_splash_screen.xml, formado por una componente de tipo ImageView, que mostrará el logotipo de la aplicación.
  • Layout activity_main.xml, formado por un componente de tipo selección GridView, que mostrará un listado de imágenes de grandes películas de la historia.
  • Layout activity_transicion.xml, formado por un TableLayout, donde se definen varias filas formadas por un componente ImageView, que mostrará la imagen seleccionada por el usuario en la activity principal, y en una segunda fila, un componente TextView, que almacenará la sinopsis de la película seleccionada.
  • Recurso ripples.xml, que define el color para la animación de tipo onda al seleccionar una imagen del listado de películas.

Como es habitual, al final del tutorial podrás descargar el código completo del Proyecto

Estructura del proyecto

 

Estructura del proyecto Android

Documentación código fuente

TransicionesAndroidLollipop\app\src\main\java\com\academiaandroid\transicionesandroidlollipop\MainActivity.java

  1. Clase que permite visualizar un listado de películas, que al seleccionar
    el usuario cualquier imagen del listado, mostrará una transición definida con el nuevo estilo material design para lanzar una nueva activity:
  2. Se comprueba que la versión del SDK es igual o mayor a 21 para establecer la transición de entrada y salida entre activities:
  3. Se define el método lanzarAnimacion, que será invocado desde el evento encargado de controlar la selección de un ítem de la lista mostrada, y que permite lanzar la nueva activity, enviando los datos de la imagen
    seleccionada. Además del intent creado, recibe como argumento un objeto Bundle
    para establecer la transición entre las activities que intervienen:

TransicionesAndroidLollipop\app\src\main\java\com\academiaandroid\transicionesandroidlollipop\TransicionActivity.java

  1. Clase que permite acceder a la sinopsis de la película seleccionada,
    mostrando una transición de entrada y salida al lanzar la nueva activity, además de una animación al pulsar la imagen asociada a la sinopsis:
  2. Se comprueba que los valores recibidos de la activity principal no sean nulos, para la construcción de las diferentes animaciones de entrada a la activity que muestre la sinopsis de la película seleccionada:

TransicionesAndroidLollipop\app\src\main\java\com\academiaandroid\transicionesandroidlollipop\Adaptador.java

  1. Clase que sobrescribe una serie de métodos, que permiten construir una vista personalizada para el componente de selección GridView:

TransicionesAndroidLollipop\app\src\main\res\layout\activity_main.xml

  1. Layout formado por un TableLayout, que mostrará en una de sus filas un componente de tipo selección GridView. Como se puede apreciar en el atributo background, se asigna un recurso xml encargado de mostrar una animación en forma de onda al seleccionar un elemento de la lista de imágenes:

TransicionesAndroidLollipop\app\src\main\res\layout\activity_transicion.xml

  1. Layout formado por un TableLayout, donde se definen varias filas formadas por un componente ImageView, que mostrará la imagen seleccionada por el usuario en la activity principal, y en una segunda fila, un componente TextView, que almacenará la sinopsis de la película seleccionada. Como características principales dentro de este layout, se define una vista principal (elemento ScrollView) que permitirá desplazarse de manera vertical por la pantalla para poder visualizar la información que muestra, además de asignar un valor al atributo fontFamily del componente TextView, que se puede encontrar en el nuevo tema Material:

Dependencias declaradas:

Para este proyecto ha sido necesario añadir las siguientes dependencias para la compatibilidad de apps con la API de nivel 21, además de establecer soporte con la librería Palette para extraer colores de una imagen (archivo “build.gradle” del módulo “app”):

Descarga del Proyecto

Descargar