Cómo personalizar listas (ListView) en Android Studio

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

  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:

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.

  Cómo mostrar notificaciones en la barra de estado 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:

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?

16 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?

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

      • Disculpa,No tengo mucho COnocimiento Sobre esto.
        Me podiras explicar como Puedo Instanciar estos Objeots?

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

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

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

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

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

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

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

Dejar respuesta

Please enter your comment!
Please enter your name here