ListView con filas personalizadas

En este tutorial voy a enseñar como hacer un listView personalizado como podrán haber visto en Proyecto turismo (ver). Ahí también pueden encontrar el código, pero acá solo explicaré este detalle, que es menor.
Recordemos que todo entra por lo ojos, y que tenga un buen aspecto nuestra app es fundamental.

Recomiedo ver -> Animación entre activitiesMultilenguajeActionBar ir atrás (que son los que nombre en el videotutorial)




La idea es pasar de ListView como estos ->


A ListView personalizados como estos ->


Realmente hay mucha diferencia, parece un boton 3D.
Vuelvo a repetir, todo entra por los ojos.
Empezemos...

Para ello necesitamos agregar en la carpeta "drawable"

post_border_style.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"><shape>
        <solid android:color="#cccccc" />
    </shape></item>
    <item><shape>
        <gradient android:angle="270" android:endColor="#ccc" android:startColor="#fff" />
        <corners android:radius="2dp" />
    </shape></item>

</selector>

post_border_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"><shape>
        <solid android:color="#cccccc" />
    </shape></item>
    <item><shape>
        <gradient android:angle="90" android:endColor="#f5f5f5" android:startColor="#fff" />
    </shape></item>

</selector>

Una vez ya agregado lo anterior pasamos a la carpeta "layout" agregamos el siguiente xml

list_row.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#f0f0f0"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/post_border_style"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/box_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:background="@drawable/post_background_style"
            android:orientation="horizontal" >

            <LinearLayout
                android:id="@+id/single_post_circuito_linearbox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:orientation="horizontal"
                android:padding="5dp" >

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="0.3">

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="80dp"
                        android:id="@+id/imagen_single_post_circuito"
                        android:src="@drawable/circuitochico_plaza"
                        android:scaleType="centerCrop" />
                </LinearLayout>

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.7">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textAppearance="?android:attr/textAppearanceLarge"
                        android:text="Plaza 25 de Mayo"
                        android:id="@+id/tv_titulo_single_post_circuito"
                        android:layout_marginLeft="5dp"
                        android:textColor="#ff000000" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textAppearance="?android:attr/textAppearanceSmall"
                        android:text="Es la plaza principal de la ciudad de San Juan y es donde se encuentra el kilómetro 0 de la provincia."
                        android:id="@+id/tv_contenido_single_post_circuito"
                        android:layout_marginLeft="5dp"
                        android:textColor="#ff868686" />

                </LinearLayout>

            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Ya terminamos con los archivos xml
Pasamos a la carpeta de java, utilizaremos el ListViewAdapter aprendido en ListView con Imagenes (ver)


ListViewAdapter
public class ListViewAdapter extends BaseAdapter {
        // Declare Variables
        Context context;
        int[] imagenes;
        String[] titulos;
        String[] contenido;
        LayoutInflater inflater;

        public ListViewAdapter(Context context, int[] imagenes, String[] titulos, String[] contenido ) {
            this.context = context;
            this.imagenes = imagenes;
            this.titulos = titulos;
            this.contenido = contenido;
        }

        @Override
        public int getCount() {
            return titulos.length;
        }

        @Override
        public Object getItem(int position) {
            return null;
        }

        @Override
        public long getItemId(int position) {
            return 0;
        }

        public View getView(int position, View convertView, ViewGroup parent) {

            // Declare Variables
            ImageView imgImg;
            TextView txtTitle;
            TextView txtContenido;

            //http://developer.android.com/intl/es/reference/android/view/LayoutInflater.html
            inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View itemView = inflater.inflate(R.layout.single_post_circuito, parent, false);

            // Locate the TextViews in listview_item.xml
            imgImg = (ImageView) itemView.findViewById(R.id.imagen_single_post_circuito);
            txtTitle = (TextView) itemView.findViewById(R.id.tv_titulo_single_post_circuito);
            txtContenido = (TextView) itemView.findViewById(R.id.tv_contenido_single_post_circuito);

            // Capture position and set to the TextViews
            imgImg.setImageResource(imagenes[position]);
            txtTitle.setText(titulos[position]);
            txtContenido.setText(contenido[position]);

            return itemView;
        }
    } 


