Cómo crear un diseño basado en tarjetas

Con frecuencia, las apps deben mostrar datos en contenedores con un estilo similar. Estos contenedores se usan a menudo en listas para retener la información de cada elemento. El sistema proporciona la API de CardView como una manera sencilla de mostrar información en tarjetas que tienen un aspecto coherente en la plataforma. Estas tarjetas tienen una elevación predeterminada por encima del grupo de vistas que las contiene, de modo que el sistema dibuja sombras debajo de ellas. Las tarjetas ofrecen una forma simple de incluir un grupo de vistas y, al mismo tiempo, proporcionar un estilo coherente para el contenedor.

Figura 1: Ejemplos de tarjeta

Agrega las dependencias

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

Groovy

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

Kotlin

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

Crea tarjetas

Para usar CardView, necesitas agregarlo a tu archivo de diseño. Úsalo como grupo de vistas para incluir otras vistas. En este ejemplo, CardView incluye un objeto TextView individual que muestra algo de información al usuario.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    ... >
    <!-- A CardView that contains a TextView -->
    <androidx.cardview.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

Las tarjetas se dibujan en la pantalla con una elevación predeterminada, y esto hace que el sistema dibuje una sombra debajo de ellas. Puedes proporcionar una elevación personalizada para una tarjeta con el atributo card_view:cardElevation. De esa manera, se dibujará una sombra más pronunciada si eliges una elevación más grande, y una sombra más suave si optas por una elevación más baja. CardView usa la elevación real y sombras dinámicas de Android 5.0 (Nivel de API 21) y versiones posteriores, y regresa a la implementación de una sombra programática en las versiones anteriores.

Usa estas propiedades para personalizar la apariencia del widget CardView:

• Para definir el radio de la esquina de tus diseños, usa el atributo 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.

Para obtener más información, consulta la referencia de la API de CardView.