Android: How to display images from a list in a ListView?

Question

Android: how to display images from the web in ListView? I have the following code to display an image from a URL in an ImageView:

import java.io.IOException; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; import java.net.URLConnection; import android.app.ListActivity; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.Bundle; import android.widget.ImageView; public class HttpImgDownload extends ListActivity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Bitmap bitmap = // DownloadImage( // "http://www.streetcar.org/mim/cable/images/cable-01.jpg"); DownloadImage( "http://s.twimg.com/a/1258674567/images/default_profile_3_normal.png"); ImageView img = (ImageView) findViewById(R.id.img); img.setImageBitmap(bitmap); } private InputStream OpenHttpConnection(String urlString) throws IOException { InputStream in = null; int response = -1; URL url = new URL(urlString); URLConnection conn = url.openConnection(); if (!(conn instanceof HttpURLConnection)) throw new IOException("Not an HTTP connection"); try{ HttpURLConnection httpConn = (HttpURLConnection) conn; httpConn.setAllowUserInteraction(false); httpConn.setInstanceFollowRedirects(true); httpConn.setRequestMethod("GET"); httpConn.connect(); response = httpConn.getResponseCode(); if (response == HttpURLConnection.HTTP_OK) { in = httpConn.getInputStream(); } } catch (Exception ex) { throw new IOException("Error connecting"); } return in; } private Bitmap DownloadImage(String URL) { Bitmap bitmap = null; InputStream in = null; try { in = OpenHttpConnection(URL); bitmap = BitmapFactory.decodeStream(in); in.close(); } catch (IOException e1) { // TODO Auto-generated catch block e1.printStackTrace(); } return bitmap; } } 

Now, how can I display images in an array in a list? Here's how I want to display the images: http://sites.google.com/site/androideyecontact/_/rsrc/1238086823282/Home/android-eye-contact-lite/eye_contact-list_view_3.png?height=420&width=279

---

This is what I came up with:

 import java.io.IOException; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; import java.net.URLConnection; import android.app.Activity; import android.os.Bundle; import android.app.ListActivity; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.view.View; import android.view.ViewGroup; import android.view.LayoutInflater; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.ListView; import android.widget.TextView; public class ImageFromWeb extends ListActivity { /** Called when the activity is first created. */ TextView selection; Bitmap bitmap; String[] items={"lorem", "ipsum", "dolor", "sit", "amet", "consectetuer", "adipiscing", "elit", "morbi", "vel", "ligula", "vitae", "arcu", "aliquet", "mollis", "etiam", "vel", "erat", "placerat", "ante", "porttitor", "sodales", "pellentesque", "augue", "purus"}; @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.main); bitmap = DownloadImage( "http://www.streetcar.org/mim/cable/images/cable-01.jpg"); //DownloadImage( // "http://s.twimg.com/a/1258674567/images/default_profile_3_normal.png"); //ImageView img = (ImageView) findViewById(R.id.img); //icon.setImageBitmap(bitmap); //icon // ImageView icon=(ImageView)row.findViewById(R.id.icon); //setListAdapter(new IconicAdapter()); //selection=(TextView)findViewById(R.id.selection); } private InputStream OpenHttpConnection(String urlString) throws IOException { InputStream in = null; int response = -1; URL url = new URL(urlString); URLConnection conn = url.openConnection(); if (!(conn instanceof HttpURLConnection)) throw new IOException("Not an HTTP connection"); try{ HttpURLConnection httpConn = (HttpURLConnection) conn; httpConn.setAllowUserInteraction(false); httpConn.setInstanceFollowRedirects(true); httpConn.setRequestMethod("GET"); httpConn.connect(); response = httpConn.getResponseCode(); if (response == HttpURLConnection.HTTP_OK) { in = httpConn.getInputStream(); } } catch (Exception ex) { throw new IOException("Error connecting"); } return in; } private Bitmap DownloadImage(String URL) { Bitmap bitmap = null; InputStream in = null; try { in = OpenHttpConnection(URL); bitmap = BitmapFactory.decodeStream(in); in.close(); } catch (IOException e1) { // TODO Auto-generated catch block e1.printStackTrace(); } return bitmap; } public void onListItemClick(ListView parent, View v, int position, long id) { selection.setText(items[position]); } class IconicAdapter extends ArrayAdapter { IconicAdapter() { super(ImageFromWeb.this, R.layout.row, items); } public View getView(int position, View convertView, ViewGroup parent) { LayoutInflater inflater=getLayoutInflater(); View row=inflater.inflate(R.layout.row, parent, false); TextView label=(TextView)row.findViewById(R.id.label); label.setText(items[position]); ImageView icon=(ImageView)row.findViewById(R.id.icon); //if (items[position].length()>4) { //icon.setImageResource(R.drawable.delete); //icon.setI icon.setImageBitmap(bitmap); //} //else { //icon.setImageResource(R.drawable.ok); //} return(row); } } } 

main.xml

 <TextView android:id="@+id/selection" android:layout_width="fill_parent" android:layout_height="wrap_content"/> <ListView android:id="@android:id/list" android:layout_width="fill_parent" android:layout_height="fill_parent" android:drawSelectorOnTop="false" > 

row.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageView android:id="@+id/icon" android:layout_width="22px" android:paddingLeft="2px" android:paddingRight="2px" android:paddingTop="2px" android:layout_height="wrap_content" /> <TextView android:id="@+id/label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="40sp" /> </LinearLayout> 

But the image is not displayed on the Internet. There is something wrong with the sequence of this code. Can anyone figure it out?

Answer 1

You can take a look at my sample code Lazy loading images in a ListView

Answer 2

you need to create your own adapter for the list. Extend this adapter class with the SimpleCursorAdapter. You can find Apis here. check this example , it will help you a lot.