31 comentarios:

  1. Hola ramiro, eso que tu hiciste con el listview, quiero hacerlo, pero todos los datos sacados desde una base de datos externa, donde tenga el campo titulo, subtitulo y la url de donde este almacenada la imagen a mostrar en el imageview, podrias aclararme un poco el panorama de como hacerlo? Gracias!

    ResponderEliminar
  2. yo lo mismo Ramiro, no se encuentra nada por ahí....Felicidades por tu blog es de gran ayuda y muy didactico

    ResponderEliminar
  3. Saludos, te felicito por tu blog y y tambien me apunto en lo de obtener los datos de una base de datos externa, gracias

    ResponderEliminar
  4. Hola ramiro, eso que tu hiciste con el listview, se puede hacer con un buscardor y me muetre el imtem gracias

    ResponderEliminar
    Respuestas
    1. a lo mejor esto puede ser de ayuda http://cursoandroidstudio.blogspot.com.ar/2014/08/crear-vista-busqueda.html despues solo tenes que re-crear el listview

      Eliminar
  5. Hola Ramiro, muy buenos tus tutoriales.
    Gracias

    ResponderEliminar
  6. Hola ramiro, eso que tu hiciste con el listview, quiero hacerlo, pero todos los datos sacados desde una base de datos externa, donde tenga el campo titulo, subtitulo y la url de donde este almacenada la imagen a mostrar en el imageview, podrias aclararme un poco el panorama de como hacerlo? Gracias!

    ResponderEliminar
  7. Saludos.-

    Como podría crear una carpeta en el directorio o en la tarjeta SD, Como lo hacer "ES File Manager File Explorer .apk".

    Si tienes la solución por favor respondeme.

    Gracias.

    Saludos.

    ResponderEliminar
    Respuestas
    1. a lo mejor esto te sirve http://cursoandroidstudio.blogspot.com.ar/2014/07/listview-ringtones.html en ese tutorial guardo los rigntones en la memoria del celular. Yo creo que esto te puede dar una idea. Saludos.

      Eliminar
  8. Hola Ramiro, yo quiero hacer que un listview tenga un color diferente por item, y que al llenar las clases cambien de color los item

    ResponderEliminar
    Respuestas
    1. bien, entonces en la metodo
      public View getView( ... ) donde generas los items de la lista
      necesitas ponerle un if(condicion){ pinte de un color} else {pinte de otro color}

      Eliminar
  9. Hola ramiro,me gustan mucho tu blog,lo estoy realizando todo,pero algunos ejemplos no me funcionan, este es uno de ellos, lo he realizado varias veces,y siempre salen errores,me aparece un error el cual no encuentra R,la verdad no se q es,pero quiero hacer algo Listviw con filas personalizadas

    ResponderEliminar
    Respuestas
    1. proba con esto http://cursoandroidstudio.blogspot.com.ar/2015/06/androidr-error.html

      Eliminar
  10. Hola Ramiro tengo una consulta ¿Como puedo poner este listView personalizado dentro de un actionBar Tabs? no soy muy bueno programando en android por estoy aprendiendo. Nose si me puedas ayudar porfa.

    ResponderEliminar
  11. Que bien! hace un tiempo te pregunte como podía hacer eso y al final as echo un tutorial, es estupendo! te he mandado una donación en agradecimiento a tus aportes.

    ResponderEliminar
    Respuestas
    1. donación recibida, muchas gracias. Hay un proyecto turismo http://cursoandroidstudio.blogspot.com.ar/2015/05/proyecto-turismo.html donde esta implementado.

      Eliminar
  12. que tal como hago un evento click sobre este listview personalizado?

    ResponderEliminar
    Respuestas
    1. Hola que tal, solo utiliza el setOnItemClickListener y problema resuelto

      Eliminar
  13. Hola, como puedo utilizar un Button dentro para eliminar un elemento de un listview y utilizar el Click para acceder a otra activity.

    ResponderEliminar
  14. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  15. Hola solo una??? la verda me costo un pcoo de trabajo captar el video, solo me quede en el activity main,

    ResponderEliminar
  16. Hola Ramiro que tal, me podrías ayudar con el link de descarga del proyecto? Porfavor

    ResponderEliminar
  17. Hola Ramiro Primeramente te felicito por tus aportaciones, He utilizado tu cudigo de ListView para una APP personal que estoy realizando. Lo adapte un poco a mis necesidades y una de ellas es Obtener la Imagen a mostrar desde la BD, tambien utilizo Msql en Hostinger.
    En un campo de la BD tengo la URL de la imagen, lo que necesito es descargar la imagen a mi ListView con esa URL.
    Te agradeceria si me apoyas con información de como hacerlo.


    Un saludos desde la CD. de México.

    ResponderEliminar
  18. porque me deja de funcionar esta funcionando cuando deja de funcionar

    ResponderEliminar
  19. Hola ramiro quisiera hacer una app que tenga el mismo diseño que la de excel para ingresar 2 datos y entregar varios con filas y columnas además entrar en la misma datos tengo una foto pero no se como ponerla mi correo es juanespinozagutierrez@gmail.com si pudieran ayudarme se lo agradecería muchísimo gracias

    ResponderEliminar
  20. Cordial saludo,

    Excelente labor la que realizas con tus vídeos, son de muchísima ayuda para los que empezamos en Android.

    Un abrazo desde Colombia.

    ResponderEliminar
  21. Buenas tardes Ramiro, excelente ejemplo.
    Pregunta, como puedo agregar un botón en el listview, de forma tal que solo se puede mostrar en algunas registros en base a una condicion?
    Gracias por tu apoyo.

    ResponderEliminar
  22. Thank you for sharing such a nice and interesting blog with us. I have seen that all will say the same thing repeatedly. But in your blog, I had a chance to get some useful and unique information. I would like to suggest your blog in my friends circle.
    Mobile App Development Company
    Android app Development Company
    ios app development Company
    Mobile App Development Companies

    ResponderEliminar

  23. You have provided an nice article, Thank you very much for this one. And i hope this will be useful for many people.. and i am waiting for your next post keep on updating these kinds of knowledgeable things...

    Android App Development Company

    ResponderEliminar