Jun 6, 2013

Tarjetas estilo Google Now con la librería CardsUI en Android

Hoy os traigo una librería que me ha gustado mucho. En pocas palabras lo que hace es emular la apariencia de las tarjetas que está poniendo de moda Google Now. La librería viene de la mano de Nadavfima, aquí podéis encontrar su repositorio de Github donde debéis descargaros la librería https://github.com/nadavfima/cardsui-for-android.

Una vez descargada la librería y descomprimida vamos a Eclipse y creamos un nuevo proyecto Android a partir de uno existente. Seleccionamos la carpeta donde descomprimimos la librería, y abrimos la carpeta CardUILib. Normalmente yo suelo marcar la opción de copiar el proyecto en mi workspace, pero esto no es imprescindible. Finalmente aceptamos.

Ahora sobre un proyecto existente o en uno nuevo añadiremos esta librería al proyecto. Para ello hacemos botón derecho sobre el proyecto, seleccionamos Properties > Android y abajo de todo añadimos una nueva librería, debería aparecer nuestra librería. Seleccionamos y aceptamos.

Ya en el código de nuestro proyecto vamos primero con el layout, que tendrá lo siguiente:

<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" >

    <com.fima.cardsui.views.CardUI
        android:id="@+id/cardsview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Es un layout muy simple con la vista CardUI que mostrará las tarjetas. Estas tarjetas pueden tener el diseño que mejor se ajuste a nuestra aplicación, para ello la librería tiene una clase Card de la cual debemos heredar para crear nuestras vistas personalizadas. Veamos como hacerlo, para ello debéis crear una clase que llamaremos CustomCard y hereda de Card:

public class CustomCard extends Card {

 public CustomCard(String titlePlay, String description, String color,
   String titleColor, Boolean isClickable) {
  super(titlePlay, description, color, titleColor, false,
    isClickable);
 }

 @Override
 public View getCardContent(Context context) {
  View v = LayoutInflater.from(context).inflate(R.layout.card, null);

  ((TextView) v.findViewById(R.id.title)).setText(titlePlay);
  ((TextView) v.findViewById(R.id.title)).setTextColor(Color
    .parseColor(titleColor));
  ((TextView) v.findViewById(R.id.description)).setText(description);
  ((ImageView) v.findViewById(R.id.stripe)).setBackgroundColor(Color
    .parseColor(color));

  if (isClickable == true)
   ((LinearLayout) v.findViewById(R.id.contentLayout))
     .setBackgroundResource(R.drawable.selectable_background_card);

  
  return v;
 }

}

En su método getCardContent se carga en la vista que devolveremos el layout que tiene el diseño de la tarjeta, card.xml. Y se inicializan sus controles para darles el valor correspondiente y ponerle el color que le hayamos pasado. Además utilizamos un drawable para mostrar que es un objeto clickable. Este es el drawable, debéis crearlo en la carpeta drawable con el nombre selectable_background_card.xml:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android"
        android:exitFadeDuration="@android:integer/config_mediumAnimTime" >
    <item android:state_pressed="false" android:state_focused="true" android:drawable="@android:color/transparent" />
    <item android:state_pressed="true" android:drawable="@color/card_light_text" />
    <item android:drawable="@android:color/transparent" />
</selector>

Y este es el layout card.xml que debéis crear en la carpeta layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="6dp"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:weightSum="100" >

        <ImageView
            android:id="@+id/stripe"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:adjustViewBounds="true"
            android:background="@android:color/darker_gray"
            android:baselineAlignBottom="true"
            android:contentDescription="color_stripe"
            android:scaleType="centerCrop" />

        <LinearLayout
            android:id="@+id/contentLayout"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dip"
            android:layout_weight="90"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dip"
               
                android:text="title"
                android:textColor="#33B6EA"
                android:textSize="24sp" />

            <TextView
                android:id="@+id/description"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="8dip"
                android:layout_marginRight="48dip"
                android:ellipsize="end"
               
                android:maxLines="3"
                android:text="desc"
                android:textSize="16sp" />
        </LinearLayout>

    </LinearLayout>
</LinearLayout>

Aquí vosotros podéis modificar el diseño como mejor os convenga, pero para empezar está bastante bien. Por último, vamos a nuestra Activity y en el método onCreate, por ejemplo, vamos a añadir unas cuantas tarjetas:

  CardUI mCardView = (CardUI) findViewById(R.id.cardsview);
  mCardView.setSwipeable(false);

  CardStack stack = new CardStack();
  stack.setTitle("Title");
  mCardView.addStack(stack);
     
      CustomCard card_1 = new CustomCard("Card 1",
     "Description",
     "#123456",
     "#123456", false);
      
      card_1.setOnClickListener(new OnClickListener() {    
    public void onClick(View v) {     
     Toast.makeText(MainActivity.this, "Mensaje", Toast.LENGTH_LONG).show();
    }
      });
      mCardView.addCardToLastStack(card_1);
      
      CustomCard card_2 = new CustomCard("Card 2",
     "Description",
     "#1ad1ad",
     "#1ad1ad", false);
      
      card_2.setOnClickListener(new OnClickListener() {    
    public void onClick(View v) {     
     Toast.makeText(MainActivity.this, "Mensaje", Toast.LENGTH_LONG).show();
    }
      });
      mCardView.addCardToLastStack(card_2);
      
      CustomCard card_3 = new CustomCard("Card 3",
     "Description",
     "#fd3ea2",
     "#fd3ea2", false);
      
      card_3.setOnClickListener(new OnClickListener() {    
    public void onClick(View v) {     
     Toast.makeText(MainActivity.this, "Mensaje", Toast.LENGTH_LONG).show();
    }
      });
      mCardView.addCardToLastStack(card_3);
      
      CustomCard card_4 = new CustomCard("Card 4",
     "Description",
     "#fd3ea2",
     "#fd3ea2", false);
      
      card_4.setOnClickListener(new OnClickListener() {    
    public void onClick(View v) {     
     Toast.makeText(MainActivity.this, "Mensaje", Toast.LENGTH_LONG).show();
    }
      });
      mCardView.addCard(card_4);
     
     mCardView.refresh();

Lo primero es inicializar nuestra vista CardUI donde iremos añadiendo las tarjetas. Con setSwipeable a true podremos desplazar lateralmente las tarjetas para eliminarlas. Lo siguiente es añadir un CardStack que es una cabecera con su título. Y después ya empezamos a crear las tarjetas, definiendo su título, descripción, colores del título y si es clickable. Opcionalmente podemos definir que pasará cuando se haga click en cada una de las tarjetas. Y finalmente se añaden a la vista.

Para añadir las tarjetas tenemos dos opciones, con el método addCardToLastStack, que va apilando las tarjetas una encima de otra y con addCard que separará esta tarjeta de las anteriores.

Finalmente con el método refresh actualizamos la vista para que pinte las tarjetas que se añadieron.

Durante el desarrollo de este ejercicio tuve un problema con la librería. En la clase CardStack tuve que comentar la siguiente línea del método getView hasta que investigue porque pasa esto. Por el resto no me dio más problemas. Espero que a vosotros os funcione sin problemas.

title.setTextColor(Color.parseColor(stackTitleColor));

Bio
Latest Posts

Daniel Ferrer Delgado

Técnico en Administración de Sistemas y Desarrollo de Aplicaciones. Amigo de sus amigos, y una mente inquieta que no puede dejar un ordenador de lado porque necesita programar aplicaciones Android o aplicaciones en general, además de páginas web. Nuestro programador de cabecera y espero que también el vuestro.