Material Design para Android

Prueba el estilo de Compose
Jetpack Compose es el kit de herramientas de IU recomendado para Android. Obtén información para trabajar con temas en Compose.

Material Design es una guía completa para el diseño visual, de movimiento y de interacción en distintas plataformas y dispositivos. Para usar Material Design en tus apps para Android, sigue los lineamientos definidos en la especificación de Material Design. Si tu app usa Jetpack Compose, puedes usar la biblioteca de Compose Material 3. Si tu app usa vistas, puedes usar la biblioteca de componentes de material de Android.

Android proporciona las siguientes funciones para ayudarte a compilar 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
  • APIs para sombras y animaciones personalizadas

Tema de material y widgets

Para aprovechar las funciones de Material, como el estilo de los widgets de IU estándar, y para optimizar la definición de estilo de tu app, aplica un tema basado en Material a tu app.

Figura 1: Tema de material oscuro
Figura 2: Tema Light Material

Si usas Android Studio para crear tu proyecto de Android, aplica un tema de Material de forma predeterminada. Para obtener información sobre cómo actualizar el tema de tu proyecto, consulta Estilos y temas.

Para proporcionar a tus usuarios una experiencia familiar, usa los patrones de UX más comunes de Material:

Siempre que sea posible, usa íconos de material predefinidos. Por ejemplo, para el botón de "menú" de navegación de tu panel lateral de navegación, usa 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 propiedad representa la elevación de una vista, que determina lo siguiente:

  • El tamaño de su sombra: las vistas con valores de Z más altos proyectan sombras más grandes.
  • El orden de dibujo: las vistas con valores Z más altos aparecen sobre otras vistas.
Figura 3: Es el valor Z que representa la elevación.

Puedes aplicar elevación a un diseño basado en tarjetas, lo que te ayudará a mostrar información importante dentro de tarjetas que proporcionan un aspecto 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.

Si deseas obtener información para agregar elevación a otras vistas, consulta Cómo crear vistas de recorte y sombras.

Animaciones

Figura 4: Animación de respuesta táctil

Las APIs de Animation te permiten crear animaciones personalizadas para la respuesta táctil en los controles de la IU, los cambios en el estado de las vistas y las transiciones de actividades.

Estas API te permiten:

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

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

Para obtener más información, consulta Introducción a las animaciones.

Elementos de diseño

Estas capacidades para los elementos de diseño te ayudan a implementar apps de Material Design:

  • Los elementos de diseño vectoriales son escalables sin perder definición y perfectos para los íconos de apps de un solo color. Obtén más información sobre los elementos de diseño vectoriales.
  • El ajuste de tono de los elementos de diseño te permite definir mapas de bits como una máscara alfa y puedes ajustar el tono del color en el tiempo de ejecución. Consulta cómo agregar un tono a los elementos de diseño.
  • La extracción de color te permite extraer automáticamente colores destacados de una imagen de mapa de bits. Consulta cómo seleccionar colores con la API de Palette.