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.

Solution 1

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

Solution 2

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

Comments

[onosendai]

Thank you for quick answer. Works perfectly.

[Raanan]

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.

[moondroid]

To enable crossfading between 2 images use td.setCrossFadeEnabled(true), because crossfading is disabled by default.

[Carlos López Marí]

Works like a charm.