Criar um layout com base no cartão

Testar o Compose
O Jetpack Compose é o kit de ferramentas de interface recomendado para Android. Aprenda a trabalhar com layouts no Compose.
Card no Material 3 →

Muitas vezes, os apps precisam exibir dados em contêineres com estilos semelhantes, como contêineres que contêm informações sobre os itens de uma lista. O sistema fornece a API CardView para você mostrar informações em cards que têm uma aparência consistente em toda a plataforma. Por exemplo, os cards têm uma elevação padrão acima do grupo de visualização que os contém. Assim, o sistema desenha sombras abaixo deles. Os cards são uma maneira fácil de conter um grupo de visualizações e, ao mesmo tempo, fornecer um estilo consistente para o contêiner.

Uma imagem mostrando a interface de um app com base em cards
Figura 1. Uma interface de app baseada em cards.

Adicionar as dependências

O widget CardView faz parte do AndroidX. Para usá-lo no seu projeto, adicione a seguinte dependência ao arquivo build.gradle do módulo do app:

Groovy

dependencies {
    implementation "androidx.cardview:cardview:1.0.0"
}

Kotlin

dependencies {
    implementation("androidx.cardview:cardview:1.0.0")
}

Criar cards

Para usar um CardView, adicione-o ao arquivo de layout. Use-o como um grupo de visualização para conter outras visualizações. No exemplo abaixo, o CardView contém um ImageView e alguns TextViews para mostrar algumas informações ao usuário:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="16dp"
    android:background="#E0F7FA"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:padding="4dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/header_image"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@drawable/logo"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/title"
                style="@style/TextAppearance.MaterialComponents.Headline3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a title"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/header_image" />

            <TextView
                android:id="@+id/subhead"
                style="@style/TextAppearance.MaterialComponents.Subtitle2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a subhead"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/title" />

            <TextView
                android:id="@+id/body"
                style="@style/TextAppearance.MaterialComponents.Body1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a supporting text. Very Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/subhead" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

O snippet de código anterior produz algo semelhante ao seguinte, supondo que você use a mesma imagem do logotipo do Android:

Uma imagem mostrando um único card
Figura 2. Um exemplo básico de layout baseado em CardView.

O card neste exemplo é exibido na tela com uma elevação padrão, o que faz com que o sistema exiba uma sombra abaixo dele. Você pode fornecer uma elevação personalizada para um card com o atributo card_view:cardElevation. Um card em uma elevação maior tem uma sombra mais acentuada, e um card em uma elevação mais baixa tem uma sombra mais clara. CardView usa elevação real e sombras dinâmicas no Android 5.0 (nível 21 da API) e versões mais recentes.

Use estas propriedades para personalizar a aparência do widget CardView:

  • Para definir o raio do canto nos layouts, use o atributo card_view:cardCornerRadius.
  • Para definir o raio do canto no código, use o método CardView.setRadius.
  • Para definir a cor do plano de fundo de um card, use o atributo card_view:cardBackgroundColor.