Inicio Android Interfaz de usuario en Android: CardView

Interfaz de usuario en Android: CardView

por sgoliver

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.

También te puede interesar

5 comentarios

NicoRz 12/03/2015 - 0:40

Ósea más que como otro tipo de contenedor no sirve? Ósea no tiene otra mejora? Para hacer una lista de cardview únicamente se las usa en un recyclerview como cualquier otro layout?

Responder
Pedro 19/03/2015 - 14:40

Hola Salvador, me gustaría que para futuros artículos tuvieras en cuenta cómo implementar las líneas de diseño de Material Design, ya que la documentación oficial sólo explica ‘cómo debe ser’ al detalle, pero nanai del ‘cómo hacerlo’.

Saludos.

Responder
Actionbar / Appbar / Toolbar en Android (II) | sgoliver.net blog 17/05/2015 - 17:40

[…] podríamos por ejemplo utilizar un componente toolbar dentro de una tarjeta (ver artículo sobre CardView). Para ello, añadamos una tarjeta a nuestra aplicación de ejemplo, y simplemente incluyamos en su […]

Responder
Raymundo 30/01/2016 - 20:15

card_view:cardCornerRadius=»6dp»
card_view:cardElevation=»10dp»
card_view:cardUseCompatPadding=»true»
card_view:cardPreventCornerOverlap=»false»
cuando utilizo card_view: en el xml android studio marca error y lo coloca en color rojo marca lo siguiente:
namespace card_view is not boun.
la pregunta es si en ultimas versiones ya no funcionan las propiedades de esa manera o que es lo que esta pasando.
gracias es una excelente pagina felicitaciones por su trabajo.

Responder
ejrope 14/03/2016 - 13:49

@Raymundo definiste el namespace?
Normalmente se define el View contenedor así: xmlns:card_view=»http://schemas.android.com/apk/res-auto»

Responder

Dejar un comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. Aceptar Más Información

Política de Privacidad y Cookies