{"id":391,"date":"2018-05-18T01:16:53","date_gmt":"2018-05-18T01:16:53","guid":{"rendered":"http:\/\/www.profeluismitre.com.mx\/Ejemplos\/?page_id=391"},"modified":"2018-05-18T02:13:02","modified_gmt":"2018-05-18T02:13:02","slug":"ejemplo-de-listview-con-imagenes","status":"publish","type":"page","link":"https:\/\/profeluismitre.com.mx\/Ejemplos\/?page_id=391","title":{"rendered":"Ejemplo de ListView con Im\u00e1genes"},"content":{"rendered":"<p>En este Ejemplo Realizaremos una Actividad que Muestra un listado de productos Almacenados en una Base de Datos.<\/p>\n<p><strong>Paso 1:<\/strong> Crearemos un nuevo Proyecto Android el cual yo Llame <strong>EjemploListView<\/strong> en el cual crearemos una actividad del tipo <strong>EmptyActivity<\/strong> que llamaremos<strong> MainActivity<\/strong><\/p>\n<p><strong>Paso 2:\u00a0\u00a0<\/strong>En nuestra ventana xml <strong>activity_main.xml<\/strong> agregaremos un componente ListView el cual llamaremos Lista. quedando el c\u00f3digo de la siguiente manera:<\/p>\n<pre class=\"lang:default decode:true \">&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:orientation=\"vertical\"\r\n    tools:context=\"com.profeluismitre.ejemplolistview.MainActivity\"&gt;\r\n\r\n    &lt;ListView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:id=\"@+id\/lista\"&gt;        \r\n    &lt;\/ListView&gt;\r\n\r\n&lt;\/LinearLayout&gt;<\/pre>\n<p><strong>Paso 3: <\/strong>crearemos un archivo xml que sera el cual insertaremos a la lista con la imagen e informaci\u00f3n de cada producto el archivo lo llamaremos <strong>elementos_lista.xml<\/strong>, para crearlo daremos Clic derecho sobre la carpeta layout <strong>NEW&gt;XML&gt;LAYOUT XML\u00a0<\/strong>el codigo quedario de la siguiente manera:<\/p>\n<pre class=\"lang:default decode:true\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:orientation=\"horizontal\"\r\n    android:gravity=\"center\"\r\n    android:layout_height=\"match_parent\"&gt;\r\n        &lt;ImageView\r\n            android:id=\"@+id\/imgMenu\"\r\n            android:layout_width=\"100dp\"\r\n            android:layout_height=\"100dp\"\/&gt;\r\n        &lt;LinearLayout\r\n            android:layout_width=\"wrap_content\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:layout_margin=\"10dp\"\r\n            android:orientation=\"vertical\"&gt;\r\n                &lt;TextView\r\n                    android:id=\"@+id\/txtCodigoLista\"\r\n                    android:layout_width=\"wrap_content\"\r\n                    android:layout_height=\"wrap_content\"\r\n                    android:background=\"@android:color\/transparent\"\r\n                    android:text=\"Codigo:\"\r\n                    android:layout_gravity=\"center\"\r\n                    android:textColor=\"@android:color\/black\"\r\n                    android:textSize=\"25dp\" \/&gt;\r\n                &lt;TextView\r\n                    android:id=\"@+id\/txtDescripcionLista\"\r\n                    android:layout_width=\"wrap_content\"\r\n                    android:layout_height=\"wrap_content\"\r\n                    android:background=\"@android:color\/transparent\"\r\n                    android:text=\"Descripcion:\"\r\n                    android:layout_gravity=\"center\"\r\n                    android:textColor=\"@android:color\/black\"\r\n                    android:textSize=\"25dp\" \/&gt;\r\n                &lt;TextView\r\n                    android:id=\"@+id\/txtPrecioLista\"\r\n                    android:layout_width=\"wrap_content\"\r\n                    android:layout_height=\"wrap_content\"\r\n                    android:background=\"@android:color\/transparent\"\r\n                    android:text=\"Precio:\"\r\n                    android:layout_gravity=\"center\"\r\n                    android:textColor=\"@android:color\/black\"\r\n                    android:textSize=\"25dp\" \/&gt;\r\n                &lt;TextView\r\n                    android:id=\"@+id\/txtCantidadLista\"\r\n                    android:layout_width=\"wrap_content\"\r\n                    android:layout_height=\"wrap_content\"\r\n                    android:background=\"@android:color\/transparent\"\r\n                    android:text=\"Cantidad:\"\r\n                    android:layout_gravity=\"center\"\r\n                    android:textColor=\"@android:color\/black\"\r\n                    android:textSize=\"25dp\" \/&gt;\r\n        &lt;\/LinearLayout&gt;\r\n&lt;\/LinearLayout&gt;<\/pre>\n<p><strong>Paso 4: <\/strong>Ahora creamos nuestra clase de<strong> MiBaseDatos <\/strong>que sera la encargada de crear la base de datos y por consiguiente almacenar la informaci\u00f3n.<\/p>\n<pre class=\"lang:default decode:true \">public class MiBaseDatos extends SQLiteOpenHelper{\r\n    private static final String TABLA_PRODUCTO =\r\n            \"CREATE TABLE productos (codigo TEXT PRIMARY KEY, descripcion TEXT, precio TEXT, cantidad TEXT, imagen INTEGER)\";\r\n    private static final String SQL_DELETE_PRODUCTOS =\r\n            \"DROP TABLE IF EXISTS productos\";\r\n    public static final String NOMBRE_BD = \"EjemploListView.sqlite\";\r\n    public MiBaseDatos(Context contexto){\r\n        super(contexto, NOMBRE_BD, null, 1);\r\n\r\n    }\r\n\r\n    @Override\r\n    public void onCreate(SQLiteDatabase db) {\r\n        db.execSQL(TABLA_PRODUCTO);\r\n    }\r\n\r\n    @Override\r\n    public void onUpgrade(SQLiteDatabase db, int i, int i1) {\r\n        db.execSQL(SQL_DELETE_PRODUCTOS);\r\n        onCreate(db);\r\n    }\r\n}<\/pre>\n<p><strong>Paso 5:<\/strong> Crearemos nuestra clase que almacenara la informacion del producto para poder armar el listado la cual llamaremos <strong>Productos<\/strong>:<\/p>\n<pre class=\"lang:default decode:true \">public class Productos {\r\n    private String codigo;\r\n    private String descripcion;\r\n    private String precio;\r\n    private String cantidad;\r\n    private int imagen;\r\n    \r\n    public Productos(){}\r\n    \r\n    public Productos(String codigo, String descripcion, String precio, String cantidad, int imagen) {\r\n        this.codigo = codigo;\r\n        this.descripcion = descripcion;\r\n        this.precio = precio;\r\n        this.cantidad = cantidad;\r\n        this.imagen = imagen;\r\n    }\r\n\r\n    public String getCodigo() {\r\n        return codigo;\r\n    }\r\n\r\n    public void setCodigo(String codigo) {\r\n        this.codigo = codigo;\r\n    }\r\n\r\n    public String getDescripcion() {\r\n        return descripcion;\r\n    }\r\n\r\n    public void setDescripcion(String descripcion) {\r\n        this.descripcion = descripcion;\r\n    }\r\n\r\n    public String getPrecio() {\r\n        return precio;\r\n    }\r\n\r\n    public void setPrecio(String precio) {\r\n        this.precio = precio;\r\n    }\r\n\r\n    public String getCantidad() {\r\n        return cantidad;\r\n    }\r\n\r\n    public void setCantidad(String cantidad) {\r\n        this.cantidad = cantidad;\r\n    }\r\n\r\n    public int getImagen() {\r\n        return imagen;\r\n    }\r\n\r\n    public void setImagen(int imagen) {\r\n        this.imagen = imagen;\r\n    }\r\n}<\/pre>\n<p><strong>Paso 6:<\/strong>\u00a0 Creamos la Clase que llamaremos <strong>ProductosAdapter<\/strong> la cual sera la encargada de recibir el producto y armar la ventana para mostrar en la lista:<\/p>\n<pre class=\"lang:default decode:true \">public class ProductosAdapter extends ArrayAdapter&lt;Productos&gt; {\r\n    public ProductosAdapter(Context context) {\r\n        super(context, R.layout.elementos_lista, R.id.txtCodigoLista);\r\n\r\n    }\r\n\r\n    public View getView(int position, View convertView, ViewGroup parent) {\r\n        View view = super.getView(position, convertView, parent);\r\n        TextView txtCodigo = (TextView) view.findViewById(R.id.txtCodigoLista);\r\n        TextView txtDescripcion = (TextView) view.findViewById(R.id.txtDescripcionLista);\r\n        TextView txtPrecio = (TextView) view.findViewById(R.id.txtPrecioLista);\r\n        TextView txtCantidad = (TextView) view.findViewById(R.id.txtCantidadLista);\r\n        ImageView imagen = (ImageView) view.findViewById(R.id.imgMenu);\r\n        Productos producto = getItem(position);\r\n\r\n        txtCodigo.setText(producto.getCodigo());\r\n        txtDescripcion.setText(producto.getDescripcion());\r\n        txtPrecio.setText(producto.getPrecio());\r\n        txtCantidad.setText(producto.getCantidad());\r\n        imagen.setImageResource(producto.getImagen());\r\n        return view;\r\n    }\r\n\r\n}<\/pre>\n<p><strong>Paso 7:<\/strong> Ahora en <strong>MainActivity<\/strong> preparamos para crear el listado:<\/p>\n<ul>\n<li>Lo Primero que haremos sera crear los objetos necesarios:<\/li>\n<\/ul>\n<pre class=\"\">MiBaseDatos baseDatos;\r\nListView lista;\r\nProductosAdapter adaptadorLista;<\/pre>\n<ul>\n<li>Ahora inicializaremos el objeto lista:\n<pre class=\"\">lista=(ListView)findViewById(R.id.lista);<\/pre>\n<\/li>\n<li>Para este ejemplo crearemos un m\u00e9todo que llamaremos <strong>grabarBaseDatos(),\u00a0<\/strong>en el cual grabaremos los productos en la base de datos para poder mostrarlos posteriormente:\u00a0 <a href=\"http:\/\/www.profeluismitre.com.mx\/misArchivos\/ImagenesListView.rar\">Link para bajar Imagenes necesarias<\/a>\u00a0 \u00a0:<\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">public void grabarBaseDatos(){\r\n        int imagenes[]={R.drawable.cereal1,R.drawable.cereal2,R.drawable.cereal3,\r\n                R.drawable.fruta1,R.drawable.fruta2,R.drawable.fruta3,R.drawable.refresco1,\r\n                R.drawable.refresco2,R.drawable.refresco3};\r\n        String descripcion[]={\"ChocoCrispy\",\"Frostie\",\"Froot Loop\",\"Naranja\",\"Fruta Estrella\",\"Platano\",\"Coca-cola\",\"Mundet\",\"Coca-Light\"};\r\n        String precio[]={\"10.5\",\"25\",\"20\",\"12.99\",\"25.4\",\"12.3\",\"24\",\"23.5\",\"19.5\"};\r\n        String cantidad[]={\"10\",\"10\",\"10\",\"10\",\"10\",\"10\",\"10\",\"10\",\"10\"};\r\n        String codigo[]={\"123\",\"456\",\"789\",\"987\",\"654\",\"321\",\"759\",\"258\",\"369\"};\r\n        baseDatos=new MiBaseDatos(getApplicationContext());\r\n        SQLiteDatabase sql=baseDatos.getWritableDatabase();\r\n\r\n        for (int x=0;x&lt;imagenes.length;x++){\r\n            ContentValues valores=new ContentValues();\r\n            valores.put(\"codigo\",codigo[x]);\r\n            valores.put(\"descripcion\",descripcion[x]);\r\n            valores.put(\"precio\",precio[x]);\r\n            valores.put(\"cantidad\",cantidad[x]);\r\n            valores.put(\"imagen\",imagenes[x]);\r\n            sql.insert(\"productos\",null,valores);\r\n        }\r\n        sql.close();\r\n    }<\/pre>\n<ul>\n<li>\u00a0 \u00a0Una vez que ya insertamos los datos prodeceremos a inicializar nuestro adaptador:\n<pre class=\"\">adaptadorLista=new ProductosAdapter(this);\r\n<\/pre>\n<\/li>\n<li>Ahora crearemos el metodo que llamaremos cargarDatos() el cual sera el encargado de leer la base de datos y agregarlos al adaptador:\n<pre class=\"lang:default decode:true \">public void cargarDatos(){\r\n        baseDatos=new MiBaseDatos(getApplicationContext());\r\n        SQLiteDatabase sql=baseDatos.getReadableDatabase();\r\n        String[] columnas={\"codigo\",\"descripcion\",\"precio\",\"cantidad\",\"imagen\"};\r\n        Cursor cursor=sql.query(\"productos\",columnas,null,null,null,null,null);\r\n        while(cursor.moveToNext()){\r\n            adaptadorLista.add(new Productos(\r\n                    cursor.getString(cursor.getColumnIndex(\"codigo\")),\r\n                    cursor.getString(cursor.getColumnIndex(\"descripcion\")),\r\n                    cursor.getString(cursor.getColumnIndex(\"precio\")),\r\n                    cursor.getString(cursor.getColumnIndex(\"cantidad\")),\r\n                    cursor.getInt(cursor.getColumnIndex(\"imagen\"))\r\n            ));\r\n        }\r\n        sql.close();\r\n    }<\/pre>\n<p>&nbsp;<\/li>\n<li>Ahora agregamos el adaptador a la lista:\n<pre class=\"\">adaptadorLista.notifyDataSetChanged();\r\nlista.setAdapter(adaptadorLista);<\/pre>\n<\/li>\n<\/ul>\n<p>El codigo de MainActivity quedaria de la Siguiente Manera:<\/p>\n<pre class=\"lang:default decode:true \">public class MainActivity extends AppCompatActivity {\r\n    MiBaseDatos baseDatos;\r\n    ListView lista;\r\n    ProductosAdapter adaptadorLista;\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        lista=(ListView)findViewById(R.id.lista);\r\n        grabarBaseDatos();\r\n        adaptadorLista=new ProductosAdapter(this);\r\n        cargarDatos();\r\n        adaptadorLista.notifyDataSetChanged();\r\n        lista.setAdapter(adaptadorLista);\r\n    }\r\n    public void grabarBaseDatos(){\r\n        int imagenes[]={R.drawable.cereal1,R.drawable.cereal2,R.drawable.cereal3,\r\n                R.drawable.fruta1,R.drawable.fruta2,R.drawable.fruta3,R.drawable.refresco1,\r\n                R.drawable.refresco2,R.drawable.refresco3};\r\n        String descripcion[]={\"ChocoCrispy\",\"Frostie\",\"Froot Loop\",\"Naranja\",\"Fruta Estrella\",\"Platano\",\"Coca-cola\",\"Mundet\",\"Coca-Light\"};\r\n        String precio[]={\"10.5\",\"25\",\"20\",\"12.99\",\"25.4\",\"12.3\",\"24\",\"23.5\",\"19.5\"};\r\n        String cantidad[]={\"10\",\"10\",\"10\",\"10\",\"10\",\"10\",\"10\",\"10\",\"10\"};\r\n        String codigo[]={\"123\",\"456\",\"789\",\"987\",\"654\",\"321\",\"759\",\"258\",\"369\"};\r\n        baseDatos=new MiBaseDatos(getApplicationContext());\r\n        SQLiteDatabase sql=baseDatos.getWritableDatabase();\r\n\r\n        for (int x=0;x&lt;imagenes.length;x++){\r\n            ContentValues valores=new ContentValues();\r\n            valores.put(\"codigo\",codigo[x]);\r\n            valores.put(\"descripcion\",descripcion[x]);\r\n            valores.put(\"precio\",precio[x]);\r\n            valores.put(\"cantidad\",cantidad[x]);\r\n            valores.put(\"imagen\",imagenes[x]);\r\n            sql.insert(\"productos\",null,valores);\r\n        }\r\n        sql.close();\r\n    }\r\n    public void cargarDatos(){\r\n        baseDatos=new MiBaseDatos(getApplicationContext());\r\n        SQLiteDatabase sql=baseDatos.getReadableDatabase();\r\n        String[] columnas={\"codigo\",\"descripcion\",\"precio\",\"cantidad\",\"imagen\"};\r\n        Cursor cursor=sql.query(\"productos\",columnas,null,null,null,null,null);\r\n        while(cursor.moveToNext()){\r\n            adaptadorLista.add(new Productos(\r\n                    cursor.getString(cursor.getColumnIndex(\"codigo\")),\r\n                    cursor.getString(cursor.getColumnIndex(\"descripcion\")),\r\n                    cursor.getString(cursor.getColumnIndex(\"precio\")),\r\n                    cursor.getString(cursor.getColumnIndex(\"cantidad\")),\r\n                    cursor.getInt(cursor.getColumnIndex(\"imagen\"))\r\n            ));\r\n        }\r\n        sql.close();\r\n    }\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h5 style=\"text-align: center;\">Con esto QUEDAR\u00cdA terminada la APLICACI\u00d3N y TENDR\u00cdAS que ver algo parecido a la SIGUIENTE imagen:<\/h5>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-394 aligncenter\" src=\"http:\/\/www.profeluismitre.com.mx\/Ejemplos\/wp-content\/uploads\/2018\/05\/lista-188x300.png\" alt=\"\" width=\"188\" height=\"300\" srcset=\"https:\/\/profeluismitre.com.mx\/Ejemplos\/wp-content\/uploads\/2018\/05\/lista-188x300.png 188w, https:\/\/profeluismitre.com.mx\/Ejemplos\/wp-content\/uploads\/2018\/05\/lista.png 456w\" sizes=\"auto, (max-width: 188px) 100vw, 188px\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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:\u00a0\u00a0En nuestra ventana xml activity_main.xml agregaremos un componente ListView el cual llamaremos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-391","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=\/wp\/v2\/pages\/391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=391"}],"version-history":[{"count":3,"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=\/wp\/v2\/pages\/391\/revisions"}],"predecessor-version":[{"id":395,"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=\/wp\/v2\/pages\/391\/revisions\/395"}],"wp:attachment":[{"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}