martes, 13 de octubre de 2015

Crear un ListView con Imagenes en Android Studio

   


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

Crear un ListView con las imágenes

2. Crear un ListView con sus respectivas imágenes para cada elemento de la lista. Para eso tendremos que personalizar el adaptador.

 Crear un ListView con sus respectivas imágenes

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:

Crear un ListView con las imágenes final

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í


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:

Crear un ListView con sus respectivas imágenes final

Puedes descargar el proyecto completo desde aquí:


César GI

About César GI

Lo que me importa es poder enseñar lo poco que se, por que asi como yo aprendo leyendo gracias a las personas que comparten sus conocimiento yo tambien quiero ayudar a la comunidad en español aportando lo poco que he aprendido hasta el momento.

18 comentarios

Write comentarios
xavier
AUTHOR
25 de octubre de 2015, 16:08 delete

Muy buen aporte, te felicito, pero tengo una pregunta como seria para que cada descripcion fuera diferente te agradeceria mucho

Reply
avatar
28 de octubre de 2015, 10:01 delete

***En el Main:
***Después de:

private String lenguajeProgramacion[]=new String[]{"Java","PHP","Python","JavaScript","Ruby","C",
"Go","Perl","Pascal"};

*****Escribes tu arreglo con la descripción que quieres que tenga como por ejemplo:

private String lenguajeProgrDescripcion[]=new String[]{"Java Uno","PHP Dos","Python Tres",
"JavaScript Cuatro ","Ruby Cinco","C Seis",
"Go Siete","Perl Ocho","Pascal Nueve"};

******Tendrás que enviar una parámetro mas al LenguajeListAdapter.

LenguajeListAdapter adapter=new LenguajeListAdapter(this,lenguajeProgramacion,lenguajeProgrDescripcion, imgid);

******En la clase LenguajeListAdapter
******Tendrá que quedarte como por ejemplo el código de abajo.

private final Activity context;
private final String[] itemname;
private final String[] lenguajeProgrDescripcion;
private final Integer[] integers;

public LenguajeListAdapter(Activity context, String[] itemname, String[]lenguajeProgrDescripcion, Integer[] integers) {
super(context, R.layout.fila_lista, itemname);
// TODO Auto-generated constructor stub

this.context=context;
this.itemname=itemname;
this.lenguajeProgrDescripcion=lenguajeProgrDescripcion;
this.integers=integers;
}

public View getView(int posicion,View view, ViewGroup parent){

LayoutInflater inflater=context.getLayoutInflater();
View rowView=inflater.inflate(R.layout.fila_lista,null,true);

TextView txtTitle = (TextView) rowView.findViewById(R.id.texto_principal);
ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);
TextView etxDescripcion = (TextView) rowView.findViewById(R.id.texto_secundario);

txtTitle.setText(itemname[posicion]);
imageView.setImageResource(integers[posicion]);
etxDescripcion.setText("Description "+lenguajeProgrDescripcion[posicion]);

return rowView;
}

Reply
avatar
LordTrent
AUTHOR
29 de noviembre de 2015, 0:37 delete

Implemente tu código amigo, desde una consulta de SQLite en ves de tener vectores y después de buscar tantos ejemplos en Internet el tuyo me funciono, solo un problema, la consulta me regresa solo un registro, pero al mostrarlo en el ListView se muestre ese mismo registro 3 veces, llevo 1 hora analizando tu código y el mio y no encuentro solución.. ¿ alguna idea de porque pase esto ?

Reply
avatar
30 de noviembre de 2015, 6:10 delete

Hola amigo, Se me hace complicado poder ayudarte si no puedo observar tu código, pero de todas maneras en estos días creare un articulo aplicando esto a una base de datos. Para ver si te puede servir.

Reply
avatar
20 de mayo de 2016, 10:44 delete

Hola amigo, estoy probando tu código en referencia a la lista con varias imagenes, pero no me funciona, aparentemente está bién, pero no logro entender en que momento llamas al metodo getView de la clase LenguajeListAdapter

Reply
avatar
1 de junio de 2016, 6:13 delete

Quizas esto te ayude a entender http://www.codigojavalibre.com/2015/11/ciclo-de-vida-de-una-actividad-en-android-que-es-una-activity.html aquí explico el ciclo de vida de una actividad.... Y si no me equivoco todos los métodos sobrescritos al extender el ArrayAdapter se van ejecutando según sus tiempo así como pasa con las actividades.

Reply
avatar
1 de junio de 2016, 22:38 delete

Muchas gracias por tu aporte amigo (Y) , una pregunta fuera de este tema, es posible recuperar datos de sqlite y colocarlos en un TableLayout? Gracias de antemano!

Reply
avatar
Unknown
AUTHOR
21 de julio de 2016, 12:22 delete

Rápido y sencillo, sin liar la cosa como en otros sitios, enhorabuena.

Reply
avatar
ISNEYLER AW
AUTHOR
15 de agosto de 2016, 19:31 delete

Buen aporte pero como podria hacer si las imagenes del list view y el texto del list view fueran de una pagina internet llevó horas buscando y no encuentro nada :c

Reply
avatar
jabith0303
AUTHOR
6 de octubre de 2016, 16:07 delete

Excelente. Me demore dias buscando en internet hasta que por fin encontre este tutorial facil y sencillo que me ayudo muchisimo. Felicitaciones

Reply
avatar
6 de octubre de 2016, 17:33 delete

consulta llevo rato buscando como cargar desde una imagen en memoria, o con piccasso. muy bueno el tutorial,, pero no encuentro codigo para hacerlo.

Reply
avatar
20 de noviembre de 2016, 20:57 delete

Muchas gracias me sirvió muchoo :D

Reply
avatar
fabioj
AUTHOR
7 de diciembre de 2016, 4:32 delete

Muy bueno. Simple. Y funciona!

Reply
avatar
fabioj
AUTHOR
9 de diciembre de 2016, 10:13 delete

10 puntos, funcionando...

Reply
avatar
16 de febrero de 2017, 5:51 delete

como harias para enviar la misma imagen (imageview) desde un fragment a un activity usando el listview

Reply
avatar
Juan Manuel
AUTHOR
19 de septiembre de 2017, 0:49 delete

Hola, yo lo estoy queriendo agregar en un fragment, entonces no se como cambiar el "Activity" que pones en la clase de ayuda a algo que tenga que ver con fragment.

Reply
avatar
18 de febrero de 2018, 8:44 delete

Hola, quiero lo mismo, me da un error con el constructor en el "main"

Reply
avatar
luis ccc
AUTHOR
15 de marzo de 2018, 16:17 delete

Habrá manera de implementarlo con volley para traer las imágenes y el arreglo desde un web service?

Reply
avatar