How to load gif image in placeholder of Glide/Picasso/Ion etc

Question

Not able to find perfect solution for loading a gif image in placeholder

Glide
     .with(context)
     .load("imageUrl")
     .asGif()
     .placeholder(R.drawable.gifImage) 
     .crossFade()
     .into(imageView)

Tried asGif() property of Glide version 3.7.0 too. But no Luck!

Arresting

What will you prefer to load gif images from which library Glide/Ion...I have used both, Glide load gif very slow while Ion load 2x time faster than glide library..But in terms of image quality Glide is better from the Ion....What your suggestion on it @Dinesh ... – Sanbenito

Check this answer: #42733367 – Shyamal

Answer 1

Here is The Best Way..

 Glide.with(getContext()).load(item[position])
                .thumbnail(Glide.with(getContext()).load(R.drawable.preloader))
                .fitCenter()
                .crossFade()
                .into(imageView);

Bittner

Fantastic! Working great. – Serve

Not fit me, as if you load without network, thumbnail image is always showing, but err image never show – Fuddyduddy

Answer 2

I do it like mentioned below:

The idea is to create the gif using transition drawables & set the scale type to as required by the place holder initially & attach listener to change the scale type again to as required by the downloaded image after the image is downloaded. (last step can be skipped if you don't require it)

//ivBuilderLogo = Target ImageView
//Set the scale type to as required by your place holder
//ScaleType.CENTER_INSIDE will maintain aspect ration and fit the placeholder inside the image view
holder.ivBuilderLogo.setScaleType(ImageView.ScaleType.CENTER_INSIDE); 

//AnimationDrawable is required when you are using transition drawables
//You can directly send resource id to glide if your placeholder is static
//However if you are using GIFs, it is better to create a transition drawable in xml 
//& use it as shown in this example
AnimationDrawable animationDrawable;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
     animationDrawable=(AnimationDrawable)context.getDrawable(R.drawable.anim_image_placeholder);
else
     animationDrawable=(AnimationDrawable)context.getResources().getDrawable(R.drawable.anim_image_placeholder);
animationDrawable.start();

Glide.with(context).load(logo_url)
                   .placeholder(animationDrawable)
                   .listener(new RequestListener<String, GlideDrawable>() {
                        @Override
                        public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource)
                        {
                           return false;
                        }

                        //This is invoked when your image is downloaded and is ready 
                        //to be loaded to the image view
                        @Override
                        public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource)
                        {   
                        //This is used to remove the placeholder image from your ImageView 
                        //and load the downloaded image with desired scale-type(FIT_XY in this case)
                        //Changing the scale type from 'CENTER_INSIDE' to 'FIT_XY' 
                        //will stretch the placeholder for a (very) short duration,
                        //till the downloaded image is loaded
                        //setImageResource(0) removes the placeholder from the image-view 
                        //before setting the scale type to FIT_XY and ensures that the UX 
                        //is not spoiled, even for a (very) short duration
                            holder.ivBuilderLogo.setImageResource(0);
                            holder.ivBuilderLogo.setScaleType(ImageView.ScaleType.FIT_XY);
                            return false;
                        }
                    })
                    .into( holder.ivBuilderLogo);

My transition drawable (R.drawable.anim_image_placeholder) :

(not required if using a static image)

<?xml version="1.0" encoding="utf-8"?>
<animation-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/loading_frame1" android:duration="100" />
    <!--<item android:drawable="@drawable/loading_frame2" android:duration="100" />-->
    <item android:drawable="@drawable/loading_frame3" android:duration="100" />
    <!--<item android:drawable="@drawable/loading_frame4" android:duration="100" />-->
    <item android:drawable="@drawable/loading_frame5" android:duration="100" />
    <!--<item android:drawable="@drawable/loading_frame6" android:duration="100" />-->
    <item android:drawable="@drawable/loading_frame7" android:duration="100" />
    <!--<item android:drawable="@drawable/loading_frame8" android:duration="100" />-->
    <item android:drawable="@drawable/loading_frame9" android:duration="100" />
    <!--<item android:drawable="@drawable/loading_frame10" android:duration="100" />-->
</animation-list>

Thyrsus

Answer 3

Use ProgressBar as loading gif:

Glide.with(context).
            load(url)
            .listener(new RequestListener<String, GlideDrawable>() {
                @Override
                public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
                    progressBar.setVisibility(View.GONE);
                    return false;
                }

                @Override
                public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                    progressBar.setVisibility(View.GONE);
                    return false;
                }
            })
            .crossFade(1000)
            .into(imageView);

Entablature

How is progressBar a gif? – Current

Answer 4

(static_placeholder is, say, the first frame of the GIF)

Glide...
.load("http://...")
.placeholder(R.drawable.static_placeholder)
.thumbnail(Glide.with(...).load(R.raw.gif_placeholder))
.dontAnimate() //so there's no weird crossfade

Placeholder is set much earlier than thumbnail, so it prevents "long" empty white ImageViews. You can skip the placeholder to simplify though.

or another option is to use AnimationDrawable(you can convert your GIF to AnimationDrawable from here):

AnimationDrawable animPlaceholder = (AnimationDrawable) ContextCompat.getDrawable(activity, R.drawable.animatedDrawable);
animPlaceholder.start(); // probably needed
Glide...
.load("http://...")
.placeholder(animPlaceholder)

Ref: link

Phenetole