Tutoriales

Cómo personalizar listas (ListView) en Android Studio

Por

01/10/2015

14914

¿Quieres personalizar listas o listView en Android Studio? Si estás iniciándote en la programación para los dispositivos del androide verde puede que te estés preguntando cómo crear un adapter personalizado en Android Studio, una bonita forma de crear listas más personalizadas y con un estilo propio, alejándonos de las clásicas listas de Android Studio. Además, esto nos permitirá añadir imágenes o botones entre muchas otras cosas a las listas.

Después de contaros cómo lanzar un segundo activity, crear un adapter personalizado en Android Studio será coser y cantar y nos permitirá dar a nuestra app una nueva forma de mostrar la información contenida en nuestros almacenes de datos, así que vamos a ver cómo crearlos.

Crear lista/adapter personalizado en Android Studio

Para crear un adapter personalizado, y muy básico, en Android vamos a ver un sencillo ejemplo con una lista en la que mostraremos un ImageView y dos TextView.

Primero te aconsejamos crear un nuevo proyecto para no tener problemas con otras clases y después lo puedes portar a dónde tú quieras. Para que te hagas una idea, el resultado final sería algo como esto, un ejemplo de lista personalizada en Android Studio.

Lista (listView) personalizada en Android Studio

Para hacer esto primero crearemos un nuevo fichero en la carpeta Res > Layout, haciendo clic derecho sobre ella y seleccionando la opción de New > Layout resource file. Nosotros vamos a llamarle «item_category» para tener una forma cómoda de contaros el proceso.

Una vez creado, en el visor de Android Studio añadiremos dos TextView y un ImageView siguiendo un patrón similar a la imagen siguiente, aunque podemos crear tantos campos como nosotros deseemos.

Este el el código XML de nuestro «item_category.xml»:

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/background_light">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Texto Frase"
        android:id="@+id/texto"
        android:layout_below="@+id/category"
        android:layout_toRightOf="@+id/imageView4"
        android:layout_toEndOf="@+id/imageView4" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Titulo Frase"
        android:id="@+id/category"
        android:textSize="21sp"
        android:textColor="#f65034"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/imageView4"
        android:layout_toEndOf="@+id/imageView4" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="4dp"
        android:layout_marginBottom="2dp"
        android:layout_marginTop="2dp"
        android:id="@+id/imageView4"
        android:cropToPadding="false"
        android:src="@drawable/iniciocomillas"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_alignBottom="@+id/texto"
        android:maxHeight="35dp"
        android:maxWidth="74dp"
        android:adjustViewBounds="true" />

</RelativeLayout>

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

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

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/background_light">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Texto Frase"

android:id="@+id/texto"

android:layout_below="@+id/category"

android:layout_toRightOf="@+id/imageView4"

android:layout_toEndOf="@+id/imageView4" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textAppearance="?android:attr/textAppearanceLarge"

android:text="Titulo Frase"

android:id="@+id/category"

android:textSize="21sp"

android:textColor="#f65034"

android:layout_alignParentTop="true"

android:layout_toRightOf="@+id/imageView4"

android:layout_toEndOf="@+id/imageView4" />

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="8dp"

android:layout_marginRight="4dp"

android:layout_marginBottom="2dp"

android:layout_marginTop="2dp"

android:id="@+id/imageView4"

android:cropToPadding="false"

android:src="@drawable/iniciocomillas"

android:layout_alignParentTop="true"

android:layout_alignParentStart="true"

android:layout_alignBottom="@+id/texto"

android:maxHeight="35dp"

android:maxWidth="74dp"

android:adjustViewBounds="true" />

</RelativeLayout>

Como puedes ver, nosotros tenemos en el ImageView el atributo «android:src» que indica que la imagen se encuentra en la carpeta drawable con el nombre «iniciocomillas».

Cómo darle función a un botón en Android Studio

