Lista con imágenes Android nativo (ListView)

En esté tutorial del voy ha explicar de forma sencilla como trabajar las listas (ListView) de Android y darles una personalización para adaptarlas al diseño de nuestra app, como todos sabes y si no les cuento que por defecto Android tiene estilos específicos para cada elemento que encontramos en su entorno. Por ello es un poco mas complejo realizar aplicaciones con diseños únicos.

¿Que son la ListView en Android?

ListView es un grupo de la vista que muestra una lista de elementos desplazables. Los elementos de la lista se insertan automáticamente a la lista utilizando un adaptador que tira el contenido de una fuente tal como una consulta de matriz o base de datos y convierte cada elemento resulta en una vista que se coloca en la lista.

Bueno entendiendo un poco como funcionan las listas en Android vamos haber como hacer una lista personalizada con imágenes, lo primero que vamos hacer es crear un nuevo proyecto en Android Studio recuerda que en tutoriales anteriores hemos dicho como hacerlo sin embargo si no lo recuerdas podrás ver el video.

Una vez creado el proyecto en Android vamos a ir a nuestro xml activity.main.xml, creamos el elemento de tipo ListView con el id ContenlistView

activity.main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    
<TextView android:text="Lista Con imagenes" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/layoutMain" />

    
<ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ContenlistView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />


</RelativeLayout>

Ahora vamos ha crear un nuevo xml llamado lista_formato.xml que va hacer nuestra nueva vista adaptada de nuestra lista o ListView, en esté xml vamos ha crear un elemento de tipo ImageView para colocar el icono o imagen del ítem de la lista, también creamos TextView para colocar el titulo del ítem.

lista_formato.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    
<RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="79dp"
        android:background="#ffff660d"
        android:id="@+id/layoutListaFormato">

        
<ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:id="@+id/iconLista"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:src="@mipmap/ic_launcher"
            android:layout_margin="10dp" />

        
<TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/tituloLista"
            android:layout_alignTop="@+id/iconLista"
            android:layout_toRightOf="@+id/iconLista"
            android:layout_toEndOf="@+id/iconLista"
            android:layout_marginTop="10dp" />
    
</RelativeLayout>

</LinearLayout>

en el MainActivity.java, vamos a crear dos arreglos uno para los títulos y el otro para las imágenes, hacemos el llamado de la clase adapter que posteriormente vamos a crear y en el onCreate instanciamos ContenlistView, después le enviamos a la clase del adapter los parámetros para que nos construya las lista adaptada, por ultimo se crea el evento de setOnItemClickListener que es el encargado de reconocer el click sobre el ítem.

MainActivity.java

package android.ejemplo.com.ejemplolistaconimagenes;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;


public class MainActivity extends ActionBarActivity {

    ListaAdapter adapter;

    String[] titulo = new String[]{
            "Home",
            "Fotos",
            "Contacto",
    };

    int[] imagenes = {
            R.drawable.home,
            R.drawable.fotos,
            R.drawable.contacto
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final ListView lista = (ListView) findViewById(R.id.ContenlistView);
        adapter = new ListaAdapter(this, titulo, imagenes);
        lista.setAdapter(adapter);

        lista.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView adapterView, View view, int i, long l) {
                Toast.makeText(getApplicationContext(), "click sobre " + i, Toast.LENGTH_SHORT).show();
            }
        });

        lista.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(AdapterView adapterView, View view, int i, long l) {
                Toast.makeText(getApplicationContext(), "click Largo " + i, Toast.LENGTH_SHORT).show();
                return false;
            }
        });

    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

ListaAdapter.java

package android.ejemplo.com.ejemplolistaconimagenes;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by jcmolanoro on 25/03/2015.
 */
public class ListaAdapter extends BaseAdapter {


    // Declare Variables
    Context context;
    String[] titulos;
    int[] imagenes;
    LayoutInflater inflater;

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

    @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
        TextView txtTitle;
        ImageView imgImg;

        //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.lista_formato, parent, false);

        // Locate the TextViews in listview_item.xml
        txtTitle = (TextView) itemView.findViewById(R.id.tituloLista);
        imgImg = (ImageView) itemView.findViewById(R.id.iconLista);

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

        return itemView;
    }
}

En la clase ListaAdapter.java lo que hacemos es extends BaseAdapter para optener las propiedades de un adapter, esta por defecto nos crea las funciones getCount, getItem, getItemId, getView

en la función getView hacemos inflater al xml personalizado de nuestra lista (lista_formato.xml) y he instanciamos los elementos para poder setearlos con el arreglo enviado.

URL DE DESCARGA EjemploListaConImagenes