Material design para Android

Material design es una guía completa para el diseño visual, interactivo y de movimiento en plataformas y dispositivos. A fin de usar material design en tus apps para Android, sigue las pautas definidas en su especificación y usa los nuevos componentes y estilos disponibles en la biblioteca de compatibilidad de material design. En esta página, se ofrece una descripción general de los patrones y las API que debes usar.

Android ofrece las siguientes funciones para ayudarte a crear apps de material design:

  • Un tema de app de material design para diseñar todos tus widgets de IU
  • Widgets para vistas complejas, como listas y tarjetas
  • Nuevas API para sombras y animaciones personalizadas

Tema de material y widgets

Para aprovechar las características de los materiales, como el estilo de los widgets de IU estándar, y a fin de optimizar la definición de estilo de tu app, aplica un tema basado en material a tu app.

Tema de material oscuro

Tema de material claro


Para obtener más información, consulta cómo aplicar el tema de material.

Para ofrecer a tus usuarios una experiencia familiar, usa los patrones de UX más comunes del material:

Además, siempre que sea posible, usa íconos de materiales predefinidos. Por ejemplo, el botón de "menú" de navegación para tu panel lateral de navegación debe usar el ícono estándar de "hamburguesa". Consulta Íconos de Material Design para obtener una lista de los íconos disponibles. También puedes importar íconos SVG de la biblioteca de íconos de material con Vector Asset Studio de Android Studio.

Sombras y tarjetas de elevación

Además de las propiedades X e Y, las vistas en Android tienen una propiedad Z. Esta nueva propiedad representa la elevación de una vista, que determina lo siguiente:

  • El tamaño de la sombra. Las vistas con valores Z más altos proyectan sombras más grandes.
  • El orden de dibujo. Las vistas con valores Z más altos aparecen encima de otras vistas.

Con frecuencia, la elevación se aplica cuando tu diseño incluye un diseño basado en tarjetas, que te ayuda a mostrar información importante dentro de tarjetas que proporcionan un estilo de material. Puedes usar el widget CardView para crear tarjetas con una elevación predeterminada. Para obtener más información, consulta Cómo crear un diseño basado en tarjetas.

Para obtener información sobre cómo agregar elevación a otras vistas, consulta Cómo crear vistas de recorte y sombras.

Animaciones

Las nuevas API de animación te permiten crear animaciones personalizadas para respuestas táctiles en controles de IU, cambios en el estado de las vistas y transiciones de actividades.

Estas API te permiten:

  • Responder a los eventos táctiles en tus vistas con animaciones de respuestas táctiles.
  • Ocultar y mostrar vistas con animaciones con efecto revelar circular.
  • Alternar entre las actividades con animaciones personalizadas de transición de actividades.
  • Crear animaciones más naturales con movimiento curvo.
  • Animar los cambios en una o más propiedades de vista con animaciones de cambio de estado de las vistas.
  • Mostrar animaciones en los elementos de diseño de listas de estado entre los cambios de estado de las vistas.

Las animaciones de respuesta táctil se integran en varias vistas estándar, como botones. Las nuevas API te permiten personalizar estas animaciones y agregarlas a tus vistas personalizadas.

Para obtener más información, consulta Descripción general de las animaciones.

Elementos de diseño

Estas nuevas funciones de los elementos de diseño te ayudan a implementar apps de material design: