Android Glide: Show a blurred image before loading actual image

Question

I am developing an Android app which displays full screen images to the user. Images are fetched from the server. I am using Glide to show the image. But I want to display a ver

Answer 1

Use BitmapFactory.Options.inSampleSize to make a downsampled version of the image, and upload both versions. Load the sample image (which should take less time) and when the bigger version is downloaded, switch to that. You could also use a TransitionDrawable to make a fade transition.

Answer 2

this is not a perfect way but it will be easiest way to make it.

make placeHolder image as blur and set it into glide. then always it will show blur image and then after load the actual image it will appear.

you can refer this code to use glide.

//crete this method into your Utils class and call this method wherever you want to use.
//you can set these placeHolder() and error() image static as well. I made it as comment inside this method, then no need to use [placeHolderUrl and errorImageUrl] parameters. remove it from this method.
public static void loadImage(final Activity context, ImageView imageView, String url, int placeHolderUrl, int errorImageUrl) {
    if (context == null || context.isDestroyed()) return;

    //placeHolderUrl=R.drawable.ic_user;
    //errorImageUrl=R.drawable.ic_error;
        Glide.with(context) //passing context 
                .load(getFullUrl(url)) //passing your url to load image.
                .placeholder(placeHolderUrl) //this would be your default image (like default profile or logo etc). it would be loaded at initial time and it will replace with your loaded image once glide successfully load image using url.
                .error(errorImageUrl)//in case of any glide exception or not able to download then this image will be appear . if you won't mention this error() then nothing to worry placeHolder image would be remain as it is.
                .diskCacheStrategy(DiskCacheStrategy.ALL) //using to load into cache then second time it will load fast.
                .animate(R.anim.fade_in) // when image (url) will be loaded by glide then this face in animation help to replace url image in the place of placeHolder (default) image.
                .fitCenter()//this method help to fit image into center of your ImageView 
                .into(imageView); //pass imageView reference to appear the image.
}