Cómo crear un diseño basado en tarjetas

Prueba el método de Compose

Jetpack Compose es el kit de herramientas de IU recomendado para Android. Obtén información para trabajar con diseños en Compose.

Tarjeta en Material 3 →

Nota: Para obtener una mejor experiencia del usuario, consulta Tarjetas de Material Design.

A menudo, las apps necesitan mostrar datos en contenedores con un estilo similar, como contenedores que contienen información sobre los elementos de una lista. El sistema proporciona la API de CardView para que puedas mostrar información en tarjetas que tengan un aspecto coherente en la plataforma. Para ejemplo, las tarjetas tienen una elevación predeterminada sobre el grupo de vistas que las contiene, de modo que el sistema dibuja sombras debajo de ellos. Las tarjetas brindan una forma de contener un grupo de al mismo tiempo que proporcionan un estilo coherente para el contenedor.

Figura 1: La IU de una app basada en tarjetas

Cómo agregar las dependencias

El widget CardView forma parte de AndroidX. Para usarla en tu proyecto, agrega la siguiente dependencia a build.gradle del módulo de tu app. archivo:

Groovy

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

Kotlin

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

Crea tarjetas

Para usar un CardView, agrégalo a tu archivo de diseño. Úsalo como un grupo de vistas para para incluir otras vistas. En el siguiente ejemplo, CardView contiene un ImageView y algunos TextViews para mostrarle información al usuario:

<?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>

El fragmento de código anterior produce algo similar a lo siguiente, suponiendo que usas la misma imagen del logotipo de Android:

Figura 2: Ejemplo básico de diseño basado en CardView.

La tarjeta de este ejemplo se dibuja en la pantalla con una elevación predeterminada, hace que el sistema dibuje una sombra debajo de él. Puedes proporcionar una elevación personalizada para una tarjeta con el atributo card_view:cardElevation. Una tarjeta con un elevación tiene una sombra más pronunciada, y una carta a una elevación más baja tiene una sombra más clara. CardView usa elevación real y sombras dinámicas en Android. 5.0 (nivel de API 21) y versiones posteriores

Usa estas propiedades para personalizar la apariencia del widget CardView:

• Para establecer el radio de la esquina de tus diseños, usa la card_view:cardCornerRadius .
• Para definir el radio de la esquina de tu código, usa el método CardView.setRadius.
• Para definir el color de fondo de una tarjeta, usa el atributo card_view:cardBackgroundColor.