Cartões
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
O componente Card tem conteúdo e ações sobre um único assunto.
Anatomia
Um componente card tem apenas um slot. Os cards podem conter ícones, imagens ou rótulos e são personalizáveis.
Por padrão, os cards são retangulares com cantos arredondados e um plano de fundo em gradiente. Defina a altura máxima do seu card como 60% para garantir que ele apareça inteiro na tela, já que as telas redondas têm recorte de até 20% das partes de cima e de baixo.
Cards de títulos
Use cartões de título para mostrar informações em um aplicativo, como uma mensagem. Os cards de título têm um layout de três espaços que inclui um título, um campo de hora opcional e o conteúdo relevante, que é uma imagem ou um texto.
Card de apps
Use Cards de apps para mostrar elementos interativos de vários aplicativos. Os cards de apps têm um layout de cinco slots que inclui um ícone do aplicativo, o nome do aplicativo, a hora em que a atividade ocorreu, um título de algum tipo e o conteúdo relevante, que é uma imagem ou um texto.
Gradiente de cards
Gradiente das cartas
Superfície superior/esquerda + padding de 68 dp da esquerda = 100% da superfície
Inferior/direita = 0% da superfície
Sobreposição do card de imagem
Superfície superior/esquerda + 56 dp de padding de T/L = 100% de superfície
Inferior/direita + 24 dp de padding de B/R = 0% de superfície
(sobreposições de gradiente em um plano de fundo de imagem)
Tamanhos
Largura do card
O padrão dos cards é a largura máxima do contêiner.
Altura do card
A altura do card é variável. É determinado pelo conteúdo dos componentes.
Em mostradores de relógio redondos, cards com mais de 60% da altura das telas são cortados.
Uso
Layouts adaptáveis
TitleCard
Em telas maiores, é permitido usar uma linha extra de texto para o corpo do texto. Para mostrar mais da imagem, adicione um padding de 24 dp ampliado na parte de baixo.
TitleCard com imagem inline (substituindo o slot do texto do corpo)
Em telas maiores, a proporção da imagem não muda e o padding está à direita para não tornar a altura do cartão muito grande.
Cards com mais personalização
Card com imagem de plano de fundo
Para alcançar esse layout, você precisará de personalização.
Os cards de imagem mostram conteúdo relacionado a um único tópico com uma imagem de plano de fundo. Os cards de imagem também podem mostrar imagens independentes.
Recomendamos que o padding da parte de baixo seja aumentado para 24 dp, a fim de mostrar mais da imagem de plano de fundo sem texto sobre ela.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-07-27 UTC.
[null,null,["Última atualização 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"]]
