Ejemplo de ListView con Imágenes

En este Ejemplo Realizaremos una Actividad que Muestra un listado de productos Almacenados en una Base de Datos.

Paso 1: Crearemos un nuevo Proyecto Android el cual yo Llame EjemploListView en el cual crearemos una actividad del tipo EmptyActivity que llamaremos MainActivity

Paso 2:  En nuestra ventana xml activity_main.xml agregaremos un componente ListView el cual llamaremos Lista. quedando el código de la siguiente manera:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.profeluismitre.ejemplolistview.MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/lista">        
    </ListView>

</LinearLayout>

Paso 3: crearemos un archivo xml que sera el cual insertaremos a la lista con la imagen e información de cada producto el archivo lo llamaremos elementos_lista.xml, para crearlo daremos Clic derecho sobre la carpeta layout NEW>XML>LAYOUT XML el codigo quedario de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:gravity="center"
    android:layout_height="match_parent">
        <ImageView
            android:id="@+id/imgMenu"
            android:layout_width="100dp"
            android:layout_height="100dp"/>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:orientation="vertical">
                <TextView
                    android:id="@+id/txtCodigoLista"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:text="Codigo:"
                    android:layout_gravity="center"
                    android:textColor="@android:color/black"
                    android:textSize="25dp" />
                <TextView
                    android:id="@+id/txtDescripcionLista"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:text="Descripcion:"
                    android:layout_gravity="center"
                    android:textColor="@android:color/black"
                    android:textSize="25dp" />
                <TextView
                    android:id="@+id/txtPrecioLista"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:text="Precio:"
                    android:layout_gravity="center"
                    android:textColor="@android:color/black"
                    android:textSize="25dp" />
                <TextView
                    android:id="@+id/txtCantidadLista"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:text="Cantidad:"
                    android:layout_gravity="center"
                    android:textColor="@android:color/black"
                    android:textSize="25dp" />
        </LinearLayout>
</LinearLayout>

Paso 4: Ahora creamos nuestra clase de MiBaseDatos que sera la encargada de crear la base de datos y por consiguiente almacenar la información.

public class MiBaseDatos extends SQLiteOpenHelper{
    private static final String TABLA_PRODUCTO =
            "CREATE TABLE productos (codigo TEXT PRIMARY KEY, descripcion TEXT, precio TEXT, cantidad TEXT, imagen INTEGER)";
    private static final String SQL_DELETE_PRODUCTOS =
            "DROP TABLE IF EXISTS productos";
    public static final String NOMBRE_BD = "EjemploListView.sqlite";
    public MiBaseDatos(Context contexto){
        super(contexto, NOMBRE_BD, null, 1);

    }

    @Override
    public void onCreate(SQLiteDatabase db) {
        db.execSQL(TABLA_PRODUCTO);
    }

    @Override
    public void onUpgrade(SQLiteDatabase db, int i, int i1) {
        db.execSQL(SQL_DELETE_PRODUCTOS);
        onCreate(db);
    }
}

Paso 5: Crearemos nuestra clase que almacenara la informacion del producto para poder armar el listado la cual llamaremos Productos:

public class Productos {
    private String codigo;
    private String descripcion;
    private String precio;
    private String cantidad;
    private int imagen;
    
    public Productos(){}
    
    public Productos(String codigo, String descripcion, String precio, String cantidad, int imagen) {
        this.codigo = codigo;
        this.descripcion = descripcion;
        this.precio = precio;
        this.cantidad = cantidad;
        this.imagen = imagen;
    }

    public String getCodigo() {
        return codigo;
    }

    public void setCodigo(String codigo) {
        this.codigo = codigo;
    }

    public String getDescripcion() {
        return descripcion;
    }

    public void setDescripcion(String descripcion) {
        this.descripcion = descripcion;
    }

    public String getPrecio() {
        return precio;
    }

    public void setPrecio(String precio) {
        this.precio = precio;
    }

    public String getCantidad() {
        return cantidad;
    }

    public void setCantidad(String cantidad) {
        this.cantidad = cantidad;
    }

    public int getImagen() {
        return imagen;
    }

    public void setImagen(int imagen) {
        this.imagen = imagen;
    }
}

Paso 6:  Creamos la Clase que llamaremos ProductosAdapter la cual sera la encargada de recibir el producto y armar la ventana para mostrar en la lista:

public class ProductosAdapter extends ArrayAdapter<Productos> {
    public ProductosAdapter(Context context) {
        super(context, R.layout.elementos_lista, R.id.txtCodigoLista);

    }

    public View getView(int position, View convertView, ViewGroup parent) {
        View view = super.getView(position, convertView, parent);
        TextView txtCodigo = (TextView) view.findViewById(R.id.txtCodigoLista);
        TextView txtDescripcion = (TextView) view.findViewById(R.id.txtDescripcionLista);
        TextView txtPrecio = (TextView) view.findViewById(R.id.txtPrecioLista);
        TextView txtCantidad = (TextView) view.findViewById(R.id.txtCantidadLista);
        ImageView imagen = (ImageView) view.findViewById(R.id.imgMenu);
        Productos producto = getItem(position);

        txtCodigo.setText(producto.getCodigo());
        txtDescripcion.setText(producto.getDescripcion());
        txtPrecio.setText(producto.getPrecio());
        txtCantidad.setText(producto.getCantidad());
        imagen.setImageResource(producto.getImagen());
        return view;
    }

}

Paso 7: Ahora en MainActivity preparamos para crear el listado:

• Lo Primero que haremos sera crear los objetos necesarios:

MiBaseDatos baseDatos;
ListView lista;
ProductosAdapter adaptadorLista;

