Material Design es una guía completa para el diseño visual, de movimiento y de interacción en 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 optimizar la definición de estilo de tu app, aplica un tema basado en Material a tu app.
Si usas Android Studio para crear tu proyecto de Android, se 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:
- Promueve la acción principal de tu IU con un botón de acción flotante (BAF).
- Muestra tu marca, navegación, búsqueda y otras acciones con la barra de la app.
- Muestra y oculta la navegación de tu app con el panel lateral de navegación.
- Elige entre los muchos otros componentes de Material para el diseño y la navegación de tu app, como la contracción de barras de herramientas, pestañas, una barra de navegación inferior y mucho más. Para verlos todos, consulta el catálogo de componentes de material design para Android.
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 del dibujo: las vistas con valores Z más altos aparecen sobre otras vistas.
Puedes aplicar elevación a un diseño basado en tarjetas, lo que te ayuda 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.
Para obtener información sobre cómo agregar elevación a otras vistas, consulta Cómo crear vistas de recorte y sombras.
Animaciones
Las APIs 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 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
- 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 de 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 ajustes de 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.