Load multiple images with picasso - Android

Question

I am trying to load multiple images from some urls using picasso library.

So far I have tried this code:

 for(int i = 0; i < friends.size(); i++)
   {
       final Profile profile = friends.get(i);
       String url = profile.getUserImageUrl();


       Picasso.with(getContext()).load(url).into(new Target() {
           // It doesn't reach any of the code below ....!! 

           @Override
           public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from)    {
               profile.setUserImage(bitmap);
               counter++;

               if(counter >= friends.size() - 1)
                   cards();
           }

           @Override
           public void onBitmapFailed(Drawable drawable) {
               Log.e("App", "Failed to load company logo in onBitmapFailed method");
           }

           @Override
           public void onPrepareLoad(Drawable drawable) {
               Log.e("App","Failed to load company logo in onBitmapFailed method");
           }

       });
   }

This code doesn't work. When I run this code it doesn't reach to any line within the Target interface. Someone have any ideas for why?

Answer 1

Maybe I'm missing something here, but I think into() accepts only an ImageView and an optional Callback . Can you do something like this:

Picasso
    .with(getContext())
    .load(profile.getUserImageUrl())
    .into(imageView, new Callback()
    {
        @Override
        public void onSuccess()
        {
            // Update card
        }

        @Override
        public void onError()
        {
            Log.e("App","Failed to load company logo");
        }
    });

But let's try this: I'm guessing you're either trying to add profile images to a bunch of existing views, or dynamically trying to create those views as you loop over all the profiles. Here's the solution for both cases:

for (int i = 0; i < friends.size(); i++)
{
    Profile profile = friends.get(i);
    if (profile != null)
    {
        /** Either find an existing view like this: **/

        // You're assembling a resource ID here.
        String resourceName = "profile_" + profile.getId(); // Assuming you have an ID.
        int resourceId = getResources().getIdentifier(resourceName, "id", getActivity().getPackageName());

        // Use it to get the image view in your activity's layout.
        ImageView imageView = (ImageView) findViewById(resourceId);
        if (imageView != null)
        {
            Picasso
                    .with(this)
                    .load(profile.getUserImageUrl())
                    .into(imageView);
        }

        /** Or inflate a View like this: **/

        // Get a containing view. You should move this above your
        // loop--it's here so I can keep these blocks together.
        FrameLayout frameLayout = (FrameLayout) findViewById(R.layout.frame_layout);

        // This is a layout that contains your image view and
        // any other views you want associated with a profile.
        View view = LayoutInflater.from(this).inflate(R.layout.profile_layout, null, false);

        // You're finding the view based from the inflated layout, not the activity layout
        ImageView imageView = (ImageView) view.findViewById(R.id.image_view);
        if (imageView != null)
        {
            Picasso
                    .with(this)
                    .load(profile.getUserImageUrl())
                    .into(imageView);
        }

        frameLayout.addView(view);
    }
}

Answer 2

You just need to keep a strong reference to the Target while the request is running. And you also need a different instance of Target for each picture you are going to load (because, if I am not mistaken, Picasso will cancel the previous request for a Target if a new one is started for the same Target ).

EXPLANATION:

The actual reason you are having this problem is this:

Note: This method keeps a weak reference to the Target instance and will be garbage collected if you do not keep a strong reference to it. To receive callbacks when an image is loaded use into(android.widget.ImageView, Callback).

Source: http://square.github.io/picasso/2.x/picasso/com/squareup/picasso/RequestCreator.html#into-com.squareup.picasso.Target-

So, in general:

In most cases, you should use this when you are dealing with a custom View or view holder which should implement the Target interface.

BUT:

In your case I think the best solution is really to just create/find the ImageViews beforehand and have Picasso load the images directly into them.