Cómo crear un diseño basado en tarjetas

Con frecuencia, las apps deben mostrar datos en contenedores con un estilo similar. Estos contenedores a menudo se usan en listas para retener la información de cada elemento. El sistema proporciona la API de CardView como un modo sencillo para que muestres la información dentro de las 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 por debajo de ellas. Las tarjetas proporcionan un modo sencillo de incluir un grupo de vistas y, al mismo tiempo, proporcionar un estilo coherente para el contenedor.

Figura 1: Ejemplos de tarjeta

Cómo agregar las dependencias

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

    dependencies {
        implementation 'com.android.support:cardview-v7:28.0.0'
    }
    

Cómo crear tarjetas

Para usar un objeto 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 parte de la 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 -->
        <android.support.v7.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" />
        </android.support.v7.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 ofrecer una elevación personalizada para una tarjeta con un atributo card_view:cardElevation. Si es así, se dibujará una sombra más pronunciada con una elevación más grande y una elevación más baja generará una sombra más suave. CardView usa la elevación real y sombras dinámicas de Android 5.0 (API nivel 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.