How to download Images (thousand of images) and render them in ListAdapter in android?

Question

My task is to download the images URL using Rest call and render them into ListView using Android adapter . For making Rest call I am using retrofit which is returning a Json (that Json have URL of images).

I am using picasso to download the images from server and rendering them into Listview . Everything works fine because I only have couple of Images to download right now.

How can I achieve the task when I will have more than 500 Images to download. What would be the best way to do it.

MyAdapter class

@Override
public View getView(int position, View convertView, ViewGroup parent) {

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

 Picasso
      .with(context)
      .load("http://i.imgur.com/rFLNqWI.jpg")
      .transform(imageTransformation)
      .into(imageView);
 return convertView;
}

Above code is very simple ie rendering the one image on the basis of count. Any help would be appreciable.

Is this the right way to run the loop on the basis of count(imagesURL) and download them using picasso in above code? Or is there are any better solution ?

Edit-2

I think I misunderstood you guys. My question is How to implement above scenario when I will have 1000 images URL.

Answer 1

Using Picasso into getView method is OK. But you must use Holder Pattern to save the ImageView's instances.

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    ViewHolderItem viewHolder;


    if(convertView==null || !(convertView.getTag() instanceof ViewHolderItem )){

        // inflate the layout
        LayoutInflater inflater = ((Activity) context).getLayoutInflater();
        convertView = inflater.inflate(layoutResourceId, parent, false);

        // well set up the ViewHolder
        viewHolder = new ViewHolderItem();
        viewHolder.imageViewItem = (ImageView) convertView.findViewById(R.id.imageView);

        // store the holder with the view.
        convertView.setTag(viewHolder);

    }else{
        // we've just avoided calling findViewById() on resource everytime
        // just use the viewHolder
        viewHolder = (ViewHolderItem) convertView.getTag();
    }




  Picasso
      .with(context)
      .load("http://i.imgur.com/rFLNqWI.jpg")
      .transform(imageTransformation)
      .into(viewHolder.imageViewItem);




    return convertView;

}

static class ViewHolderItem {
    ImageView imageViewItem;
}

Answer 2

Not entirely sure what you're asking as Picasso already handles caching and it's actually meant for loading lots of images in a listview. I will try to answer as best as I can.

If you've already got to load one image, then you can use the same concept to load 500.

Couple things to note however:

1. In your adapter's #getView() function, remember to recycle and follow ViewHolder pattern if you don't want your listview to hang
2. You can also use RecyclerView instead of a ListView as the adapter will force you to implement ViewHolders.

Below code is a quick and basic example. Please don't mind the syntax. I just wanted to point out the most important parts.

public class SampleActivity extends Activity {
   MyAdapter mMyAdapter;
   public void onCreate(...) {
      super.onCreate(...);
      setContentView(...);
      List<String> listOfImages = new ArrayList<String>();
      // code here for adding/retrieving the image urls
      mMyAdapter = new MyAdapter(listOfImages);
      ListView listView = findViewById(...);
      listView.setAdapter(mMyAdapter);
   }    
}

public class MyAdapter extends BaseAdapter {
   List<String> mListOfImages;
   public MyAdapter(List<String> images) {
       mListOfImages = images;
   }
   public int getCount() {
       return mListOfImages.size();
   }

   ...
   ...

   public View getView(int position, View convertView, ViewGroup parent) {

      ViewHolder holder = convertView.getTag();
      if (holder == null) {
         holder = new ViewHolder();
         convertView.setTag(holder);
      }
      if (holder.mImageView == null) {
         ImageView imageView = (ImageView) convertView.findViewById(R.id.imageView);
         holder.mImageView = imageView;
      }

      Picasso
         .with(convertView.getContext())
         .load(mListOfImages.get(position))
         .transform(imageTransformation)
         .into(holder.mImageView);
       return convertView;
   }

   public static class ViewHolder {
      public ImageView mImageView;
   }
}

Hope this helps.