How can i download images like Whatsapp from cloud storage

Question

I want to download images like WhatsApp from cloud storage like when the user is in Recyclerview he sees images in low quality but when he click on the image it downloads in full resolution currently what i am doing is using glide library to download images.

Currently what i am doing is but it downloads the images in recyclerview in full resolution.

 if (user.getImageURL().equals("default")) {
                profile_image.setImageResource(R.drawable.user2);
            } else {
                //and this
                Glide.with(getApplicationContext()).load(user.getImageURL()).into(profile_image);
            }

To implement this behaviour, you need to provide Glide with a low quality image URL first then when user clicks on the item, you provide the high quality image URL to Glide. Note that Glide offers an API to specify [thumbnail image loading](https://bumptech.github.io/glide/doc/options.html#thumbnail-requests). See also [this question](https://stackoverflow.com/questions/44772219/how-to-load-low-quality-and-then-high-quality-image-afterwards-in-android-just) — david, Apr 26 '20 at 14:27

score 1 · Answer 1 · answered Apr 26 '20 at 10:30

Use CustomTarget from Glide to pass the dimensions of your image view so that Glide can scale down the images to the specified size.

Glide.with(this)
    .load(IMAGE_URL)
    .into(object : CustomTarget<Drawable>(targetImageWidth, targetImageHeight) {
        override fun onLoadCleared(placeholder: Drawable?) {
            // called when imageView is cleared. If you are referencing the bitmap 
            // somewhere else too other than this imageView clear it here
        }

        override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
            image.setImageDrawable(resource)
        }
    })

But what if you only know one dimension of the target container and don’t know the aspect ratio of the image? Are you forced to use the original image size? It turns out there may be a way to work around this. In this case, just set the other dimension which you do not know to 1, and Glide will automatically scale down your image.

imageView.viewTreeObserver.addOnGlobalLayoutListener {
    Glide.with(this)
            .load(TargetActivity.IMAGE_URL)
            .into(object : CustomTarget<Drawable>(imageView.width, 1) {
                // imageView width is 1080, height is set to wrap_content
                override fun onLoadCleared(placeholder: Drawable?) {
                    // clear resources
                }

                override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
                    // bitmap will have size 1080 x 805 (original: 1571 x 1171)
                    imageView.setImageDrawable(resource)
                }
            })
}

score 1 · Accepted Answer · answered Apr 26 '20 at 10:35

1

The simplest way is to create a low-quality version of the image whenever users upload an image and show the low-quality image first.

Create a firebase cloud function trigger on upload which will take the uploaded file and create a low-quality version of it and upload that to the storage. An official sample for this is given here
Load only the low-quality image into the images in recyclerview. When the user taps on the image, show it in full screen and use glide to load the full image and set glide's thumbnail option to load the low-quality image until full image loads from the internet. With Glide 4.11 it will look something like this-

Glide.with(view)
  .load(fullImageReference)
  .thumbnail(
     Glide.with(view)
          .load(lowImageReference)
  .into(imageView)

answered Apr 26 '20 at 10:35

Akshay Jain

884
5
19

1

Will it be alright if i upload a smaller version like around 10-50 kb of size for the thumbnail when i upload the pic rather than using Firebase cloud function – Shivam Singh Apr 26 '20 at 15:11
1

Yes, cloud function is just an automated way to create the low quality image. – Akshay Jain Apr 26 '20 at 15:15
1

One thing more i wanted to ask what should i keep the size of each thumbnail – Shivam Singh Apr 26 '20 at 16:15
1

That depends on your requirements. As per my experience, a 200x200 pixel image should be enough for an image like Whatsapp. And if I have answered your question, please mark it as accepted by clicking on the tick symbol. – Akshay Jain Apr 26 '20 at 16:29

How can i download images like Whatsapp from cloud storage

2 Answers2