Cards

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.