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

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.