Android
CardView

Introducción

Parámetros

Observaciones

dependencies{
    compile 'com.android.support:cardview-v7:25.2.0'
}

Empezando con CardView

CardView es miembro de la biblioteca de soporte de Android y proporciona un diseño para tarjetas.

Para agregar CardView a su proyecto, agregue la siguiente línea a sus dependencias de build.gradle .

compile 'com.android.support:cardview-v7:25.1.1'

Un número de la última versión se puede encontrar aquí

En su diseño, puede agregar lo siguiente para obtener una tarjeta.

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

        <!-- one child layout containing other layouts or views -->     

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

Luego puede agregar otros diseños dentro de este y se incluirán en una tarjeta.

Además, CardView se puede rellenar con cualquier elemento de la interfaz de usuario y se puede manipular desde el código .

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/card_view"
    android:layout_margin="5dp"
    card_view:cardBackgroundColor="#81C784"
    card_view:cardCornerRadius="12dp"
    card_view:cardElevation="3dp"
    card_view:contentPadding="4dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp" >

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/item_image"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="16dp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/item_title"
            android:layout_toRightOf="@+id/item_image"
            android:layout_alignParentTop="true"
            android:textSize="30sp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/item_detail"
            android:layout_toRightOf="@+id/item_image"
            android:layout_below="@+id/item_title"
            />

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

Personalizando el CardView

CardView proporciona una elevación y un radio de esquina predeterminados para que las tarjetas tengan una apariencia uniforme en las plataformas.

Puede personalizar estos valores predeterminados utilizando estos atributos en el archivo xml:

1. card_view:cardElevation atributo card_view:cardElevation agrega elevación en CardView.
2. card_view:cardBackgroundColor atributo card_view:cardBackgroundColor se usa para personalizar el color de fondo del fondo de CardView (puedes darle cualquier color).
3. card_view:cardCornerRadius atributo card_view:cardCornerRadius se usa para curvar 4 bordes de CardView
4. card_view:contentPadding atributo card_view:contentPadding agrega el relleno entre la tarjeta y los hijos de la tarjeta

Nota: card_view es un espacio de nombres definido en la vista de diseño principal superior. xmlns: card_view = " http://schemas.android.com/apk/res-auto "

Aquí un ejemplo:

<android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardElevation="4dp"
        card_view:cardBackgroundColor="@android:color/white"
        card_view:cardCornerRadius="8dp"
        card_view:contentPadding="16dp">

        <!-- one child layout containing other layouts or views -->     

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

También puedes hacerlo mediante programación:

card.setCardBackgroundColor(....);
card.setCardElevation(...);
card.setRadius(....);
card.setContentPadding();

Compruebe el javadoc oficial para propiedades adicionales.

Añadiendo animación de rizo

Para habilitar la animación ripple en un CardView, agregue los siguientes atributos:

<android.support.v7.widget.CardView
  ...
  android:clickable="true"
  android:foreground="?android:attr/selectableItemBackground">
  ...
</android.support.v7.widget.CardView>

Uso de imágenes como fondo en CardView (problemas con el dispositivo Pre-Lollipop)

Mientras usa Imagen / Color como fondo en un CardView, puede terminar con pequeños rellenos blancos (si el color predeterminado de la Tarjeta es blanco) en los bordes. Esto ocurre debido a las esquinas redondeadas predeterminadas en la Vista de tarjeta. Aquí es cómo evitar esos márgenes en dispositivos Pre-lollipop.

Necesitamos usar un atributo card_view:cardPreventCornerOverlap="false" en el CardView. 1). En XML usa el siguiente fragmento de código.

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    card_view:cardPreventCornerOverlap="false"
    android:layout_height="wrap_content"> 
      <ImageView
            android:id="@+id/row_wallet_redeem_img"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"
            android:src="@drawable/bg_image" />

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

2. En Java como esta cardView.setPreventCornerOverlap(false) .

Al hacerlo, elimina un relleno no deseado en los bordes de la Tarjeta. Aquí hay algunos ejemplos visuales relacionados con esta implementación.

1 tarjeta con fondo de imagen en API 21 (perfectamente bien)

2 Tarjeta con fondo de imagen en API 19 sin atributo (observe los rellenos alrededor de la imagen)

3 Tarjeta FIJA con fondo de imagen en API 19 con atributo cardView.setPreventCornerOverlap(false) (Problema ahora solucionado)

Lea también sobre esto en Documentación aquí
Publicación original de SOF aquí

Animar CardView color de fondo con TransitionDrawable

public void setCardColorTran(CardView card) {
    ColorDrawable[] color = {new ColorDrawable(Color.BLUE), new ColorDrawable(Color.RED)};
    TransitionDrawable trans = new TransitionDrawable(color);
    if(Build.VERSION.SDK_INT > Build.VERSION_CODES.ICE_CREAM_SANDWICH_MR1) {
        card.setBackground(trans);
    } else {
        card.setBackgroundDrawable(trans);
    }
    trans.startTransition(5000);
}