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

Question

Android:How to display images from the web in a ListView?I have the following code to display 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 listview? 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

Answer 1

you have to design your own custom adapter for the list. extend that adapter class with SimpleCursorAdapter. you can find tha Apis here. check this example it will help you a lot.

Answer 2

This is what i have come 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 from the web. There is something wrong in the sequence of this code. Can someone sort it out?

Answer 3

You can take a look at my sample code http://stackoverflow.com/questions/541966/android-how-do-i-do-a-lazy-load-of-images-in-listview/3068012#3068012