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
.