¿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í:
18 comentarios
Write comentariosMuy buen aporte, te felicito, pero tengo una pregunta como seria para que cada descripcion fuera diferente te agradeceria mucho
Reply***En el Main:
Reply***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;
}
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 ?
ReplyHola 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.
ReplyHola 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
ReplyQuizas 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.
ReplyMuchas 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!
ReplyRápido y sencillo, sin liar la cosa como en otros sitios, enhorabuena.
ReplyBuen 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
ReplyExcelente. Me demore dias buscando en internet hasta que por fin encontre este tutorial facil y sencillo que me ayudo muchisimo. Felicitaciones
Replyconsulta llevo rato buscando como cargar desde una imagen en memoria, o con piccasso. muy bueno el tutorial,, pero no encuentro codigo para hacerlo.
ReplyMuchas gracias me sirvió muchoo :D
ReplyMuy bueno. Simple. Y funciona!
Reply10 puntos, funcionando...
Replycomo harias para enviar la misma imagen (imageview) desde un fragment a un activity usando el listview
ReplyHola, 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.
ReplyHola, quiero lo mismo, me da un error con el constructor en el "main"
ReplyHabrá manera de implementarlo con volley para traer las imágenes y el arreglo desde un web service?
Reply