Cómo personalizar listas (ListView) en Android Studio

4
2062
tutoriales android studio

¿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

resultado-final-adapter-personalizado

 

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.

ejemplo-adapter-personalizado

Este el el código XML de nuestro “item_category.xml”:

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”.

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:

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

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.

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:

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

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:

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

4 Comentarios

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

    ¿que es item_category?

  2. una pregunta, la instruccion

    ArrayList category = new ArrayList();

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

  3. una pregunta, la instruccion

    ArrayList category = new ArrayList();

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

Dejar respuesta

Adivina adivinanza *