Interfaz de usuario en Android: CardView

19,2K

Actualizado: Mayo 2020

El componente llamado CardView es la implementación que nos proporciona Google del elemento visual en forma de tarjetas de información que tanto utiliza en muchas de sus aplicaciones.

Para comenzar a hacer uso de este componente tan sólo tenemos que hacer referencia a su librería en la sección de dependencias del fichero build.gradle del módulo principal de la aplicación:

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

Una vez incluida la referencia a la librería, la utilización del componente es muy sencilla. Tan sólo tendremos que añadir a nuestro layout XML un control de tipo androidx.cardview.widget.CardView y establecer algunas de sus propiedades principales. Yo por ejemplo le asignaré una altura de 200dp (layout_height), una anchura que se ajuste a su control padre (layout_width), un pequeño margen para que quede separada de los bordes de la pantalla (layout_margin), y un color de fondo amarillo estilo post-it (cardBackgroundColor).

<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"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        card_view:cardBackgroundColor="#fffffe91"
        android:layout_margin="8dp" >

        <TextView
            android:id="@+id/lblTexto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="@string/tarjeta_1" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

Por supuesto, como en el caso de cualquier otro contenedor (un CardView no es más que una extensión de FrameLayout con esquinas redondeadas y una sombra inferior), dentro de un CardView podemos añadir todos los controles que necesitemos. Como podéis ver en el código anterior, a modo de ejemplo he añadido tan solo una etiqueta de texto (TextView).

Si ejecutamos en este momento el ejemplo sobre el emulador encontraremos el resultado que esperábamos:

Además del color de fondo que ya hemos comentado, también podremos definir la elevación de la tarjeta y el radio de las esquinas redondeadas, utilizando las propiedades cardElevation y cardCornerRadius respectivamente.

No son muchas más las opciones de personalización que nos ofrece CardView, pero con poco esfuerzo deben ser suficientes para crear tarjetas más «sofisticadas», jugando por supuesto también con el contenido de la tarjeta. Como ejemplo, si incluimos una imagen a modo de fondo (ImageView), y una etiqueta de texto superpuesta y alineada al borde inferior (layout_gravity="bottom") con fondo negro algo traslúcido (por ejemplo background="#8c000000") y un color y tamaño de texto adecuados, podríamos conseguir una tarjeta con el aspecto siguiente:

El código concreto para conseguir lo anterior sería el siguiente:

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView2"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        card_view:cardCornerRadius="6dp"
        card_view:cardElevation="10dp"
        android:layout_margin="8dp" >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/city"
            android:scaleType="centerCrop"/>

        <TextView
            android:id="@+id/txt2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="@string/tarjeta_2"
            android:layout_gravity="bottom"
            android:background="#8c000000"
            android:textColor="#ffe3e3e3"
            android:textSize="30sp"
            android:textStyle="bold"/>
    </androidx.cardview.widget.CardView>

Y no habría mucho más que contar sobre este control. Se trata de un componente muy sencillo pero que, usado con moderación, puede hacer muy vistosas algunas de nuestras aplicaciones.

CÓDIGO DEL ARTÍCULO: Puedes consultar y/o descargar el código completo de los ejemplos desarrollados en este artículo accediendo a la pagina del curso en GitHub.