How to fade in picture in ImageView loaded from url

Question

I would like to apply a fade-in animation to an ImageView to create the effect that the image, which is loaded from a url, fades in when the download is completed.

I know how to download an image from a url to an ImageView, like in this answer, and I know how to apply a fade-in animation to an imageView like here.

This attempt

Drawable d = ImageUtils.fetchDrawable("the url");
imageView.setImageDrawable(d);
imageView.startAnimation(fadeInAnimation);

results in a blink effect (see, not see, fade in to see). Reversing the order of the two last lines also results in a blink.

I've googled and searched SO for a solution in the form of a callback / listener - something like this:

imageView.setOnLoadCompleteListener...

to register the loading complete event in ImageView but I haven't found anything along those lines.

I'd be grateful for any pointers to a solution on how to implement this effect.

score 33 · Answer 1 · edited Oct 04 '13 at 08:02

33

You can use: TransitionDrawable, simple code as follows:

        // Transition drawable with a transparent drwabale and the final bitmap
        final TransitionDrawable td =
                new TransitionDrawable(new Drawable[] {
                        new ColorDrawable(Color.TRANSPARENT),
                        new BitmapDrawable(mResources, bitmap)
                });
        // Set background to loading bitmap
        imageView.setBackgroundDrawable(
                new BitmapDrawable(mResources, mLoadingBitmap));

        imageView.setImageDrawable(td);
        td.startTransition(FADE_IN_TIME);

edited Oct 04 '13 at 08:02

Patrick Boos

6,789
3
35
36

answered Apr 04 '13 at 11:55

Autobots

1,264
15
14

6

This works great, if you have already another image in the ImageView as placeholder you can call getDrawable() and use it instead of the Transparent ColorDrawable which will create a transition between the two images. – Raanan Oct 30 '13 at 17:46
3

To enable crossfading between 2 images use td.setCrossFadeEnabled(true), because crossfading is disabled by default. – moondroid Jun 20 '14 at 12:56

score 2 · Accepted Answer · answered May 02 '12 at 15:34

set the ImageView visibility to INVISIBLE or GONE set setAnimationListener on your animation. and when the onAnimationEnd change the visibility of the ImageView.

fadeInAnimation.setAnimationListener(new AnimationListener() {
        @Override
        public void onAnimationEnd(Animation arg0) {

           // let make your image visible


        }

        @Override
        public void onAnimationRepeat(Animation animation) {}
        @Override
        public void onAnimationStart(Animation animation) {}
    });

Works like a charm. – Carlos López Marí Nov 15 '21 at 20:10 — Carlos López Marí, Nov 15 '21 at 20:10

score 0 · Answer 3 · answered Nov 15 '21 at 20:13

Just use the onPostExecute method of that answer you mentioned and trigger the animation there (when the image is actually loaded and ready):

 protected void onPostExecute(Bitmap result) {

    bmImage.setImageBitmap(result);
    Animation myFadeInAnimation = AnimationUtils.loadAnimation(context, R.anim.fadein);
    bmImage.startAnimation(myFadeInAnimation);
}

How to fade in picture in ImageView loaded from url

3 Answers3

Linked