Tarjetas
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Las tarjetas son los componentes básicos de las apps para TV.
Recursos
Lo más destacado
- Usa una tarjeta para mostrar contenido sobre un solo tema.
- Una tarjeta puede contener desde imágenes hasta títulos, texto de respaldo, botones, listas y otros elementos de la IU.
- Una tarjeta no puede combinarse con otra ni dividirse en varias.
- Existen seis variantes de tarjetas: estándar, clásica, compacta, inserción, estándar amplio y clásica ancha.
Variantes
Hay cinco tipos de tarjetas, cada una con un caso de uso diferente:
- Estándar
- Classic
- Compacto
- Estándar amplio
- Ancho clásico
Bloques de contenido
El contenido de las cartas se organiza en bloques distintos. El diseño visual de la tarjeta, incluido
el énfasis, denota jerarquía. El diseño de las tarjetas se adapta a los tipos de contenido que contienen.
Anatomía
- Títulos
- Subtítulo
- Descripción
- Texto adicional
Especificaciones
Tarjeta estándar
Anatomía
- Imagen
- Bloque de contenido
Estados
Especificaciones
Tarjeta clásica
Anatomía
- Imagen
- Bloque de contenido
Estados
Especificaciones
Tarjeta compacta
Anatomía
- Imagen
- Bloque de contenido
Estados
Especificaciones
Tarjeta estándar ancha
Anatomía
- Imagen
- Bloque de contenido
Estados
Especificaciones
Tarjeta clásica ancha
Anatomía
- Imagen
- Bloque de contenido
Estados
Especificaciones
Uso
Las tarjetas son elementos de diseño versátiles que se pueden usar para mostrar una variedad de contenido de una manera visualmente atractiva y fácil de usar. En las siguientes secciones, se exploran las consideraciones de diseño para las tarjetas.
Relación de aspecto
Existen tres relaciones de aspecto comunes para las tarjetas: 16:9, 1:1 y 2:3.
Cada relación de aspecto tiene sus fortalezas, por lo que la mejor opción para ti depende de tus necesidades específicas.
- La relación de aspecto más común de las tarjetas es 16:9. Es una relación de aspecto amplia que es adecuada para mostrar imágenes y videos.
- 1:1 es una relación de aspecto cuadrada. Es una buena opción para las tarjetas que deben estar visualmente equilibrados, como el elenco y el equipo, los logotipos del canal o los logotipos del equipo.
- La relación de aspecto de 2:3 es más alta. Es una buena opción si deseas dividir la cuadrícula
y poner más énfasis.
En última instancia, la mejor manera de elegir una relación de aspecto para tus tarjetas es experimentar con diferentes opciones y ver qué se ve mejor.
Estos son algunos ejemplos de usos de diferentes relaciones de aspecto
1:1
Reparto y equipo
Logotipos de los equipos deportivos
2:3
Libros del momento
16:9
Tarjetas de películas
Diseño y espaciado
Se pueden lograr diferentes anchos de tarjeta según la cantidad de tarjetas visibles en la pantalla implementando un pico adecuado con un espaciado de 20 dp.
Diseño de 1 tarjeta
Ancho de la tarjeta: 844 dp
Diseño de 2 tarjetas
Ancho de la tarjeta: 412 dp
Diseño de 3 tarjetas
Ancho de la tarjeta: 268 dp
Diseño de 4 tarjetas
Ancho de la tarjeta: 196 dp
Diseño de 5 tarjetas
Ancho de la tarjeta: 124 dp
Bloque de contenido
El ancho del bloque de contenido de una tarjeta debe ser igual al de la miniatura de la imagen. Si necesitas mostrar más texto en el bloque de contenido, usa una variación de tarjeta ancha.
check_circle
Qué debes hacer
Usa tarjetas anchas para mostrar descripciones breves, pero solo si es absolutamente necesario. La longitud de la descripción debe ser solo unas pocas palabras.
cancel
Qué no debes hacer
Evita las descripciones largas en tarjetas apiladas de forma vertical.
Tarjeta compacta
Las tarjetas compactas deben ser concisas y fáciles de leer. El contenido que precede a la imagen de fondo debe ser breve y directo. Evita los títulos,
los subtítulos o las descripciones largos. Esto hace que tus tarjetas sean más
atractivas y más fáciles de escanear.
Para que el texto sea más legible en una imagen, agrega una superposición de gradientes negro semitransparente. Esto oscurece el fondo sin oscurecer demasiado la imagen, lo que hace que el texto sea más fácil de ver.
check_circle
Qué debes hacer
Tarjeta compacta con una lámina sobre el fondo de la imagen.
cancel
Qué no debes hacer
No uses tarjetas compactas sin lámina sobre la imagen de fondo.
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,["# Cards are the basic building blocks of your TV app. \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#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,androidx.tv.material3.CardShape,androidx.tv.material3.CardColors,androidx.tv.material3.CardScale,androidx.tv.material3.CardBorder,androidx.tv.material3.CardGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) | Available |\n\nHighlights\n----------\n\n- Use a card to display content on a single topic.\n- A card can hold anything from images to headlines, supporting text, buttons, lists, and other UI elements.\n- A card cannot merge with another card or divide into multiple cards.\n- There are six variations of cards: standard, classic, compact, inset, wide standard, and wide classic.\n\nVariants\n--------\n\nThere are five types of cards, each with a different use case:\n\n1. Standard\n2. Classic\n3. Compact\n4. Wide standard\n5. Wide classic\n\nContent blocks\n--------------\n\nA card's contents are arranged in distinct blocks. The card visual design\nincluding emphasis denotes hierarchy. The layout of the cards themselves\naccommodates the types of content the cards contain.\n\n### Anatomy\n\n1. Title\n2. Subtitle\n3. Description\n4. Extra text\n\n### Specs\n\nStandard card\n-------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nClassic card\n------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nCompact card\n------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nWide standard card\n------------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nWide classic card\n-----------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nUsage\n-----\n\nCards are versatile design elements that can be used to display a variety\nof content in a visually appealing and user-friendly way. The following\nsections explore design considerations for cards.\n\n### Aspect ratio\n\nThere are three common aspect ratios for cards: 16:9, 1:1, and 2:3.\nEach aspect ratio has its strengths, so the best choice for\nyou depends on your specific needs.\n\n- 16:9 is the most common aspect ratio for cards. It is a wide aspect ratio that is well-suited for displaying images and videos.\n- 1:1 is a square aspect ratio. It is a good choice for cards that need to be visually balanced, such as cast and crew, channel logos, or team logos.\n- 2:3 is a taller aspect ratio. It is a good choice if you want to break up the grid and bring more emphasis.\n\nUltimately, the best way to choose an aspect ratio for your cards is to\nexperiment with different options and see what looks best.\n\nHere are some examples usages of different aspect ratios \n\n### 1:1\n\nCast and crew \n\nSports teams logos\n\n### 2:3\n\nTrending books\n\n### 16:9\n\nMovie cards\n\n### Layout and spacing\n\nVarying card widths based on the number of cards visible on the screen\ncan be achieved by implementing proper peaking with a spacing of 20dp. \n\n### 1-card layout\n\nWidth of the card --- 844dp\n\n### 2-card layout\n\nWidth of the card --- 412dp\n\n### 3-card layout\n\nWidth of the card --- 268dp\n\n### 4-card layout\n\nWidth of the card --- 196dp\n\n### 5-card layout\n\nWidth of the card --- 124dp\n\n### Content block\n\nThe width of the content block in a card should be the same width as the image\nthumbnail. If you need to display more text in the content block,\nuse a wide card variation. \ncheck_circle\n\n### Do\n\nUse wide cards to show short descriptions, but only if absolutely necessary. The length of the description should be only a few words. \ncancel\n\n### Don't\n\nAvoid long descriptions on vertically stacked cards.\n\n### Compact card\n\nCompact cards should be concise and easier to read. The content preceding the\nbackground image should be brief and to the point. Avoid long titles,\nsubtitles, or descriptions. This makes your cards more\nvisually appealing and easier to scan.\n\nTo make text more readable on an image, add a semi-transparent black\ngradient overlay. This darkens the background without obscuring\nthe image too much, making the text easier to see. \ncheck_circle\n\n### Do\n\nCompact card using scrim on top of image background. \ncancel\n\n### Don't\n\nDon't use compact cards without scrim on top of the background image."]]
