Tip Android #30: ListView estilo Google Play

26/09/2013

android tip

Cada vez son más habituales las aplicaciones en las que los ListView parecen estar compuestos por bloques que se desplazan dentro de un ScrollView sobre un fondo de cierto color. Me refiero, por ejemplo, a la siguiente captura tomada de Google Play.

google play

Conseguir el mismo efecto es sencillo “jugando” con algunas de las propiedades disponibles en los ListView. Otra alternativa es utilizar una combinación RecylerView + CardView.

Vamos a empezar este tip al revés, esto es, mostrando en primer lugar el resultado final de la aplicación de ejemplo y los conceptos para alcanzarlo y luego mostrando el código. Lo que queremos conseguir implementar es la siguiente interfaz de forma “tradicional”, esto es, con ListView.

listview_framed

Los pasos a seguir son:

  1. Nuestra vista sólo tendrá un ListView, no es necesario que esté dentro de otro ViewGroup (LinearLayot,RelativeLayout…)
  2. El background del ListView será el fondo que queramos para toda la pantalla.
  3. La posición de las filas se determinará mediante aplicando un padding al contenido de la fila. Así en el espacio entre los extremos de la pantalla y las filas se mostrará el color de fondo.
  4. Tal y como ya vimos en el tip #23 personalizaremos el divisor de filas con el tamaño deseado y con color transparente. Tras esto ya tenemos “rodeadas” las filas del ListView con el color de fondo de la pantalla (el del ListView).
  5. Por último, definimos para el layout con el contenido de cada fila un color de fondo distinto al del ListView, en nuestro caso blanco, así como los highlights correspondientes mediante un drawable con selectores.

Así pues, lo único que hay que hacer es ver las posibilidades del ListView y pensar un poco. El Layout final es el siguiente;

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

<ListView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/list"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@color/background"
    android:cacheColorHint="@android:color/transparent"
    android:divider="@android:color/transparent"
    android:dividerHeight="12dp"
    android:scrollbarStyle="outsideOverlay"
    android:paddingBottom="7dp" 
    android:paddingLeft="9dp"
    android:paddingRight="9dp"
    android:paddingTop="10dp" >

</ListView>

El atributo resaltado hará que la barra de scroll se muestre en el borde del ListView y no se vea afectado por el padding, creo que de este modo queda más estético sin “invadir” el contenido de una fila. Para personalizar la barra de scroll, véase el tip #06.

Ahora vamos con el layout para la fila. Por simplicidad y para evitar tener que implementar un Adapter, usaremos un TextView con una imagen (consejo: es más eficiente mostrar una imagen adyacente a un texto definiéndola dentro de un ListView que recurrir a un Layout que contenga un ImageView y un TextView).

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

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textView_listview"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/listview_selector"
    android:drawableLeft="@drawable/ic_droid"
    android:textAppearance="@android:style/TextAppearance.Medium"
    android:textColor="@android:color/black" />

listview_selector.xml (los drawable son colores definidos en /res/values/colors.xml y simulan el estilo Holo)

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
 
    <item
        android:state_pressed="true"
        android:drawable="@drawable/highlight_pressed" />
 
    <item
        android:state_focused="true"
        android:drawable="@drawable/highlight_focused" />
 
    <item
        android:drawable="@android:color/white" />
 
</selector>

Y por último, la Activity

package com.danielme.tipsandroid.listviewgplay;

import java.util.ArrayList;
import java.util.List;

import com.danieme.tipsandroid.listviewgplay.R;

import android.app.ListActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;

/**
 * 
 * @author danielme.com
 *
 */
public class MainActivity extends ListActivity
{

	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		List<String> rows = new ArrayList<String>(30);
		for (int i = 1; i < 31; i++)
		{
			rows.add("Lorem ipsum dolor sit amet...");
		}
		setListAdapter(new ArrayAdapter<String>(this, R.layout.text_view, rows));
	}
}

El proyecto completo se encuentra en Github. Para más información sobre cómo utilizar GitHub, consultar este artículo.

<< TIPS ANDROID

7 Responses to Tip Android #30: ListView estilo Google Play

  1. Jorge Vidal dice:

    Muchas Gracias llevaba mucho tiempo buscando esto..

  2. David dice:

    Que genial están los tutoriales, lo que no encontré sobre sliding menu

  3. Sabes como hacer para que en modo horizontal se muestren dos tarjetas juntas.? Algo como google nos. Gracias de antemano

  4. Christopher dice:

    Como capturo el evento del click de cada elemento, espero tu ayuda?

  5. Edgar dice:

    disculpa y la carpeta layout?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: