Diseños canónicos

Los diseños canónicos son diseños versátiles y comprobados que proporcionan una experiencia del usuario óptima en una variedad de factores de forma.

Representación de dispositivos con pantalla grande que muestran los diseños canónicos

Los diseños canónicos son compatibles con teléfonos de pantalla pequeña, así como con tablets, plegables y dispositivos ChromeOS. Derivados de la guía de Material Design, los diseños son estéticos y funcionales.

El framework de Android incluye componentes especializados que hacen que la implementación de los diseños sea sencilla y confiable.

Los diseños canónicos crean IUs atractivas y que mejoran la productividad, lo que constituye la base de apps excelentes.

Si ya conoces los diseños canónicos de apps adaptables, pero no sabes qué APIs de Android usar, consulta la sección Aplicabilidad para obtener ayuda y determinar cuál es el diseño correcto para los casos de uso de tu app.

Detalles de lista

Estructura del diseño de lista y detalles

El diseño de lista y 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.

El diseño divide la ventana de la app en dos paneles paralelos: uno para la lista y otro para los detalles. Los usuarios seleccionan elementos de la lista para ver sus detalles. Los vínculos directos en los detalles muestran contenido adicional en el panel de detalles.

Las pantallas de ancho expandido (consulta Usa clases de tamaño de ventana) admiten la lista y los detalles al mismo tiempo. La selección de un elemento de lista actualiza el panel de detalles para mostrar el contenido relacionado del elemento seleccionado.

Las pantallas de ancho mediano y compacto muestran la lista o los detalles, según la interacción del usuario con la app. Cuando solo se ve la lista, la selección de un elemento muestra los detalles en lugar de la lista. Cuando solo se vean los detalles, se volverá a mostrar la lista si se presiona el botón Atrás.

Los cambios de configuración, como la orientación del dispositivo o el tamaño de la ventana de la app, pueden modificar la clase de tamaño de la ventana de la pantalla. Un diseño de lista-detalles responde en consecuencia y mantiene el estado de la app de la siguiente manera:

  • Si una pantalla de ancho expandido que muestra los paneles de lista y de detalles se reduce a tamaño mediano o compacto, el panel de detalles permanece visible y el panel de lista se oculta.
  • Si una pantalla de ancho mediano o compacto tiene solo el panel de detalles visible y la clase de tamaño de ventana se expande, la lista y los detalles se muestran juntos, y la lista indica que el elemento correspondiente al contenido en el panel de detalles está seleccionado.
  • Si una pantalla de ancho mediano o compacto tiene solo el panel de lista visible y se expande, se mostrarán juntos la lista y un panel de detalles de marcador de posición.

El diseño de lista-detalles es ideal para apps de mensajería, administradores de contactos, navegadores de contenido multimedia interactivos o cualquier app en la que el contenido se pueda organizar como una lista de elementos que revelan información adicional.

Figura 1: App de mensajería que muestra una lista de conversaciones y los detalles de una conversación seleccionada

Implementación

A list-detail layout can be created with a variety of technologies, including Compose, views, and activity embedding (for legacy apps). See the Applicability section for help deciding which technology is most suitable for your app.

The SlidingPaneLayout library is designed for implementation of list‑detail layouts based on views or fragments.

First, declare a SlidingPaneLayout as the root element of your XML layout. Next, add the two child elements—either views or fragments—that represent the list and detail content.

Implement a communication methodology to pass data between the list-detail views or fragments. ViewModel is recommended because of its ability to store business logic and survive configuration changes.

SlidingPaneLayout automatically determines whether to display the list and detail together or individually. In a window that has enough horizontal space to accommodate both, the list and detail appear side by side. In a window that lacks sufficient space, either the list or detail is displayed depending on the user's interaction with the app.

For an example implementation, see the List-detail with sliding pane sample.

Activity embedding

Use activity embedding to enable legacy, multiple-activity apps to display two activities side by side on the same screen or stacked (one overlaying the other). If your app implements the list and detail of a list‑detail layout in separate activities, activity embedding enables you to create a list‑detail layout with minimal or no code refactoring.

Implement activity embedding by specifying a task window split using an XML configuration file. The split defines the primary activity, which initiates the split, and a secondary activity. Specify a minimum display width for the split using the window size class breakpoints. When the display width falls below the minimum breakpoint, the activities are displayed one overlaying the other. For example, if the minimum display width is 600dp, the activities are displayed one overlaying the other on compact displays, but side by side on medium and expanded displays.

Activity embedding is supported on Android 12L (API level 32) and higher, but may also be available on lower API levels if implemented by device manufacturers. When activity embedding is not available on a device, the fallback behavior results in the list activity or the detail activity occupying the entire app window based on user interaction with the app.

For more information, see Activity embedding.

