1

I am working on a chat app that is using Firebase realtime database and storage.

Currently I work with this approach to send and receive images:

  • On Send Button Click: Intent for the gallery >> uploading the image to Firebase storage >> storing the image URL in the messages child in Firebase Database.
  • In the adapter when the type is set to "image"in a child in messages, I retrieve the image to an ImageView with Picasso and its offline capabilities.

The problem is that high quality images are more than 1 MB. Once they are sent the app get very slow when scrolling the chat then some images disappears from the ImageView.

Is there anyway to make the image retrieving more smoothly and faster?

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Kurdo
  • 13
  • 2
  • 1
    Welcome to StackOverFlow, its vital to include code you use/try in the question. take sometime and see [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) – Mohammad Kanan Mar 13 '18 at 01:05

1 Answers1

1

If you are using Glide then you can resize and scale your Image. Assuming you are using Glide 4.x, please use one of the following options:

First would be to use override(x, y) method where you resize the image to specific dimensions:

GlideApp  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .override(600, 200)
    .into(imageViewResize);

Second would be to use override(x, y) together with centerCrop(). This is a cropping technique that scales the image so that it fills the requested bounds and then crops the extra.

GlideApp  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .override(600, 200)
    .centerCrop()
    .into(imageViewResizeCenterCrop);

The third would be to use fitCenter(), which is a cropping technique that scales the image so that both dimensions are equal to or less than the requested bounds of your ImageView. The image will be displayed completely, but might not fill the entire ImageView.

GlideApp  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .override(600, 200)
    .fitCenter() 
    .into(imageViewResizeFitCenter);
Alex Mamo
  • 130,605
  • 17
  • 163
  • 193
  • Can I do that without cropping? change the quality for example? – Kurdo Mar 14 '18 at 08:52
  • Glide already uses the default Bitmap Format which is set to `RGB_565`. You can increase this as explained [here](https://stackoverflow.com/questions/44047096/loading-images-by-glide-spoil-image-quality) to the original format, but to decrease, your images will look even worse. – Alex Mamo Mar 14 '18 at 08:59