O componente Card
tem conteúdo e ações sobre um único assunto.
Anatomia
Um componente card tem apenas um slot. Os cards podem ser personalizados e conter ícones, imagens
ou rótulos.
Por padrão, os cards são retangulares com cantos arredondados e um plano de fundo
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
cards de títulos
para mostrar informações em um aplicativo, por exemplo, uma mensagem. Os cards de título
têm um layout de três slots, que inclui um título, um campo opcional de hora
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 app, o nome do app,
a hora em que a atividade ocorreu, um título de algum tipo e o conteúdo
relevante, que é uma imagem ou um texto.
Recomendações de design
Card de imagem
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.
TitleCard(
onClick = { ... },
title = { Text("Workout") },
backgroundPainter = CardDefaults.imageWithScrimBackgroundPainter(
backgroundImagePainter = painterResource(id = R.drawable.backgroundimage)
),
contentColor = MaterialTheme.colors.onSurface,
titleColor = MaterialTheme.colors.onSurface
) {
Text("12 songs · 1 Hour 32 mins")
}
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. Ela é determinada pelo conteúdo dos componentes.
Em mostradores de relógio redondos, cards com mais de 60% da altura das
telas são cortados.