Tarjetas
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
El componente Tarjeta incluye contenido y acciones sobre un solo tema.
Anatomía
Un componente de tarjeta solo tiene una ranura. Las tarjetas pueden contener íconos, imágenes o etiquetas y son personalizables.
De forma predeterminada, las tarjetas son rectangulares con esquinas redondeadas y un fondo con gradiente. Establece la altura máxima de tu tarjeta en 60% para asegurarte de que se muestre por completo en la pantalla, ya que las pantallas circulares pueden recortar hasta el 20% de las partes inferior y superior de la pantalla.
Tarjeta de título
Usa Tarjetas de título para mostrar información dentro de una aplicación, como un mensaje. Las tarjetas de título tienen un diseño de tres espacios que incluye un título, un campo de horario opcional y el contenido relevante, que puede ser una imagen o texto.
Tarjeta de apps
Usa las tarjetas de apps para mostrar elementos interactivos de varias aplicaciones. Las tarjetas de apps tienen un diseño de cinco espacios que incluye el ícono de la aplicación, el nombre de la aplicación, la hora en que ocurrió la actividad, un título de algún tipo y el contenido relevante, que puede ser una imagen o texto.
Gradiente de tarjetas
Gradiente de la tarjeta
Parte superior/izquierda + padding de 68 dp de izquierda = 100% de superficie
Parte inferior/derecha = 0% de superficie
Superposición de tarjeta de imagen
Parte superior/izquierda + padding de 56 dp de T/L = 100% de superficie
Parte inferior/derecha + padding de 24 dp de B/R = 0% de superficie
(Superposiciones de gradiente sobre el fondo de una imagen)
Tamaños
Ancho de la tarjeta
De forma predeterminada, las tarjetas tienen el ancho máximo del contenedor.
Altura de la tarjeta
La altura de la tarjeta es flexible. Está determinada por el contenido de los componentes.
En las caras de reloj redondas, se recortan las tarjetas que superan el 60% de la altura de las pantallas.
Uso
Diseños adaptables
Tarjeta de título
En pantallas más grandes, permitimos una línea de texto adicional para el cuerpo del texto. Para mostrar más de la imagen, agrega un padding ampliado de 24 dp en la parte inferior.
TitleCard con imagen intercalada (reemplaza la ranura del cuerpo del texto)
En pantallas más grandes, la imagen no cambia su relación de aspecto y tiene el padding a la derecha para que la altura de la tarjeta no sea demasiado grande.
Tarjetas con personalización adicional
Tarjeta con un fondo de imagen
Para lograr este diseño, deberás personalizarlo.
Las tarjetas de imagen muestran contenido relacionado con un solo tema con una imagen de fondo. Las tarjetas de imagen también pueden mostrar imágenes independientes.
Se recomienda que el padding inferior aumente a 24 dp para que se muestre una mayor parte de la imagen de fondo sin texto.
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\n\nThe [Card](/reference/kotlin/androidx/wear/compose/material/package-summary#Card(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)) component contains content and actions about a single subject.\n\nAnatomy\n-------\n\nA card component only has a single slot. Cards can contain icons, images or labels, are customizable.\n\nBy default, cards are rectangular with rounded corners and a gradient background. Set the maximum height of your card to 60% to ensure that it's fully displayed on the screen because circular displays can clip up to 20% of the top and bottom of the screen.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Title Card**\n\nUse [Title cards](/reference/kotlin/androidx/wear/compose/material/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) to show information within an application, such as a message. Title cards have a three-slot layout which includes a title, an optional time field, and the relevant content, which is either an image or text. \n**App Card**\n\nUse [App cards](/reference/kotlin/androidx/wear/compose/material/package-summary#AppCard(kotlin.Function0,kotlin.Function1,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) to show interactive elements from multiple applications. App cards have a five-slot layout that includes an application icon, the application name, the time that the activity occurred, a title of some sort and the relevant content, which is either an image or text.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nCards gradient\n--------------\n\n**Card Gradient**\n\nTop/Left + 68dp padding from Left = 100% Surface \n\nBottom/Right = 0% Surface\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Image Card Overlay**\n\nTop/Left + 56 dp padding from T/L = 100% Surface \n\nBottom/Right + 24 dp padding from B/R = 0% Surface \n\n(Gradient overlays on a image background)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\n**Card width**\n\nCards default to the maximum width of the container.\n\n\u003cbr /\u003e\n\n**Card height**\n\n\u003cbr /\u003e\n\nCard height is flexible. It is determined by the components' content.\n\nOn round watch faces, cards that are taller than 60% of the height of the screens are clipped.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nAdaptive layouts\n----------------\n\n**TitleCard**\n\nOn larger screens we allow an extra line of text for body copy. And in order to display more of the image, add an enlarged 24 dp padding at the bottom.\n\n**TitleCard with in-line image (replacing the body copy slot)**\n\nOn larger screens, the image doesn't change its aspect ratio and has the padding on the right in order to not make the height of the card too big.\n\n### Cards with additional customization\n\n**Card with an image background** \nIn order to achieve this layout you will need customization. \n\n\nImage cards display content relating to a single topic with a background image. Image cards can also display standalone images. \n\n\nIt is recommended that the bottom padding is increased to 24 dp in order to display more of the background image without text over it.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
