Fade in animation while loading image Using Picasso

Question

I want to show a fade effect when image is loading on Imageview. I am using picasso to cache image and display in image view. I have searched alot for this but couldnt find any solution.

I have used earlier before and i know in some version they had .fade(int Duration) method to fade image while loading but i couldnt find this method anymore.

Here is what i am doing now

Picasso.with(context)
                .load(viewHolder.data.imageList.get(0).url)
                .networkPolicy(NetworkPolicy.OFFLINE)
                .placeholder(R.drawable.a_place_holder_list_view)
                .error(R.drawable.a_place_holder_list_view)
                .into(viewHolder.ivUser, context.loadImage(viewHolder.ivUser, viewHolder.data.imageList.get(0).url));


public Callback loadImage(RoundedImageView ivUser, String url) {
    return new callback(ivUser, url);
}

public class callback implements Callback {

    RoundedImageView imageView;
    String url;

    public callback(RoundedImageView imageView, String url) {
        this.imageView = imageView;
        this.url = url;
    }

    @Override
    public void onSuccess() {

    }

    @Override
    public void onError() {
        Picasso.with(BaseActivity.this)
                .load(url)
                .placeholder(R.drawable.a_place_holder_list_view)
                .error(R.drawable.a_place_holder_list_view)
                .into(imageView, new Callback() {
                    @Override
                    public void onSuccess() {

                    }

                    @Override
                    public void onError() {
                        Log.v("Picasso", "Could not fetch image");
                    }
                });
    }
}

Please help me i have been stuck in this for quite long time. Thanks in advance.

Amalekite

github.com/square/picasso/issues/743 , see JakeWharton answer at the bottom. use a callback. – Loriannlorianna

Answer 1

Quoting Jake Wharton's answer here:

If the image comes from anywhere except the memory cache the fade should be automatically applied.

If you check the PicassoDrawable class

boolean fade = loadedFrom != MEMORY && !noFade;
if (fade) {
  this.placeholder = placeholder;
  animating = true;
  startTimeMillis = SystemClock.uptimeMillis();
}
.
.
.
@Override public void draw(Canvas canvas) {
if (!animating) {
  super.draw(canvas);
} else {
.
.
.

fade effect is already applied for images loaded from n/w and not memory/cache and FADE_DURATION = 200f; //ms

To force fade, again quoting jake wharton's answer here:

You can specify noFade() and then always play an animation in the image loaded callback. You can also rely on the callback being called synchronously to determine if an animation needs played.

final AtomicBoolean playAnimation = new AtomicBoolean(true);
Picasso.with(context).load(..).into(imageView, new Callback() {
  @Override public void onLoad() {
    if (playAnimation.get()) {
      //play fade
      Animation fadeOut = new AlphaAnimation(0, 1);
      fadeOut.setInterpolator(new AccelerateInterpolator());
      fadeOut.setDuration(1000);
      imageView.startAnimation(fadeOut);

      Animation fadeOutPlaceholder = new AlphaAnimation(1, 0);
      fadeOutPlaceholder.setInterpolator(new AccelerateInterpolator());
      fadeOutPlaceholder.setDuration(1000);
      placeHolderImageView.startAnimation(fadeOutPlaceholder);
    }
  }
  //..
});
playAnimation.set(false);

Byssinosis

fade effect is already applied to images loaded from n/w. Fade duration is 200ms. Otherwise as @Hourglass stated, specify noFade() and then play an animation in the image loaded callback. – Byssinosis

Define fade-out animation and apply inside onLoad callback. See updated answer for some hints. – Byssinosis

What i want is when my image is loaded it fades from placeholder image to actual image. what this code does is after image is loaded it fades it . – Amalekite

You can have two overlapping image views. The target imageView alpha can be set to 0. The placeholder image view below it alpha can be kept at 1 and animation can be applied to both the imageviews with one changing alpha from 0 to 1 and the other from 1 to 0. Or you can use a transition drawable #10417371 Some ideas... I just provided some hints. – Byssinosis

I dont understand the AtomicBoolean use. Why setting false immediatly after calling Picasso? – Johnson

What's playAnimation for? – Dennison

Answer 2

You can simply do

Picasso.with(context).load(url).fetch(new Callback(){
            @Override
            public void onSuccess() {
                imageView.setAlpha(0f);
                Picasso.with(context).load(url).into(imageView);
                imageView.animate().setDuration(300).alpha(1f).start();
            }

            @Override
            public void onError() {

            }
        });

Johppa

Answer 3

I do this:

Picasso.get().load(url).fit().noFade().centerInside().into(imageView, new Callback() {

                @Override
                public void onSuccess() {
                    imageView.setAlpha(0f);
                    imageView.animate().setDuration(200).alpha(1f).start();
                }

                @Override
                public void onError(Exception e) {
                }
            });

Triumph

What is the setAlpha(0f); ? – Amaral