• Ahora inicializaremos el objeto lista:

  lista=(ListView)findViewById(R.id.lista);

• Para este ejemplo crearemos un método que llamaremos grabarBaseDatos(), en el cual grabaremos los productos en la base de datos para poder mostrarlos posteriormente:  Link para bajar Imagenes necesarias   :

public void grabarBaseDatos(){
        int imagenes[]={R.drawable.cereal1,R.drawable.cereal2,R.drawable.cereal3,
                R.drawable.fruta1,R.drawable.fruta2,R.drawable.fruta3,R.drawable.refresco1,
                R.drawable.refresco2,R.drawable.refresco3};
        String descripcion[]={"ChocoCrispy","Frostie","Froot Loop","Naranja","Fruta Estrella","Platano","Coca-cola","Mundet","Coca-Light"};
        String precio[]={"10.5","25","20","12.99","25.4","12.3","24","23.5","19.5"};
        String cantidad[]={"10","10","10","10","10","10","10","10","10"};
        String codigo[]={"123","456","789","987","654","321","759","258","369"};
        baseDatos=new MiBaseDatos(getApplicationContext());
        SQLiteDatabase sql=baseDatos.getWritableDatabase();

        for (int x=0;x<imagenes.length;x++){
            ContentValues valores=new ContentValues();
            valores.put("codigo",codigo[x]);
            valores.put("descripcion",descripcion[x]);
            valores.put("precio",precio[x]);
            valores.put("cantidad",cantidad[x]);
            valores.put("imagen",imagenes[x]);
            sql.insert("productos",null,valores);
        }
        sql.close();
    }

•    Una vez que ya insertamos los datos prodeceremos a inicializar nuestro adaptador:

  adaptadorLista=new ProductosAdapter(this);
  

• Ahora crearemos el metodo que llamaremos cargarDatos() el cual sera el encargado de leer la base de datos y agregarlos al adaptador:

  public void cargarDatos(){
          baseDatos=new MiBaseDatos(getApplicationContext());
          SQLiteDatabase sql=baseDatos.getReadableDatabase();
          String[] columnas={"codigo","descripcion","precio","cantidad","imagen"};
          Cursor cursor=sql.query("productos",columnas,null,null,null,null,null);
          while(cursor.moveToNext()){
              adaptadorLista.add(new Productos(
                      cursor.getString(cursor.getColumnIndex("codigo")),
                      cursor.getString(cursor.getColumnIndex("descripcion")),
                      cursor.getString(cursor.getColumnIndex("precio")),
                      cursor.getString(cursor.getColumnIndex("cantidad")),
                      cursor.getInt(cursor.getColumnIndex("imagen"))
              ));
          }
          sql.close();
      }

   

• Ahora agregamos el adaptador a la lista:

  adaptadorLista.notifyDataSetChanged();
  lista.setAdapter(adaptadorLista);

El codigo de MainActivity quedaria de la Siguiente Manera:

public class MainActivity extends AppCompatActivity {
    MiBaseDatos baseDatos;
    ListView lista;
    ProductosAdapter adaptadorLista;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lista=(ListView)findViewById(R.id.lista);
        grabarBaseDatos();
        adaptadorLista=new ProductosAdapter(this);
        cargarDatos();
        adaptadorLista.notifyDataSetChanged();
        lista.setAdapter(adaptadorLista);
    }
    public void grabarBaseDatos(){
        int imagenes[]={R.drawable.cereal1,R.drawable.cereal2,R.drawable.cereal3,
                R.drawable.fruta1,R.drawable.fruta2,R.drawable.fruta3,R.drawable.refresco1,
                R.drawable.refresco2,R.drawable.refresco3};
        String descripcion[]={"ChocoCrispy","Frostie","Froot Loop","Naranja","Fruta Estrella","Platano","Coca-cola","Mundet","Coca-Light"};
        String precio[]={"10.5","25","20","12.99","25.4","12.3","24","23.5","19.5"};
        String cantidad[]={"10","10","10","10","10","10","10","10","10"};
        String codigo[]={"123","456","789","987","654","321","759","258","369"};
        baseDatos=new MiBaseDatos(getApplicationContext());
        SQLiteDatabase sql=baseDatos.getWritableDatabase();

        for (int x=0;x<imagenes.length;x++){
            ContentValues valores=new ContentValues();
            valores.put("codigo",codigo[x]);
            valores.put("descripcion",descripcion[x]);
            valores.put("precio",precio[x]);
            valores.put("cantidad",cantidad[x]);
            valores.put("imagen",imagenes[x]);
            sql.insert("productos",null,valores);
        }
        sql.close();
    }
    public void cargarDatos(){
        baseDatos=new MiBaseDatos(getApplicationContext());
        SQLiteDatabase sql=baseDatos.getReadableDatabase();
        String[] columnas={"codigo","descripcion","precio","cantidad","imagen"};
        Cursor cursor=sql.query("productos",columnas,null,null,null,null,null);
        while(cursor.moveToNext()){
            adaptadorLista.add(new Productos(
                    cursor.getString(cursor.getColumnIndex("codigo")),
                    cursor.getString(cursor.getColumnIndex("descripcion")),
                    cursor.getString(cursor.getColumnIndex("precio")),
                    cursor.getString(cursor.getColumnIndex("cantidad")),
                    cursor.getInt(cursor.getColumnIndex("imagen"))
            ));
        }
        sql.close();
    }
}

Con esto QUEDARÍA terminada la APLICACIÓN y TENDRÍAS que ver algo parecido a la SIGUIENTE imagen: