Android Listview load imageview from url

Question

I am loading an image from url and input it to my listview. The problem is that the imageview is changing it's image everytime I'm scrolling the listview.

I used this code from: How to load an ImageView by URL in Android? to load images from url:

public class ImageLoadTask extends AsyncTask<Void, Void, Bitmap> {

    private String url;
    private ImageView imageView;

    public ImageLoadTask(String url, ImageView imageView) {
        this.url = url;
        this.imageView = imageView;
    }

    @Override
    protected Bitmap doInBackground(Void... params) {
        try {
            URL urlConnection = new URL(url);
            HttpURLConnection connection = (HttpURLConnection) urlConnection
                    .openConnection();
            connection.setDoInput(true);
            connection.connect();
            InputStream input = connection.getInputStream();
            Bitmap myBitmap = BitmapFactory.decodeStream(input);
            return myBitmap;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    @Override
    protected void onPostExecute(Bitmap result) {
        super.onPostExecute(result);
        imageView.setImageBitmap(result);
    }

}

In my ListAdapter i use this code to load up the image:

public View getView(int position, View convertView, ViewGroup parent){
    ViewHolderItem holder = new ViewHolderItem();
    if (convertView == null) {
     LayoutInflater inflater = (LayoutInflater) main.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = inflater.inflate(R.layout.cell, null);

        holder.name = (TextView) convertView.findViewById(R.id.name);
        holder.thumb = (ImageView) convertView.findViewById(R.id.thumb);
        holder.duration = (TextView) convertView.findViewById(R.id.duration);
        //holder.code = (TextView) convertView.findViewById(R.id.code);
        convertView.setTag(holder);
    }
    else{
         holder = (ViewHolderItem) convertView.getTag();
    }


    holder.name.setText(this.main.countries.get(position).title);
    if (holder.thumb != null) {
        new DownloadImageTask(holder.thumb).execute(this.main.countries.get(position).thumb);
    }
    return convertView;
}

In my main activity:

   public void get_data(String data){
        try {
            JSONArray data_array=new JSONArray(data);
            for (int i = 0 ; i < data_array.length() ; i++){
                JSONObject obj=new JSONObject(data_array.get(i).toString());

                Countries add=new Countries();
                add.title = obj.getString("title");
                add.thumb = obj.getString("artwork_url");

                countries.add(add);
            }

            adapter.notifyDataSetChanged();

        } catch (JSONException e) {
            e.printStackTrace();
        }
    }

Answer 1

Try to use Picasso library . It is very simple to use, eg.

Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView);

Picasso has automatic memory and disk caching. It is very important in ListView .

Where can I get the variable name context ?

Get context:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    Context context = parent.getContext();
    [...]
}

Answer 2

You should use an image loading library like Picasso . It makes loading images from URLs really simple and does caching too.

Answer 3

I agree with the existing two answers, the best approach to avoid any headaches and make your life easier would be to use one of the image libraries which are currently available: Picasso and Glide

Glide which is equally as easy to use when compared to Picasso. I have seen a video where the images take longer to load on Picasso when using a list view than compared to Glide however this may be down to configuration settings. Glide also enables the use of GIFs which may or may not be important to you.

Here's an example of using Glide:

ImageView imageView = (ImageView) findViewById(R.id.my_image_view);

Glide.with(this).load("https://lh6.ggpht.com/9SZhHdv4URtBzRmXpnWxZcYhkgTQurFuuQ8OR7WZ3R7fyTmha77dYkVvcuqMu3DLvMQ=w300").into(imageView);

Hope this helps!

Answer 4

You need to try image downloading and caching library for ListView . which can make performance faster and load image into ImageView easily.

Picasso and Glide are the best example to load image in ImageView into ListView