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

Here is The Best Way..

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

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 viewholder.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 exampleAnimationDrawable 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>

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