Una vez hecho esto, vamos a crear un ListView en nuestro «activity_main.xml» y que será precisamente el que vayamos a personalizar a partir de ahora.

Después de haber creado el ListView en la actividad principal, vamos a crear una nueva clase llamada «Category», que representará cada uno de los items de la lista, en nuestra carpeta Java con el siguiente código fuente:

package aa.designers.adapter.ejemplo;

import android.graphics.drawable.Drawable;


public class Category {

    private String title;
    private String categoryId;
    private String description;
    private Drawable imagen;

    public Category() {
        super();
    }

    public Category(String categoryId, String title, String description, Drawable imagen) {
        super();
        this.tittle = title;
        this.description = description;
        this.imagen = imagen;
        this.categoryId = categoryId;
    }


    public String getTitle() {
        return title;
    }

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

    public String getDescription() {
        return description;
    }

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

    public Drawable getImage() {
        return imagen;
    }

    public void setImagen(Drawable imagen) {
        this.imagen = imagen;
    }

    public String getCategoryId(){return categoryId;}

    public void setCategoryId(String categoryId){this.categoryId = categoryId;}

}

package aa.designers.adapter.ejemplo;

import android.graphics.drawable.Drawable;

public class Category {

private String title;

private String categoryId;

private String description;

private Drawable imagen;

public Category() {

super();

}

public Category(String categoryId, String title, String description, Drawable imagen) {

super();

this.tittle = title;

this.description = description;

this.imagen = imagen;

this.categoryId = categoryId;

}

public String getTitle() {

return title;

}

public void setTittle(String title) {

this.title = title;

}

public String getDescription() {

return description;

}

public void setDescription(String description) {

this.description = description;

}

public Drawable getImage() {

return imagen;

}

public void setImagen(Drawable imagen) {

this.imagen = imagen;

}

public String getCategoryId(){return categoryId;}

public void setCategoryId(String categoryId){this.categoryId = categoryId;}

}

Y después otro fichero Java con el nombre «AdapterCategory» con el siguiente código:

package aa.designers.adapter.ejemplo;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;


public class AdapterItem extends BaseAdapter {

    protected Activity activity;
    protected ArrayList<Category> items;

    public AdapterItem (Activity activity, ArrayList<Category> items) {
        this.activity = activity;
        this.items = items;
    }

    @Override
    public int getCount() {
        return items.size();
    }

    public void clear() {
        items.clear();
    }

    public void addAll(ArrayList<Category> category) {
        for (int i = 0; i < category.size(); i++) {
            items.add(category.get(i));
        }
    }

    @Override
    public Object getItem(int arg0) {
        return items.get(arg0);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

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

        View v = convertView;

        if (convertView == null) {
            LayoutInflater inf = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            v = inf.inflate(R.layout.item_category, null);
        }

        Category dir = items.get(position);

        TextView title = (TextView) v.findViewById(R.id.category);
        title.setText(dir.getTittle());

        TextView description = (TextView) v.findViewById(R.id.texto);
        description.setText(dir.getDescription());

        ImageView imagen = (ImageView) v.findViewById(R.id.imageView);
        imagen.setImageDrawable(dir.getImage());

        return v;
    }
}

package aa.designers.adapter.ejemplo;

import android.app.Activity;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

import java.util.ArrayList;

