¿Como crear una lista con imágenes en android studio?
El ListView estándar sólo muestra una lista de elementos. si bien puede ser suficiente cuando sólo hay que mostrar una lista de texto, no es suficiente para las aplicaciones con diseños mas elegantes. en este articulo, verá cómo va a ser capaz de personalizar el ListView de modo que usted será capaz de mostrar imágenes en las filas de su lista.
Así que para este tutorial daremos dos ejemplos de ListView con Imagenes:
1. Crear un ListView con las imágenes pegadas al costado del texto, Es muy sencillo, pero la desventaja sera que solo podrás tener una imagen para todos los elementos de nuestra lista.
2. Crear un ListView con sus respectivas imágenes para cada elemento de la lista. Para eso tendremos que personalizar el adaptador.
1. Crear un ListView con las imágenes pegadas al costado del texto
1. La primera cosa que usted aprenderá en este ejemplo es cómo mostrar una imagen junto a cada elemento en el ListView. Para ello, cree un archivo XML en su carpeta res / layout con el nombre, por ejemplo de fila_lista.xml.
2. Después de verlo creado, abran el archivo res / layout / fila_lista.xml y pongan el código XML en el archivo.
Este código se mostrara para cada fila del ListView y contendrá un ImageView y un TextView.
Nota: El ic_launcher es la imagen que va a parecer en todos los elementos de la lista. Puedes usar cualquier imagen, logo, o ico a tu busto pero tiene que estar dentro de la carpeta res/drawable.
3. Para mostrar un ListView en su actividad, es necesario agregar el elemento <ListView> en la interfaz de usuario "Layout", como por ejemplo en el archivo activity_main.xml:
res / layout / activity_main.xml.
4. Abra el archivo "MainActivity.java" y añada el siguiente código JAVA.
Tenga en cuenta que en lugar de utilizar uno de los tipos de diseño (Layout) por defecto, usted está utilizando su propio diseño auto-definido:
2. Crear un ListView con sus respectivas imágenes para cada elemento creando su adaptador personalizado.
Para una mejor comprensión Crear nuevo proyecto y seguir los siguientes pasos:
1. Cree un archivo XML en su res / layout, por ejemplo puede ser con el nombre fila_lista.xml.
2. Ahora Abierto el layout res / layout / fila_lista.xml escribimos o copiamos y pegamos el siguiente código.
Este Layout contiene un ImageView y dos TextViews.
3. Creamos <ListView> en el layout de activity_main.xml para poderlo mostrarlo y trabajarlo con el ListView en la actividad.
4. Agregar las 9 imágenes de los logos del lenguaje de programación. Puedes encontrarlos al descargar el proyecto final en la capeta app\src\main\res\drawable.
Descargar imágenes aquí
Descargar imágenes aquí
5. Para rellenar cada fila usando este nuevo layout creado, es necesario crear un nuevo adaptador personalizado. Para ello, agregue una nueva clase Java para el proyecto con el nombre LenguajeListAdapter.java.
6. Abrir "El archivo LenguajeListAdapter.java" y añadir siguiente código JAVA:
La clase LenguajeListAdapter extiende la clase base ArrayAdapter.
7. Para mostrar el ListView con el nuevo Layout, añadir el siguiente código en el archivo MainActivity.java :
Y listo al ejecutarlo debe quedar como la imagen de abajo:
Puedes descargar el proyecto completo desde aquí:
