Utiliza diseños canónicos como punto de partida, composiciones listas para usar que ayudan a que los diseños se adapten a casos de uso y tamaños de pantalla comunes. Estos diseños son estéticos y funcionales, y se derivan de la guía de Material 3.
El framework de Android incluye componentes especializados que hacen que la implementación de los diseños sea sencilla y confiable con las APIs de Jetpack Compose o vistas.
Diseño de lista-detalles
El diseño de lista-detalles les permite a los usuarios explorar las listas de elementos que tienen información descriptiva, explicativa o de otro tipo: los detalles del elemento. En el caso de los tamaños de pantalla compactos, solo se ven la vista de lista o de detalles. Las listas, que muestran una colección de contenido en un diseño basado en filas, constituyen la forma más común de diseños para apps. El diseño de lista-detalles es ideal para apps de mensajería, administradores de contactos, navegadores de archivos o cualquier app en la que el contenido se pueda organizar como una lista de elementos que muestran información adicional.
El contenido puede ser estático o dinámico.
- El contenido dinámico es el que tu app entrega sobre la marcha y es ideal para mostrar contenido generado por usuarios o reflejar las preferencias o acciones del usuario. Por ejemplo, imagina una app de fotos con una lista desplazable de fotos generadas por los usuarios, que es única para cada usuario y cambia a medida que el usuario sube más imágenes. Estas imágenes son contenido dinámico.
- El contenido estático representa el contenido codificado, que solo se puede modificar realizando cambios directamente en el código de tu app. Entre los ejemplos de contenido estático, se incluyen las imágenes y el texto que pueden ver todos los usuarios.
El archivo de Figma de Now in Android proporciona varios ejemplos de diseño. En el siguiente ejemplo, se muestra una colección de contenido unidimensional.
Explora las listas de Material 3 para obtener más orientación sobre el diseño de componentes y especificaciones de listas.
Diseño del feed
Un diseño de feed dispone elementos de contenido equivalentes en una cuadrícula configurable para permitir una visualización rápida y conveniente de una gran cantidad de contenido. Obtén más información en los lineamientos de Material 3 para usar tarjetas en una colección. Los feeds pueden tener una configuración basada en listas o cuadrículas en pantallas compactas, por lo general, en tarjetas o mosaicos. El contenido puede ser dinámico, lo que significa que se "transmite" desde una fuente externa dinámica, como una API.
Un diseño de cuadrícula se compone de filas y columnas que se forman a partir de principios de contención implícitos o explícitos. Un diseño de cuadrícula se puede aplicar de forma más rígida o escalonada para variar las filas y las columnas. Ambos deben tener una aplicación coherente de espaciado y lógica para evitar confundir a los usuarios. Explora los lineamientos de Material 3 sobre el diseño de feeds.
Puedes implementar un diseño de feed en Compose con listas o cuadrículas Lazy, o bien en Views con RecyclerView o CardView.
Por ejemplo, una galería de fotos y podcasts en un diseño de cuadrícula son formatos de feeds comunes.
Diseño del panel de asistencia
Es posible que una vista para dispositivos móviles requiera contenido o controles complementarios. Por lo general, se presentan en forma de hojas o diálogos, y pueden ayudar a que la vista principal se mantenga enfocada y ordenada. Consulta la guía de M3 para usar el diseño canónico del panel de asistencia.
Obtén información sobre la orientación de M3 para las hojas inferiores.