public class AdapterItem extends BaseAdapter {

protected Activity activity;

protected ArrayList<Category> items;

public AdapterItem (Activity activity, ArrayList<Category> items) {

this.activity = activity;

this.items = items;

}

@Override

public int getCount() {

return items.size();

}

public void clear() {

items.clear();

}

public void addAll(ArrayList<Category> category) {

for (int i = ; i < category.size(); i++) {

items.add(category.get(i));

}

@Override

public Object getItem(int arg0) {

return items.get(arg0);

}

@Override

public long getItemId(int position) {

return position;

}

@Override

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

View v = convertView;

if (convertView == null) {

LayoutInflater inf = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

v = inf.inflate(R.layout.item_category, null);

}

Category dir = items.get(position);

TextView title = (TextView) v.findViewById(R.id.category);

title.setText(dir.getTittle());

TextView description = (TextView) v.findViewById(R.id.texto);

description.setText(dir.getDescription());

ImageView imagen = (ImageView) v.findViewById(R.id.imageView);

imagen.setImageDrawable(dir.getImage());

return v;

}

Como podemos ver, la clase Category representa cada uno de los elementos de nuestra lista y la clase AdapterCategory será la encargada de visualizar los elementos a nuestro gusto en la lista. Este adapter personalizado extiende la clase BaseAdapter, uno de las adaptadores más básicos pero muy personalizables.

Cómo personalizar EditText en Android Studio

En esta clase podemos encontrar varios puntos importantes:

Los métodos getItem y getItemId son necesarios para obtener cada uno de los items de la lista y utilizarlos más adelante para interactuar con ellos.
El método getCount nos proporciona el número de elementos de los que consta nuestro ArrayList
El método clear limpia el array de datos.
El método getView es el más importante, y será el encargado de «inflar» o personalizar nuestra lista.

¿Y ahora cómo muestro los elementos de mi ArrayList?

Ahora es el turno de mostrar todos los elementos de nuestro ArrayList en nuestro adapter personalizado. Podemos hacerlo de la siguiente manera:

Dentro de nuestro código fuente tenemos un ArrayList con la siguiente estructura:

ArrayList<Category> category = new ArrayList<Category>();

1	ArrayList<Category> category = new ArrayList<Category>();

Para mostrar todos sus elementos en el ListView de nuestro «activity_main.xml» tenemos que crear el adaptador:

ListView lv = (ListView) findViewById(R.id.listView);
        
AdapterCategory adapter = new AdapterCategory(this, category);

lv.setAdapter(adapter);

ListView lv = (ListView) findViewById(R.id.listView);

AdapterCategory adapter = new AdapterCategory(this, category);

lv.setAdapter(adapter);

NOTA: Una buena opción es poner este código en el método OnCreate.

Si queremos interactuar con los elementos de nuestro ListView una interesante manera es la siguiente:

lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                final int pos = position;
                //CODIGO AQUI

            }
        });

lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

final int pos = position;

//CODIGO AQUI

}

});

¿Qué te parece este adapter personalizado en Android Studio? ¿Te ha servido este artículo para crear tu lista personalizada en Android Studio?

19 Comentarios

Marco Aurelio 04/08/2016 At 23:51

Dentro del AdapterCategory.java en la instrucción
v = inf.inflate(R.layout.item_category, null);

¿que es item_category?

Responder
- Andrea Ardións 14/08/2016 At 00:43
  
  Vuelve a revisar el código, ponía item_adapter por error ! Es item_category.xml (o el nombre que le hayas dado claro). Un saludo
  
  Responder
Oscar 29/11/2016 At 17:27

una pregunta, la instruccion

ArrayList category = new ArrayList();

¿En donde quedaria, en el adaptador en el activity main?

Responder
Oscar 29/11/2016 At 17:33

una pregunta, la instruccion

ArrayList category = new ArrayList();

¿En donde quedaria, en el adaptador o en el activity main?

Responder
CMTR 11/12/2016 At 03:15

Hola, la app se ejecuta sin problemas, sin embargo con la lista vacía, donde o cómo la lleno?

Responder
- Will 31/01/2017 At 20:40
  
  buenas estaba en las misma pero ya revisando todo encontré la solución. debes intanciar un objeto de la clase Category donde envias los valores a travez del constructor, luego debes agregar el objeto de la instancia al ArrayList categor, de éste modo se te mostrarán los datos.
  
  Responder
  - Sebastian Escarrega 11/03/2017 At 08:32
    
    Disculpa,No tengo mucho COnocimiento Sobre esto.
    Me podiras explicar como Puedo Instanciar estos Objeots?
    
    Responder
