Crear listas personalizadas en Android

Introducción
Bienvenidos a la sección de programación Android, hoy voy a explicar cómo crear listas
personalizadas en Android. Las listas en Android son elementos que nos permiten
desplegar colecciones de información ordenadamente como un grupo de datos
relacionados, resultados y alguno que otro menú de interacción. La lista básica por
defecto en Android es como se muestra en la Figura 1.

Figura 1. Lista básica en Android

Por otra parte las listas personalizadas nos permiten mostrar algo más que solo un texto,
estas listas permiten desplegar más información ya que un ítem de la lista se convierte en
una vista en XML a la que se le pueden agregar diferentes controles como parte de su
personalización, controles que a su misma vez pueden ser diferentes, un ejemplo se
muestra en la Figura 2.
 TextView
ImageView

TextView

TextView

Figura 2. Controles dentro de una lista personalizada

Elementos necesarios
Los elementos básicos que necesitamos para construir una lista personalizada son los
siguientes:

1. Una vista XML con todos los elementos de un ítem. Componentes base de un
ítem de la lista personalizada.
2. Clase que extienda (herede) de la clase BaseAdapter. Clase que nos ayudará a
construir la vista personalizada.
3. Clase de titular. Contiene las propiedades en base a un ítem.

Crear la lista personalizada

Como principal punto creamos un proyecto normal en Android Studio, ya que tenemos el
proyecto creado, en la vista principal (activity_main.xml) agregamos el siguiente
fragmento de código:
<ListView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/listItems" />

En la parte de res/layout con el clic del proyecto agregamos un nuevo recurso de Layout a
través de New -> Layout resource file como se muestra en la Figura 3.

Figura 3. Agregar un recurso de Layout

Se nos abrirá luego una ventana en la que podemos especificar el nombre del archivo y el
tipo de Layout, aquí especificamos en File name un nombre como ítems y en Root element
pondremos RelativeLayout como se muestra en la Figura 4. Una vez creado presionamos
el botón OK.

Figura 4. Ventana de creación de un nuevo archivo de recurso

Luego de creado la vista XML procedemos a modificar su contenido.

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

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

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:padding="5dip">

<LinearLayout android:id="@+id/thumbnail"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="3dip"

android:layout_alignParentLeft="true"
 android:layout_marginRight="5dip">

<!—Elemento ImageView para la imagen del item-->

<ImageView

android:id="@+id/imgItem"

android:layout_width="60dip"

android:paddingLeft="16dp"

android:layout_height="60dip"/>

</LinearLayout>

<!—Elemento TexView para el Título -->

<TextView

android:id="@+id/txtTitle"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignTop="@+id/thumbnail"

android:layout_toRightOf="@+id/thumbnail"

android:textColor="#009688"

android:text=""

android:paddingLeft="16dp"

android:paddingRight="16dp"

android:paddingTop="5dp"

android:textSize="22dip"

android:fontFamily="sans-serif-condensed"

android:textStyle="normal"/>

<!—Elemento TexView para la descripción -->

 <TextView

android:id="@+id/txtDescription"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_below="@id/txtTitle"

android:textColor="#546e7a"

android:text=""

android:textSize="17dip"

android:paddingLeft="16dp"

android:paddingRight="16dp"

android:fontFamily="sans-serif-thin"

android:textStyle="normal"

android:layout_marginTop="1dip"

android:layout_toRightOf="@+id/thumbnail" />

</RelativeLayout>

Ahora que tenemos la vista del ítem de la lista, procedemos a crear la clase titular a través
de una nueva clase de Java a la cual le pondremos como nombre TitularItems esta clase
nos ayudará para identificar los componentes dentro del código.
Figura 5. Creación de una nueva clase Java
El código queda de la siguiente manera:

