What is the best approach to send and receive the big image files in a Firebase/Android chat app

Question

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?

Answer 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);