For an example implementation, see the List-detail with activity embedding sample.

Feed

Estructura del diseño de 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.

El tamaño y la posición establecen relaciones entre los elementos de contenido.

Los grupos de contenido se crean al hacer que los elementos tengan el mismo tamaño y posicionarlos juntos. Para atraer la atención a los elementos, estos deben ser más grandes que los cercanos.

Las tarjetas y las listas son componentes comunes de los diseños de feed.

Un diseño de feed admite pantallas de casi cualquier tamaño porque la cuadrícula se puede adaptar de una sola columna de desplazamiento a un feed de varias columnas de desplazamiento de contenido.

Los feeds son especialmente adecuados para las apps de noticias y redes sociales.

Figura 2: App de redes sociales que muestra publicaciones en tarjetas de diferentes tamaños

Implementación

Una RecyclerView renderiza de manera eficiente una gran cantidad de elementos en una sola columna. Un GridLayoutManager dispone los elementos en una cuadrícula, lo que permite configurar los tamaños y los intervalos de los elementos.

Configura las columnas de la cuadrícula según el tamaño del área de visualización disponible para establecer el ancho mínimo permitido para los elementos.

La estrategia de intervalo GridLayoutManager predeterminada, que es un intervalo por elemento, se puede anular si se crea un SpanSizeLookup personalizado. Ajusta el intervalo para enfatizar algunos elementos por sobre otros.

En pantallas de ancho compacto que tengan espacio suficiente para una sola columna, usa LinearLayoutManager en lugar de GridLayoutManager.

Para ver una muestra de implementación, consulta el ejemplo de feed con vistas.

Panel complementario

Esquema de página del diseño de panel complementario.

El diseño de panel complementario organiza el contenido de la app en áreas de visualización principales y secundarias.

El área de visualización principal ocupa la mayor parte de la ventana de la app (por lo general, alrededor de dos tercios) y tiene el contenido principal. El área de visualización secundaria es un panel que ocupa el resto de la ventana de la app y presenta contenido complementario del contenido principal.

Los diseños de panel complementario funcionan bien en pantallas de ancho expandido (consulta Usa clases de tamaño de ventana) en orientación horizontal. Las pantallas de ancho mediano o compacto admiten la visualización de las áreas principal y secundaria si el contenido se adapta a espacios de visualización más estrechos o si el contenido adicional se puede ocultar inicialmente en una hoja inferior o lateral a la que se puede acceder a través de un control, como un menú o un botón.

Un diseño de panel complementario difiere de un diseño de lista-detalles en la relación del contenido principal y secundario. El contenido del panel secundario es significativo solo en relación con el contenido principal. Por ejemplo, una ventana de herramientas del panel complementario es irrelevante por sí sola. Sin embargo, el contenido complementario del panel de detalles de un diseño de lista y detalles es significativo incluso sin el contenido principal. Por ejemplo, la descripción de un producto de una ficha de producto.

Estos son algunos casos de uso del panel complementario:

Figura 3: App de compras con descripciones de productos en un panel complementario.

Implementación

Se implementa un diseño de panel complementario con un diseño de ayuda, como LinearLayout o ConstraintLayout. Establece las clases de tamaño de ventana que dividen la cantidad de espacio de visualización horizontal disponible para tu app en tres categorías: compacta (<600 dp), medio (>= 600 dp) y expandido (>= 840 dp).

Para cada clase de tamaño de ventana, define diseños de la siguiente manera:

  • Compacta: En la carpeta layout de recursos de la app, coloca el contenido que renderiza el panel complementario debajo del contenido principal o dentro de una hoja inferior.
  • Mediana: En la carpeta layout-w600dp, proporciona el contenido del panel complementario que genera el contenido principal y la renderización del panel complementario uno al lado del otro dividiendo el espacio horizontal de la pantalla en partes iguales
  • Expandida: En la carpeta layout-w840dp, incluye contenido del panel complementario que genere que el contenido principal y el panel complementario se rendericen en paralelo. Sin embargo, el panel complementario solo ocupa el 30% del espacio horizontal, lo que deja el 70% restante para el contenido principal.

Usa un objeto ViewModel para la comunicación entre el contenido principal y el panel complementario, ya sea con vistas, fragmentos o una combinación.

Para ver muestras de implementación, consulta los siguientes ejemplos:

Aplicabilidad

Los diseños canónicos crean presentaciones polifacéticas de contenido para facilitar el acceso y la exploración profunda. Usa el siguiente diagrama de flujo a fin de determinar qué estrategia de implementación y diseño es la más adecuada para los casos de uso de tu app.

Para ver ejemplos de diseños canónicos implementados en diferentes tipos de apps, consulta la galería de pantallas grandes.

Figura 4: Árbol de decisión de diseño canónico de pantalla grande

Recursos adicionales