Carruseles destacados
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Los carruseles destacados muestran una selección de contenido relevante para el usuario.
Recursos
Lo más destacado
- Usa carruseles destacados para destacar contenido específico.
- Los carruseles destacados pueden incluir elementos de la IU, como imágenes, títulos, detalles de contenido, videos, acciones y controles de paginación.
- Los carruseles se suelen ubicar en la página principal o de destino de la app, lo que facilita el acceso.
- Los carruseles destacados son visualmente atractivos para ayudar a atraer al usuario y crear una experiencia envolvente.
- El contenido que se muestra se puede personalizar en función del historial de visualizaciones, las preferencias o las tendencias actuales del usuario.
Variantes
Existen dos formas diferentes de integrar los carruseles de contenido destacado:
- Envolvente
- Tarjeta
Bloque de contenido
Anatomía
- Superposición de texto
- Títulos
- Descripción
- Botón
Especificaciones
Anatomía
- Información general
- Elemento activo
- Elementos inactivos
- Elementos totales
Especificaciones
Envolvente
Anatomía
- Fondo de la imagen
- Lámina cinematográfica
- Póster
- Color de fondo
- Bloque de contenido
- Paginación
- Cuadrícula de contenido
Especificaciones
Tarjeta
Anatomía
- Fondo de la imagen
- Lámina cinematográfica
- Póster
- Fondo de la tarjeta
- Bloque de contenido
- Paginación
- Cuadrícula de contenido
Especificaciones
Uso
Usa carruseles destacados para mostrar y promocionar una selección de contenido en un formato atractivo, visualmente atractivo y fácil de navegar.
Imágenes en segundo plano
Las imágenes en segundo plano desempeñan una función fundamental para mejorar la participación del usuario en un carrusel destacado de apps de streaming.
Imágenes de alta calidad
Usa imágenes de alta resolución que sean visualmente atractivas y relevantes para el contenido de la tarjeta enfocada.
check_circle
Qué debes hacer
Mantén las imágenes limpias, visualmente atractivas y relevantes para el bloque de contenido.
cancel
Qué no debes hacer
Evita usar imágenes con texto en el fondo.
Jerarquía visual obvia
Asegúrate de que el fondo no distraiga al contenido de la tarjeta enfocada con una lámina sobre la imagen. Esto ayuda al usuario a mantener el enfoque en el título, la descripción y el botón de llamado a la acción de la tarjeta.
check_circle
Qué debes hacer
Usa una lámina para mejorar la legibilidad y la digestión del contenido.
cancel
Qué no debes hacer
Asegúrate de que el fondo no afecte la legibilidad ni la visibilidad del resto del contenido en la pantalla.
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)
[null,null,["Última actualización: 2025-07-27 (UTC)"],[],[],null,["# Featured carousels showcase a selection of content relevant to the user.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#Carousel(kotlin.Int,androidx.compose.ui.Modifier,androidx.tv.material3.CarouselState,kotlin.Long,androidx.compose.animation.ContentTransform,androidx.compose.animation.ContentTransform,kotlin.Function1,kotlin.Function2)) | Available |\n\nHighlights\n----------\n\n- Use featured carousels to highlight specific content.\n- Featured carousels can include UI elements such as images, headlines, content details, videos, actions, and pagination controls.\n- Carousels are usually located on the app's homepage or landing page, which makes them readily accessible.\n- Featured carousels are visually appealing to help engage the user, and create an immersive experience.\n- The content displayed can be personalized based on the user's viewing history, preferences, or current trends.\n\nVariants\n--------\n\nThere are two different ways of integrating featured carousels:\n\n1. Immersive\n2. Card\n\nContent block\n-------------\n\n### Anatomy\n\n1. Overline text\n2. Title\n3. Description\n4. Button\n\n### Specs\n\nPagination\n----------\n\n### Anatomy\n\n1. Background\n2. Active element\n3. Inactive elements\n4. Total elements\n\n### Specs\n\nImmersive\n---------\n\n### Anatomy\n\n1. Image background\n 1. Cinematic scrim\n 2. Poster\n 3. Background color\n2. Content block\n3. Pagination\n4. Content grid\n\n### Specs\n\nCard\n----\n\n### Anatomy\n\n1. Image background\n 1. Cinematic scrim\n 2. Poster\n 3. Card background\n2. Content block\n3. Pagination\n4. Content grid\n\n### Specs\n\nUsage\n-----\n\nUse featured carousels to showcase and promote a curated selection\nof content in an engaging, visually appealing, and simple to navigate format.\n\n### Images in backgrounds\n\nImages in backgrounds play a crucial role in enhancing user engagement\nin a streaming app featured carousel.\n\n### High quality imagery\n\nUse high-resolution images that are visually appealing and relevant\nto the content of the focused card. \ncheck_circle\n\n### Do\n\nKeep images clean, visually appealing, and relevant to the content block. \ncancel\n\n### Don't\n\nAvoid using images with text in the background.\n\n### Obvious visual hierarchy\n\nEnsure that the background does not distract from the focused card's\ncontent by using a scrim over the image; this helps the user maintain\nfocus on the card's title, description, and call-to-action button. \ncheck_circle\n\n### Do\n\nUse a scrim to improve readability and content digestion. \ncancel\n\n### Don't\n\nMake sure the background doesn't affect readability and visibility of the rest of the content on the screen."]]
