Material Design: CardView (Tarjetas)

Un CardView es parte de los estilos de Material Design y nos permite mostrar información dentro de tarjetas (Card), esta información puede mostrarse más de una vez en una actividad usando un Cardview y un RecyclerView, aunque esto no es obligatorio, es lo más usual.

A continuación conoceremos un poco más sobre este CardView y su uso desde Android Studio.

Partiremos de un proyecto básico que llamaremos «Tarjetas»

Lo primero que debemos hacer para trabajar con Material Design, es agregar las dependencias necesarias para que estos widgets funcionen.

Abre el archivo build.Gradle y agrega:

compile ‘com.android.support:cardview-v7:25.3.+’

en la sección de dependencias, es decir:

Importante: deben coincidir las versiones de compileSdkVersion y de las dependencias de CardView, en este ejemplo es el SDK «25». Si tu utilizas otra versión del SDK debes o actualizar tu SDK o utilizar la versión que corresponda, es decir, para un compileSdkVersion: 23 podría usarse un compile ‘com.android.support:cardview-v7:23.1.+’

Usando Tarjetas (CardView)

Abre el archivo activity_main.xml y reemplaza el contenido por:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:background="#b3e8ff"
    android:orientation="vertical"
    tools:context="org.example.tarjetas.MainActivity">

    <!-- Tarjeta -->
    <android.support.v7.widget.CardView
        android:layout_margin="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hola Mundo Cruel"/>

    </android.support.v7.widget.CardView>
    <!-- Tarjeta:end -->

</LinearLayout>

el contenido entre <!– Tarjeta –>…<!– Tarjeta:end –> es lo mínimo necesario para trabajar con cardview, es decir, declaramos el contenedor (cardview) y su contenido (en este caso un TextView)

ejecuta y podrás ver en pantalla algo como esto:

CardView cuenta con algunas propiedades que nos permiten personalizar las tarjetas:

cardCornerRadius: Radio de las esquinas
cardElevation: Sombra
cardBackgroundColor: Color de fondo de la tarjeta

Reemplaza el contenido entre <!– Tarjeta –>…<!– Tarjeta:end –> por:

<!-- Tarjeta -->
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"

        card_view:cardCornerRadius="8dp"
        card_view:cardElevation="5dp"
        card_view:cardBackgroundColor="#ff7c58"

        android:layout_margin="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hola Mundo Cruel\n¿Como estas hoy?\nYo bien :)"/>

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"

        card_view:cardCornerRadius="50dp"
        card_view:cardElevation="8dp"
        card_view:cardBackgroundColor="#ff110d"

        android:layout_gravity="center|center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_gravity="center|center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#FFF"
                android:gravity="center|center"
                android:text="Android Bolivia"/>

        </LinearLayout>


    </android.support.v7.widget.CardView>
    <!-- Tarjeta:end -->

Ejecuta la aplicación

Tenemos dos tarjetas personalizadas, podemos observar en el segundo ejemplo que CardView al ser un contenedor, podemos colocar más de un objeto para realizar nuestro diseño.

Finalmente presentamos un ejemplo más elaborado de lo que se puede hacer con un CardView, se usaron LinearLayout, TextView, ImageView y algunas imágenes sacadas de Google Tiempo, inténtalo haber como te queda:

Eso es todo por el momento, en post futuros veremos como trabajar con Tarjetas (Cardview) y listas (RecyclerView).

~~IMPORTANTE:~~ Si tienes algún problema al ejecutar los ejemplos de este de este post y el error que tienes, tiene que ver con VectorDrawableCompat, debes actualizar tu GRADLE

enjoy!!!

Material Design: CardView (Tarjetas)

Tags

Últimas entradas

Así funciona rutaenvivo.com el mapa tracking de la Virgen de Guadalupe

El Alto lanza credenciales con QR para verificar identidades en un solo escaneo

«BolivIA» el primer modelo de I.A. desarrollado desde el Estado boliviano

Atlas de anatomía 3D con VibeCoding

GRATIS hasta el 13 de agosto: Ubisoft regala Tom Clancy’s Ghost Recon Future Soldier

Artículos similares

Gráficos estadísticos con Base de Datos SQLite

Quill Editor: Cómo Integrar el WYSIWYG Modular en Vistas Blade

Ejemplo de operaciones CRUD con MyBatis 3

Crear ejecutables con Matlab

Creación de GUI con Matlab GUIDE

Tutorial HeidiSQL: Sesion, Base de datos y Tablas

JC Mouse | Bolivia