Como empezar a usar CardView en Android L.

Como vimos en la pasada Google I/O, Android L esta aquí y trae consigo una serie de mejoras y añadidos al SDK de Android.

Este sera la primera entrega de una serie de post donde hablare sobre como integrar estas nuevas opciones que Google le ofrece a los desarrolladores.

Entre los añadidos se encuentra un nuevo widget llamado CardView, es posible que ustedes lo hayan visto ya en acción en Google now.

Primero tendrán que añadir desde su SDK Manager el SDK de Android L.

SDK Manager mostrando el SDK de Android L preview

Después tendrás que crear un nuevo proyecto que tenga como SDK mínimo la API 20 + Android L.

Nuevo proyecto para Android L

Una vez creado el proyecto deberás añadir a su archivo build.gradle las siguientes lineas que llamaran a las librerías de compatibilidad de los repositorios de Google.

dependencies {
    compile 'com.android.support:support-v4:20.0.0'
    compile 'com.android.support:cardview-v7:+'
    compile 'com.android.support:recyclerview-v7:+'
    compile 'com.android.support:palette-v7:+'
    ...
}

Los CardView son derivados de FrameLayout que suele usarse como contendedor, esto nos obliga a tener un solo elemento dentro de este nuevo CardView.

Para usar el CardView basta con añadirlo al layout de la actividad. Este nuevo widget ya trae incluidos todos los estilos de tarjetas.

<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_margin="5dp"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    card_view:cardCornerRadius="5dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/textView2"
        android:paddingLeft="10dp"
        android:paddingTop="10dp" />


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

Como pueden observar en este caso tenemos un TextView dentro de este CardView, obviamente ese podría ser remplazado por un LinearLayout o RelativeLayout para brindar mayor flexibilidad.

Algunas de las propiedades que se pueden usar para personalizar estas tarjetas son

card_view:cardCornerRadius="5dp" /*Modifica la circunferencia del borde*/
card_view:cardBackgroundColor="@color/blue" /*Modifica el color de fondo de la tarjeta*/

Lamentablemente aun no he encontrado mas referencia a estas propiedades disponibles, estoy seguro que pronto Google lo publicara.

Ahora, añadiremos un color de fondo para que podamos ver bien el estilo de las nuevas CardView.

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="#ff7f50"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".CardActivity">

Al compilar y probar en el emulador podremos observar nuestro nuevo widget. Si no se han creado su emulador con Android L, este es el momento indicado.

Emulador corriendo y mostrando las CardView

Como pueden ver es sencillo implementar este nuevo widget.

En el siguiente post veremos como usar este widget con otra nueva inclusión en el SDK para Android L llamada RecyclerView