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.

https://github.com/square/picasso/issues/743 , see JakeWharton answer at the bottom. use a callback. — HourGlass, Dec 28 '15 at 06:40

random · Accepted Answer · 2015-12-28T13:01:11.900

17

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);

edited Dec 28 '15 at 13:01

answered Dec 28 '15 at 06:37

random

10,238
8
57
101

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. – random Dec 28 '15 at 07:04
Define fade-out animation and apply inside `onLoad` callback. See updated answer for some hints. – random Dec 28 '15 at 07:14
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 . – Android Dec 28 '15 at 12:56
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 http://stackoverflow.com/questions/10416871/how-to-fade-in-picture-in-imageview-loaded-from-url Some ideas... I just provided some hints. – random Dec 28 '15 at 13:11
1

I dont understand the AtomicBoolean use. Why setting false immediatly after calling Picasso? – GPack Aug 29 '16 at 20:47
What's `playAnimation` for? – Kimi Chiu May 29 '17 at 04:41

Qamar · Answer 2 · 2017-09-27T12:54:56.517

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() {

            }
        });

score 3 · Answer 3 · answered Aug 06 '18 at 14:42

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) {
                }
            });

answered Aug 06 '18 at 14:42

Mateusz Kaflowski

2,221
1
29
35

What is the setAlpha(0f); ? – Europa Feb 11 '19 at 19:08

Fade in animation while loading image Using Picasso

3 Answers3

Linked