Tip Android #23: diseñar el separador de filas de ListView

30/05/2013
android tip

En el tip #06 vimos cómo personalizar la barra de scroll del widget ListView. En este tip se va a personalizar la línea separadora de las filas o rows de forma muy parecida y que técnicamente se conoce como divider.

Se toma como punto de partida el ejemplo del tip #06. El único layout de la aplicación de ejemplo es el siguiente.

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

<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <ListView
        android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="@drawable/list_divider">
    </ListView>

</merge>

El drawable al que hacemos referencia es el siguiente (se ha usado un inset como “truquillo” para que la línea tenga márgenes)

<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="5dp"
    android:insetRight="5dp" >

    <shape android:shape="line" >

        <!-- width: altura de la línea -->
        <stroke
            android:width="2dp"
            android:color="#ff0000" />
        
        <!-- altura del drawable, siempre debe ser superior al width anterior -->
        <size android:height="3dp" />
    </shape>

</inset>	

El resultado en Jelly Bean es el siguiente:

android listview divider

Veamos un ejemplo más sofisticado con un gradiente:

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

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="5dp"
    android:insetRight="5dp" >

    <shape>
        <gradient
            android:angle="0"
            android:centerColor="#b70000"
            android:endColor="#ffd2d2"
            android:height="2dp"
            android:startColor="#ffd2d2" />

        <size android:height="3dp" />
    </shape>

</inset>

android listview divider gradient

Por último, comentar que si simplemente queremos cambiar el color se puede indicar directamente con el atributo “android:divider” del ListView. Lo mismo es aplicable a la anchura (“android:dividerHeight”)

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

<< TIPS ANDROID

One Response to Tip Android #23: diseñar el separador de filas de ListView

  1. enrique dice:

    oye vi tu ejemplo y me parecio interesante. en algun momento haz utilizado un lista circular , y con circular me refiero al diseño . como si fuera una ruleta. .
    realizo un proyecto donde capturo datos nombre y actividades … desde un activity las paso a este pero al girar un especie de ruleta organize los datos aleatoriamente al girar o presionando un boton .. saludos .!

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: