Tip Android #30: ListView estilo Google Play

26/09/2013

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.

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.

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