how to use progressbar when loading image in picasso?

Question

I want onStart() method to load image from server using picasso and I want to show a progress bar until the photos are fully downloaded Here is my code:

@Override
    protected void onStart() {
        // TODO Auto-generated method stub
        super.onStart();

        Picasso.with(context).load(imageLoad)
                .placeholder(R.id.progressBarDetails)
                .error(R.drawable.friend_request).noFade().resize(200, 200)
                .into(avatarImage, new Callback() {
                    @Override
                    public void onError() {
                        // TODO Auto-generated method stub

                    }

                    @Override
                    public void onSuccess() {
                        // TODO Auto-generated method stub
                        progressbar.setVisibility(View.GONE);
                    }

                });

        Picasso.with(this).load(imageLoad).into(target);

    }

    OnFinished a = new OnFinished() {

        @Override
        public void onSendFinished(IntentSender IntentSender, Intent intent,
                int resultCode, String resultData, Bundle resultExtras) {
            // TODO Auto-generated method stub
            intent = new Intent(getApplicationContext(), Map.class);
        }
    };

    private Target target = new Target() {
        @Override
        public void onBitmapLoaded(final Bitmap bitmap, Picasso.LoadedFrom from) {
            new Thread(new Runnable() {
                @Override
                public void run() {
                    File file = new File(Environment
                            .getExternalStorageDirectory().getPath()
                            + "/actress_wallpaper.jpg");
                    try {
                        file.createNewFile();
                        FileOutputStream ostream = new FileOutputStream(file);
                        bitmap.compress(CompressFormat.JPEG, 75, ostream);
                        ostream.close();
                    } catch (Exception e) {
                        e.printStackTrace();
                    }

                }
            }).start();
        }

Answer 1

I haven't tested your code but even if that works, the file actress_wallpaper.jpg isn't loaded in the ImageView. In the docs, it says

Objects implementing this class must have a working implementation of Object.equals(Object) and Object.hashCode() for proper storage internally.

Try this:

File file = new File(pathToFile);

Picasso.with(context)
       .load(file)
       .into(imageView, new Callback() {
           @Override
           public void onSuccess() {
               progressbar.setVisibility(View.GONE);
           }
       });

be warned I haven't tested my code.

Update:

I have tried version 2.3.2 and 2.3.3, it seems like that there's an issue https://github.com/square/picasso/issues/539

Answer 2

It is an old question but may be this answer can help others as I also had issues in showing progress bar while loading image from server.

I am using Picasso 2.4.0. and I am using Picasso Target interface to load image in imageview. Here is the tested and working code:

First add the following lines:

ImageView ivPhoto = (ImageView) findViewById(R.id.iv_photo);
ProgressBar pbLoadingBar = (ProgressBar) findViewById(R.id.pb_loading_bar);

//get image url
String imageUrl = getImageUrl();

//ImageViewTarget is the implementation of Target interface.
//code for this ImageViewTarget is in the end
Target target = new ImageViewTarget(ivPhoto, pbLoadingBar);
Picasso.with(mContext)
            .load(imageUrl)
            .placeholder(R.drawable.place_holder)
            .error(R.drawable.error_drawable)
            .into(target);

Here is the implementation of Target interface used above

private static class ImageViewTarget implements Target {

    private WeakReference<ImageView> mImageViewReference;
    private WeakReference<ProgressBar> mProgressBarReference;

    public ImageViewTarget(ImageView imageView, ProgressBar progressBar) {
        this.mImageViewReference = new WeakReference<>(imageView);
        this.mProgressBarReference = new WeakReference<>(progressBar);
    }

    @Override
    public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {

        //you can use this bitmap to load image in image view or save it in image file like the one in the above question.
        ImageView imageView = mImageViewReference.get();
        if (imageView != null) {
            imageView.setImageBitmap(bitmap);
        }

        ProgressBar progressBar = mProgressBarReference.get();
        if (progressBar != null) {
            progressBar.setVisibility(View.GONE);
        }
    }

    @Override
    public void onBitmapFailed(Drawable errorDrawable) {
        ImageView imageView = mImageViewReference.get();
        if (imageView != null) {
            imageView.setImageDrawable(errorDrawable);
        }

        ProgressBar progressBar = mProgressBarReference.get();
        if (progressBar != null) {
            progressBar.setVisibility(View.GONE);
        }
    }

    @Override
    public void onPrepareLoad(Drawable placeHolderDrawable) {
        ImageView imageView = mImageViewReference.get();
        if (imageView != null) {
            imageView.setImageDrawable(placeHolderDrawable);
        }

        ProgressBar progressBar = mProgressBarReference.get();
        if (progressBar != null) {
            progressBar.setVisibility(View.VISIBLE);
        }
    }
}

The above code works fine if used for loading image in activity. But if you want to load image in gridview/recyclerview or view pager etc. where same view holder is used, you might get an issue where onBitmapLoaded() is not called (as the view is recycled and Picasso only keeps a weak reference to the Target object). Here is a link to solve this problem.