cmtr 31/03/2017 At 19:29

Para llamar getItem(pos) del adaptador desde onItemClick() cómo haría? me da error de que no puedo llamar un método no estático desde un contexto estático.

Responder
Ivan 08/09/2017 At 17:06

Buen día, estaba siguiendo los pasos de este tutorial pero no púde hacerlo funcionar me genera varios errores. perdí el tiempo en este tutorial y en vez de aclararme el tema me dejó mas confundido, por favor no consideren que algúnos pasos son obvios para todos los que entramos a esta página de tutoriales, les recomiendo no saltarse nada para que quede claro.

Responder
jefferson 26/09/2017 At 23:21

el codigo como tal tiene detalles, pero si tienes alguna idea de lo que esta haciendo y no solo «copiar y pegar» te sirve para personalizar, lo unico es que al final no deja explicito como se llena la lista.

Responder
usuario insatisfecho 22/10/2017 At 22:37

no funciona, nomas tira errores .-.

Responder
Luis Espejo 12/11/2017 At 23:56

El código tiene varios errores «de dedo» como «title» en una clase y «tittle» en otra.

Para llenar la lista probar con esto:

Drawable res = getResources().getDrawable(R.drawable.ic_green);
items.add(new Category(«1», «Servicio 1», «Prioridad Alta», res));

Donde ic_green es un archivo png que se encuentra en res -> drawable (pueden reemplazarlo por cualquier otra imagen)
items es un ArrayList de elementos «Category»

Salu2

Responder
Svaldo Britez 30/01/2018 At 02:02

list_marca=(ListView) findViewById(R.id.lista_marca); //Inicializamos el ListView
Drawable respi = getResources().getDrawable(R.drawable.marcado); //Instanciamos una imagen ubicada en drawable
Category cat=new Category(«1″,»Frases»,»Amor»,respi); //colocamos los valores en el constructor de category
ArrayList category = new ArrayList(); //instanciamos el arrayList que va a ir el el AdapterCategory
category.add(cat); //Agregamos la variable cat instanciada mas arriba al arrayList
AdapterCategory adapter = new AdapterCategory(this, category);
list_marca.setAdapter(adapter);
Espero y les sirva

Responder
Gil 18/02/2018 At 00:41

solo me falta que muestre los datos………………………

Responder
arturo 02/09/2018 At 06:36

No supe donde poner

ListView lv = (ListView) findViewById(R.id.listView);

AdapterCategory adapter = new AdapterCategory(this, category);

lv.setAdapter(adapter);

para que se vea la lista. y para dar clic y me envie a una activity como le hago? Todo esta bien solo me falta que se vea.

Responder
Carlos 12/10/2018 At 13:50

Excelente Adrian. Tengo otra consulta, ¿cómo puedo ahora, en el método onItemClick, obtener los valores de los items que contienen cada fila?.
Desde ya muchas gracias

Responder
Danilo 10/12/2018 At 21:49

Hola, Si deseo poner un checkbox en cada item de la lista, como puedo detectar si esta seleccionado o no… y pasar el HashMap de ese arrayList a otro Array, Gracias.

Responder
Santiago 31/12/2018 At 00:34

Espero que esto me funcione

Responder
Vicente 30/06/2019 At 06:02

Hola , En el AdapterCategory esta el AdapterItem, ¿Es un error ortografico o debo crear una clase llamada » AdapterItem»?,
el «ArrayList category = new ArrayList();» ¿En que clase y en que parte debo ponerlo?

Responder

Cómo personalizar listas (ListView) en Android Studio

Crear lista/adapter personalizado en Android Studio

¿Y ahora cómo muestro los elementos de mi ArrayList?

19 Comentarios

Dejar respuesta Cancelar respuesta

Ya puedes desenmascarar a los falsos influencers de Instagram con GamGage