Lista envolvente
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
La lista inmersiva es una combinación de una fila de contenido y vista previa de la
el elemento seleccionado. Incluye contenido en una vista del puerto más grande.
Recursos
Destacados
- Vista previa del contenido dinámico. Cuando un usuario navega por la fila de
contenido, el área de vista previa se actualiza automáticamente para mostrar el
elemento enfocado actual.
- El componente de lista envolvente ofrece un viewport más grande para
mostrar contenido para que los usuarios puedan verlo y valorarlo con más facilidad
los detalles visuales del elemento enfocado.
- Las listas inmersivas brindan información relevante y contextual
sobre el elemento enfocado, lo que ayuda a los usuarios a tomar decisiones fundamentadas sin
abandonando la experiencia de navegación.
- El componente de lista envolvente usa la divulgación progresiva para revelar
más detalles sobre el contenido a medida que los usuarios navegan, lo que reduce la
y mantener la participación del usuario.
- El componente de lista envolvente garantiza interacciones coherentes en toda la aplicación.
lo que brinda a los usuarios
una experiencia familiar y predecible.
Anatomía
- Fondo de la imagen
- Bloqueo de contenido
- Tarjeta enfocada
- Cuadrícula de contenido
- Lámina cinemática
- Póster
- Color de fondo
Especificaciones
Comportamiento
Cuando navegas entre tarjetas en la lista Immersive, los detalles de la
la carta seleccionada se revelan progresivamente en segundo plano.
Cuando la lista inmersiva está enfocada, su altura aumenta para revelar
información adicional, como el título del fondo y
descripción, como se muestra en el siguiente video.
Uso
Usa carruseles envolventes cuando quieras destacar
contenido promocionado, como nuevos lanzamientos, programas populares o
títulos. El viewport más grande y la vista previa dinámica ofrecen una
una forma de mostrar estos artículos de alta prioridad.
Visualización de imágenes
- Enfoque de la tarjeta: A medida que el usuario navega por el carrusel, el
la tarjeta enfocada se enfatiza visualmente, ampliando la tarjeta en 1.1, mediante un borde,
y otras señales visuales como elevación para indicar su selección. Garantizar el contenido
los títulos dentro de la miniatura de la tarjeta enfocada están claramente
sean visibles y más fáciles de leer.
- Imagen de fondo: Cuando una tarjeta está enfocada, se muestra su fondo
se muestra en la ventana de visualización más grande. Recomendamos estos antecedentes
es de alta calidad y visualmente atractiva, ya que proporciona una experiencia envolvente y
un entorno atractivo para el contenido.
Composición
check_circle
Qué debes hacer
Escala y alinea el sujeto con la esquina superior derecha para crear una experiencia cinematográfica.
cancel
Qué no debes hacer
Evita usar un recorte de pantalla completa que permita recortar el sujeto debajo del contenido.
Para garantizar que las imágenes se usen como fondos en el componente de lista envolvente
no se vean borrosos, asegúrate de ajustarlos
para que no se vean borrosos.
o distorsionadas.
Relación de aspecto
Usa una relación de aspecto de 16:9 para las imágenes de fondo siempre que sea posible para garantizar
un diseño visualmente atractivo y coherente.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-07-27 (UTC)"],[],[],null,["# Immersive list is a combination of a row of content \\& preview of the\nselected item. It features content in a larger viewport.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Sample](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:tv/samples/src/main/java/androidx/tv/samples/ImmersiveListSamples.kt;drc=5920fece16ad6723107098f24a492a25937cd51a) | N/A |\n\nHighlights\n----------\n\n- Dynamic content preview. When a user navigates through the row of content, the preview area automatically update to display the current focused item.\n- The Immersive list component features a larger viewport for displaying content, making it easier for users to view and appreciate the visual details of the focused item.\n- Immersive lists provide relevant and contextual information about the focused item, helping users make informed decisions without leaving the browsing experience.\n- The Immersive list component uses progressive disclosure to reveal more details about the content as users navigate, reducing cognitive load and maintaining user engagement.\n- The Immersive list component ensures consistent interactions across the app, providing users with a familiar and predictable experience.\n\nAnatomy\n-------\n\n1. Image background\n2. Content block\n3. Card on focus\n4. Content grid\n\n1. Cinematic scrim\n2. Poster\n3. Background color\n\nSpecs\n-----\n\nBehavior\n--------\n\nWhen navigating between cards in the Immersive list, the details of the\nselected card are progressively revealed in the background. \n\nWhen the immersive list is in focus, its height increases to reveal\nadditional information, such as the background title and\ndescription, as shown in the following video.\n\nUsage\n-----\n\nUse immersive carousels when you want to draw attention to featured or\npromoted content, such as new releases, popular shows, or exclusive\ntitles. The larger viewport and dynamic preview provide a compelling\nway to showcase these high-priority items.\n\n### Image display\n\n1. **Card focus**: As the user navigates through the carousel, the focused card is visually emphasized, scaling the card by 1.1, using a border, and other visual cues as elevation to indicate its selection. Ensure content titles inside the thumbnail of the focused card are clearly visible and easier to read.\n2. **Background image**: When a card is in focus, a corresponding background image is displayed in the larger viewport. We recommend this background image is high-quality and visually appealing, as it provides an immersive and engaging backdrop for the content.\n\n### Composition\n\ncheck_circle\n\n### Do\n\nScale and align the subject to the top right corner creating a cinematic experience. \ncancel\n\n### Don't\n\nAvoid using full screen crop that will make crop the subject under the content.\n\nTo ensure the images used as backgrounds in the Immersive list component\nlook good, make sure to scale them appropriately so they are not blurry\nor distorted.\n\n### Aspect ratio\n\nUse a 16:9 ratio for background images whenever possible to ensure\na visually appealing and consistent layout."]]