public class TitularItems {

String title; // Título del item

String description; // Descripción del item

int img; // Imagen del ítem

// Constructor por defecto de la clase

public TitularItems(){}

// Constructor con parámetros para inicializar el item

public TitularItems(String _title, String _description, int _img){

this.title = _title;

this.description = _description;

this.img = _img;

// Aqui inicia el GET y el SET para cada propiedad de la clase

public String getTitle() { return title; }

public void setTitle(String title) { this.title = title; }

public String getDescription() { return description; }

public void setDescription(String description) { this.description = description; }

public int getImg() { return img; }

public void setImg(int img) { this.img = img; }

}
Terminado esto agregamos otra clase que va actuar como el adaptador de los datos entre
la clase TitularItems y el archivo ítems.xml.

public class Adaptador extends BaseAdapter{

private Activity activity; //Activity desde el cual se hace referencia al llenado de la lista

private ArrayList<TitularItems> arrayItems; // Lista de items

// Constructor con parámetros que recibe la Acvity y los datos de los items.

public Adaptador(Activity activity, ArrayList<TitularItems> listaItems){

super();

this.activity = activity;

this.arrayItems = new ArrayList<TitularItems>(listaItems);

// Retorna el número de items de la lista

@Override

public int getCount() {

return arrayItems.size();

// Retorna el objeto TitularItems de la lista

@Override

public Object getItem(int position) {

return arrayItems.get(position);

// Retorna la posición del item en la lista

@Override

public long getItemId(int position) {

return position;

}
/*

Clase estática que contiene los elementos de la lista

*/

public static class Fila

TextView txtTitle;

TextView txtDescription;

ImageView img;

// Método que retorna la vista formateada

@Override

public View getView(int position, View convertView, ViewGroup parent) {

Fila view = new Fila();

LayoutInflater inflator = activity.getLayoutInflater();

TitularItems itm = arrayItems.get(position);

/*

Condicional para recrear la vista y no distorcionar el número de elementos

*/

if(convertView==null)

convertView = inflator.inflate(R.layout.items, parent, false);

view.txtTitle = (TextView) convertView.findViewById(R.id.txtTitle);

view.txtDescription = (TextView) convertView.findViewById(R.id.txtDescription);

view.img = (ImageView)convertView.findViewById(R.id.imgItem);

convertView.setTag(view);

else

view = (Fila)convertView.getTag();

}
 // Se asigna el dato proveniente del objeto TitularItems

view.txtTitle.setText(itm.getTitle());

view.txtDescription.setText(itm.getDescription());

view.img.setImageResource(itm.getImg());

// Retornamos la vista

return convertView;

Finalmente en la clase MainActivity ponemos el siguiente código:

// Variables de la clase

private ArrayList<TitularItems> Items;

private Adaptador Adaptador;

private ListView listaItems;

Dentro del método onCreate(…) ponemos:

// Vinculamos el objeto ListView con el objeto del archivo XML

listaItems = (ListView)findViewById(R.id.listItems);

// Llamamos al método loadItems()

loadItems();

Creamos el método loadItems()

// Método cargar Items

private void loadItems(){

Items = new ArrayList<TitularItems>(); // Creamos un objeto ArrayList de tipo TitularItems

// Agregamos elementos al ArrayList

Items.add(new TitularItems("Python", "Descripción de Python",

this.getResources().getIdentifier("ic_python", "drawable", this.getPackageName())));

Items.add(new TitularItems("Desempeño", "Descripción de Desempeño",

this.getResources().getIdentifier("ic_level", "drawable", this.getPackageName())));
Items.add(new TitularItems("Google Plus", "Descripción de Google Plus",
this.getResources().getIdentifier("ic_google_plus", "drawable", this.getPackageName())));

// Creamos un nuevo Adaptador y le pasamos el ArrayList

Adaptador = new Adaptador(this, Items);

// Desplegamos los elementos en el ListView

listaItems.setAdapter(Adaptador);

Como podemos ver en la Figura 6, las listas personalizadas nos ayudan a estilizar y a
presentar de una mejor manera la vista de los datos.

Figura 6. Despliegue de la lista personalizada