Lollipop new features: transiciones de elementos compartidos

En este artículo vamos a continuar con las novedades de Lollipop, seguimos ampliando la aplicación que empezamos en anteriores artículos. En este artículo vamos a ver transiciones de Lollipop y concretamente transiciones de elementos compartidos.

Introducción

Con la versión 5 de Android Lollipop llegó también Material Design, que es un lenguage de diseño nuevo creado por Google. MaterialDesign tiene una filosofía que cubre muchas areas pero en este post nos vamos a centrar en las transiciones.

Según las especificaciones de Material Design, las transiciones entre dos estados visuales debe ser clara, suave y sin esfuerzo.

Hay varios tipos de transiciones pero en este artículo nos vamos a centrar en las transiciones de elementos compartidos. Este tipo de transición da una continuidad visual en el paso de una ventana a otra.

En versiones anteriores a Lollipop ya existían transiciones entre activities y fragments pero ahora las transiciones pueden animar vistas hijas dentro de un activity o fragment como pueden ser imágenes, botones, textos etc..

Si dos ventanas comparten un mismo elemento como puede ser una imagen o un texto, en lugar de hacer una transición brusca entre pantallas, lo que conseguimos con este tipo de transición es sensación de que la imagen se traslada desde la posición y tamaño de la vista inicial hasta las posición y tamaño de la vista secundaria.

Este tipo de transición solo esta disponible en Lollipop (API 21), veremos en el ejemplo como podemos controlarlo para que no se produzca error en versiones anteriores.

Ejemplo

En la aplicación que estamos desarrollando en esta serie, tenemos una lista de imágenes y al hacer click en una de ellas abrimos una vista de detalle con la imagen más grande. Lo que vamos a hacer es una transición de esta imagen compartida entre las dos vistas.

Hacer este tipo de transición se consigue con poco código, vamos a ver los pasos que tenemos que dar para hacerlo. Utilizaremos la librería Compat de forma que sea esta librería la que controle si estamos en version 21 (Lolliopop) para realizar la transición o no.

Habilitando transiciones en el Theme de la aplicación

Las transiciones deben ser habilitadas en el theme de la apliación, pero solo para la API 21, entonces creamos una carpeta de recursos values-21 y creamos una carpeta styles dentro. Definimos el theme para la aplicación habilitando transiciones.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

    <item name="android:windowContentTransitions">true</item>

    <item name="android:windowAllowEnterTransitionOverlap">true</item>

    <item name="android:windowAllowReturnTransitionOverlap">true</item>

    <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>

    <item name="android:windowSharedElementExitTransition">@android:transition/move</item>

</style>

Asignando al elemento compartido del activity secundarío el nombre de transición

Para poder hacer la transición hay que identificar la vista compartida en la activity secundaria, en nuestro caso una imagen, así que tenemos que asignarle valor a la propiedad TransitionName.

  .
  .
  .
<ImageView

        android:id="@+id/detailItemImage"

        android:transitionName="@string/image_transition_name"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:scaleType="fitStart" />
  .
  .
  .

Abrir activity secundaria indicando elementos compartidos

Al abrir el activity secundaria tenemos que hacer unos cambios. Primero nos creamos un ActivityOptionsCompat, es un objeto que contiene la información de los objetos que intervienen en la transición.

Después abrimos el activity secundario, no con el método startActivity del propio activity sino del objeto ActivityCompat, este objeto gestiona la versión en la que estamos para abrir el activity de una forma o de otra, le indicamos el activity origen, el elemento compartido de la vista origen y el transitionName, que es el mismo que hemos asignado a la imagen del activity secundario.

((ItemsAdapter) adapter).setOnItemClickListener(new ItemsAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                Item item = items[position];

                View sharedView = view.findViewById(R.id.itemImage);
                String transitionName = getString(R.string.image_transition_name);

                ActivityOptionsCompat options =
                        ActivityOptionsCompat.makeSceneTransitionAnimation(
                                getActivity(),  sharedView, transitionName);

                Intent intent = new Intent(getActivity(), ItemDetailActivity.class);
                intent.putExtra("item", item);
                ActivityCompat.startActivity(getActivity(), intent, options.toBundle());
            }
        });

Con estos pasos ya tenemos lista la transición de elemento compartido.

Concusiones

Con Lollipop también ha llegado Material Design que es un lenguaje de diseño, existe una especificación creada por Google con los detalles del lenguaje. Las transiciones es un punto importante de la especificación y en en este artículo hemos visto lo sencillo que es crear transiciones de elementos compartidos para dispositivos Lollipop y pre-Lollipop.

Código fuente en GitHub - tag 0.3

Libros relacionados

Android Programming: The Big Nerd Ranch Guide

Android Programming In a Day!: The Power Guide for Beginners In Android App Programming

Pages