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

Glide.with(context.getApplicationContext())
                        .load(Your Path)   //passing your url to load image.
                        .override(18, 18)  //just set override like this
                        .error(R.drawable.placeholder)
                        .listener(glide_callback)
                        .animate(R.anim.rotate_backward)
                        .centerCrop()
                        .into(image.score);

Answer 2

Better you can get idea from this Library or Use this library.

2 ways to do Blur and Original image in Android.

1) Initially load Blur Image Server URL path and once get success bitmap caching mechanism to load Original(Large) Image Server URL path.

Point 1 is possible, I got answer for you( Ask your server team to get Blur image or Low quality image to make blur and then load large image). APK Link

Glide.with(mContext)
    .load(image.getMedium())
            .asBitmap()
            .diskCacheStrategy(DiskCacheStrategy.ALL)
            .into(new SimpleTarget<Bitmap>() {
                @Override
                public void onResourceReady(Bitmap bitmap, GlideAnimation anim) {
                    // Do something with bitmap here.
                    holder.thumbnail.setImageBitmap(bitmap);
                    Log.e("GalleryAdapter","Glide getMedium ");

                    Glide.with(mContext)
                            .load(image.getLarge())
                            .asBitmap()
                            .diskCacheStrategy(DiskCacheStrategy.ALL)
                            .into(new SimpleTarget<Bitmap>() {
                                @Override
                                public void onResourceReady(Bitmap bitmap, GlideAnimation anim) {
                                    // Do something with bitmap here.
                                    holder.thumbnail.setImageBitmap(bitmap);
                                    Log.e("GalleryAdapter","Glide getLarge ");
                                }
                            });
                }
            });

2) Fresco by Facebook is a new image library for Android. Here’s the official blog post introducing the library. It supports the streaming of progressive JPEG images over the network which can be really helpful to display large images over slow connections. One can see the image gradually improve in quality.

Progressive JPEGs with Facebook Fresco

Answer 3

with Glide v4:

Glide.with(context)
    .load(URL)
    .thumbnail(0.1f)
    .into(image_view)

Answer 4

glide has a direct way of doing this :

val thumbnailRequest = Glide.with(this)
        .load("https://picsum.photos/50/50?image=0")

Glide.with(this)
        .load("https://picsum.photos/2000/2000?image=0")
        .thumbnail(thumbnailRequest)
        .into(imageThumbnail)

from the blog:

Thumbnails are a dynamic placeholders, that can be loaded from the Internet. Fetched thumbnail will be displayed until the actual request is loaded and processed. If the thumbnail for some reason arrives after the original image, it will be dismissed.

Answer 5

use BitmapFactory.Options.inSamleSize to load a downsampled version of the image. Then load the bigger image and do a fade transition using a TransitionDrawable

Hope this will Helps you ! Cheers !

Answer 6

You must have a small-size and a full-size image on your server. You can use Firebase Resize Image Extension if you are using Firebase as your backend. Once you have a small-size image URL and a full-size image URL you can use Glide like this:

            Glide.with(context)
            .load(fullSizeImageUrl)          
            .thumbnail(
                Glide.with(context)
                    .load(smallSizeImageUrl)
            ).into(imageView)

You'll get that blurry effect as the small-size image will be blurry

According to Glide Doc: .thumbnail() loads and displays the resource retrieved by the given thumbnail request if it finishes before this request. Best used for loading thumbnail resources that are smaller and will be loaded more quickly than the full size resource. There are no guarantees about the order in which the requests will actually finish. However, if the thumb request completes after the full request, the thumb resource will never replace the full resource.