Crea un flujo y un ritmo flexibles con una estructura y métodos de contención para tu contenido. Comienza por diseñar contenedores de diseño y, luego, agrega contenido.
1. Estructura base: cuadrícula de diseño para guiar el contenido
Para comenzar a crear una estructura sólida con parámetros de seguridad coherentes, agrega márgenes y columnas a tus diseños.
Los márgenes proporcionan espaciado en los bordes izquierdo y derecho de la pantalla y el contenido. Un valor de margen estándar para el tamaño compacto es de 16 dp, pero los márgenes deben adaptarse para admitir pantallas más grandes. El contenido y las acciones del cuerpo de tu app deben permanecer dentro de estos márgenes y alinearse con ellos.
También puedes garantizar las zonas seguras de inserción o las inserciones en este paso. Las inserciones de la barra del sistema evitan que las acciones cruciales queden debajo de las barras del sistema. Debes dibujar tu contenido detrás de las barras del sistema.
Usa columnas para crear una estructura de cuadrícula flexible que permita una alineación coherente y para proporcionar una definición vertical a un diseño dividiendo el contenido dentro del área del cuerpo. El contenido se coloca en las áreas de la pantalla que contienen columnas. Estas columnas le dan estructura a tu diseño y proporcionan una estructura conveniente para organizar los elementos.
La importancia del contenido, o jerarquía, puede ayudar a determinar el tipo de cuadrícula de diseño para aportar más estructura. Si tu contenido tiene una jerarquía clara, es adecuada una cuadrícula de diseño jerárquica, por ejemplo, un diseño editorial o una pantalla de detalles con un encabezado grande y un arte clave.
Una cuadrícula modular funciona bien para contenido y diseños igualmente importantes, pero muy estructurados, como una galería de fotos.
Elige una cuadrícula de columnas para diseños unidireccionales y coherentes, o cuando necesites mayor flexibilidad.
Independientemente del tipo, la cuadrícula de diseño también debe adaptarse a los diferentes tamaños y factores de forma.
En este ejemplo, se usa una cuadrícula de columnas para alinear el contenido con una cuadrícula subyacente y, al mismo tiempo, conservar un tamaño flexible. Para adaptarse a diferentes factores de forma, la cuadrícula de columnas cambia el tamaño y la cantidad de columnas según el tamaño de la pantalla, lo que también permite que el contenido se escale. Evita ser demasiado detallado con la cuadrícula de diseño. En su lugar, usa la cuadrícula de referencia para proporcionar unidades de espaciado coherentes.
Comienza a agregar texto a la estructura del diseño. Los márgenes protegen el contenido de los bordes de la pantalla. Las columnas proporcionan una estructura de alineación y espaciado coherente.
Como alternativa, usa una cuadrícula de diseño jerárquica para mantener la pantalla de detalles en orden.
Comienza con una cuadrícula de diseño coherente. Si tu contenido lo requiere, rompe la cuadrícula. Incluso en ese caso, es posible que descubras que otra cuadrícula se alinea mejor con las necesidades de tu contenido.
Obtén más información sobre los contenedores de diseño, como los paginadores y el diseño de flujo.
Manuscrito y mampostería son otros tipos de cuadrículas de diseño.
Cualquier cuadrícula de diseño que elijas también puede usar el concepto de contención de paneles para agrupar contenido en diseños adaptables. Por ejemplo, la pantalla de detalles que se usa como ejemplo es un panel que se podría mostrar en un diseño de lista-detalles.
2. Aplica la contención
Usa la contención para agrupar visualmente los elementos.
La contención se refiere al uso conjunto de espacios en blanco y elementos visibles para crear un agrupamiento visual. Un contenedor es una forma que representa un área cerrada. En un solo diseño, puedes agrupar elementos que comparten contenido o funcionalidad similares y separarlos de otros elementos con espacio abierto, tipografía y divisores.
Android usa filas, columnas y cajas como elementos básicos, por lo que puedes diseñar la contención de manera similar. Agrupa los elementos similares con espacio en blanco o una división visible que te ayude a guiarte por el contenido.
La contención implícita usa el espacio en blanco para agrupar visualmente el contenido y crear límites de contenedor, mientras que la contención explícita usa objetos, como líneas divisorias y tarjetas, para agrupar el contenido.
En la siguiente figura, se muestra un ejemplo del uso de la contención implícita para contener el encabezado y el texto principal. La cuadrícula de columnas se usa para alinear y crear agrupaciones. Los momentos destacados se incluyen de forma explícita en las tarjetas. Usa iconografía y jerarquía de escritura para una mayor separación visual.
3. Posiciona el contenido
Con una cuadrícula de diseño elegida y contenido en contenedores, Android tiene varias formas de controlar los elementos de contenido y posicionarlos, con bloques de compilación y modificadores básicos, o contenedores de diseño como cuadrícula y flexbox.
Considera si tu contenido es unidimensional o bidimensional. Por ejemplo, el contenido puede fluir horizontalmente, verticalmente o en ambas direcciones.
Como se muestra en la siguiente figura, un diseño de autenticación puede usar un diseño de cuadrícula bidimensional.
Los elementos de la IU también pueden flexionarse y fluir en una dimensión, como los filtros o las etiquetas de contenido. Obtén más información sobre flexbox.
Los diseños también pueden usar una combinación de tipos de diseño. Por ejemplo, puedes combinar un carrusel o un desplazamiento horizontal con tarjetas verticales. O bien, podrías presentar un gráfico personalizado con datos de lista vertical.
Puedes presentar contenido en filas o columnas desplazables con filas y columnas diferidas.
Alineación
Al igual que con el flujo y la alineación del diseño automático, puedes especificar la disposición y la alineación de los elementos de la IU.
Usa AlignmentLine para crear líneas de alineación personalizadas que los diseños de nivel superior pueden usar para alinear y posicionar sus elementos secundarios.
Qué debes hacer
Qué no debes hacer
4. Cómo ajustar la escala y recortar el contenido
El ajuste de escala es fundamental para adaptarse al contenido dinámico, la orientación del dispositivo y los tamaños de pantalla. Los elementos pueden permanecer fijos o escalarse.
Especifica cómo se ajustan y posicionan las imágenes dentro de sus contenedores para garantizar que se muestren correctamente en cualquier dispositivo. De lo contrario, es posible que se corte el enfoque principal de una imagen o que esta sea demasiado pequeña o grande para el diseño.
Adapta la app a diferentes relaciones de aspecto y orientaciones del dispositivo con el recorte y el ajuste de escala adecuados. Dado que las relaciones de aspecto pueden variar significativamente, especifica cómo tu contenido controla estas situaciones.
Por ejemplo, una imagen destacada de ancho completo ocupa toda la pantalla en un teléfono en orientación horizontal.
Qué debes hacer
Qué no debes hacer
Si el contenido debe conservar la relación de aspecto, como los videos solo verticales, restringe la relación de aspecto y equilibra el espacio vacío.
Qué no debes hacer
Contenido fijado
Muchos componentes tienen interacciones, desplazamiento y posicionamiento integrados con ranuras o estructuras, como las barras de la aplicación. Algunos elementos se pueden modificar para que permanezcan fijos en lugar de reaccionar al desplazamiento, por ejemplo, los botones de acción flotantes (BAF) que contienen acciones críticas. Fija elementos para mejorar el enfoque en ciertos casos de uso, por ejemplo, fija una entrada de texto a un teclado para evitar entradas ocultas.
En el caso de la entrada de texto, como la mensajería y la autenticación, la entrada se adjunta al teclado y se le da el enfoque exclusivo.
Componentes en el diseño
Los componentes de Material 3 proporcionan sus propias configuraciones y estados para la interacción y el contenido.
Compose proporciona diseños convenientes para combinar componentes de Material en patrones de pantalla comunes. Los elementos componibles, como Scaffold, proporcionan espacios para varios componentes y otros elementos de pantalla. Obtén más información sobre los componentes y el diseño de Material.