Skip to content
Palette (recortado)

Animaciones personalizadas con Material Design

Material Design
1. Material Design, nuevo diseño en Android 5
2. Creación de una App con Material Design: tarjetas y listas
3. Animaciones personalizadas con Material Design
4. Proyecto Android: transiciones y animaciones con Material Design
5. Videotutorial: proyecto Android 5.0 con Material Design

En esta publicación de la serie sobre Material Design, se mostrarán varias de las animaciones disponibles con la nueva versión de Android 5. Estas proporcionan a los usuarios una mayor fluidez en el uso de los componentes de la aplicación, mostrando una continuidad que favorece enormemente su interacción con la aplicación.

Como parte del proceso de aprendizaje para entender el ejercicio práctico que desarrollaremos en las siguientes publicaciones, se mostrarán varias animaciones que permitan el desarrollo de aplicaciones más intuitivas a nivel visual.

Respuesta a eventos táctiles (ondulaciones)

Esta opción permite mostrar una confirmación visual a la pulsación del usuario. Esta funcionalidad se implementa con la nueva clase RippleDrawable, mostrando una animación a modo de onda.

También será posible definir un RippleDrawable, a través de la creación de un recurso XML mediante el elemento ripple, y poder modificar el color por defecto asignándole el tema android:colorControlHighlight como valor del atributo color:

Animaciones ondas

Información oficial de Android sobre la clase RippleDrawable

Animación con efecto despliegue

Esta animación proporciona una experiencia visual continua, que permitirá mostrar un efecto a modo de desplegable, cuando el usuario seleccione un componente de la aplicación. Es posible implementar esta funcionalidad a través del método ViewAnimationUtils.createCircularReveal()

Diseño dinámico de colores

Material design fomenta el uso dinámico de colores a partir de imágenes, construyendo una paleta de colores mediante la clase Palette. Esta opción, permite obtener un conjunto de colores presentes en la imagen seleccionada, proporcionando una mayor inmersión del usuario en la experiencia gráfica. Además, esta nueva API posibilita la extracción de tonos vibrantes y apagados para una visualización óptima del texto asociado a la imagen. A continuación se enumerarán los diferentes perfiles de tonos que es posible extraer de una imagen:

Palette

  • Vibrant
  • Vibrant Dark
  • Vibrant Light
  • Muted
  • Muted Dark
  • Muted Light

Dinamic palette

Si deseas ampliar conocimientos con respecto a la clase Palette, se recomienda consultar la información oficial de Android

Volver arriba
Esta web usa cookies para su correcto funcionamiento. No hay cookies de publicidad, aunque algunos de los contenidos mostrados (videos o documentos insertados) están alojados en servicios externos (Youtube, Vimeo, Box...) que sí pueden implementar sus propias cookies.    Más información
Privacidad