Android - Efficient way to load multiple images from remote server

Question

I have an Android application that would retrieve data (images+text) from a php remote server and display them in a GridView. I am doing the operation in the background using Loaders. I have separate connections for images and texts since retrieving images would take longer and I want to display the texts immediately. The texts are encoded with Json on the server after being retrieved from MySQL. On the app, I am parsing the Json Objects and displaying the texts as I need.

The problem is with images. I am not sure if encoding the images with Json would be a good idea. Also the images are saved as blob in the database, in order to encode them with Json I need to use base64_encode() before which is not efficient. I have seen many posts about this, but it’s always a simple example when you have to get one image. In my case I’ll be retrieving up to 30 small-size images.

My question is, I can proceed with what I just presented, but it seems that there should be a better way to do this. What do you think about this? Am I going the wrong way?

Also I was thinking if I can display each image separately in the gridview once it is ready (not waiting for all the images to be ready) just like in the “Google Play App”’s GridView. What approach can I take to achieve this?

Thanks in advance folks!

Answer 1

IMO - there are 2 issues , moving the images across the network to the client and getting them loaded.

Assuming that you are using http as the protocol, you should have a multithreaded solution for http as is available in apache httpclient package. That will get the pictures to the phone fast.

Then , you have to present the pics by getting them into memory and a cache. Here you can consider what 'gallery3D' app does with its grid and bitmaps but its pretty complicated to read thru that code.

check out - http://developer.android.com/training/displaying-bitmaps/load-bitmap.html

check out code samples for loading thumbs from bitmaps.

Answer 2

Best approach in my eyes would be to download the image files as normal image files via a HTTP get request. Make sure it is threaded of course, and have a thread pool that you can queue up requests into, and have 2-3 threads go through and download.

In terms of saving them, I would personally move away from saving to blob in a database, and opt to save them to the persisted storage in your application's private directory. Saving the image files with their filename as their id in the database you have created will be much quicker for loading them back in.

You can also hold a reference to the ImageView, and have it display a place-holder initially, with a successful HTTP request replacing the bitmap of the ImageView with the one you have just downloaded/read in from storage.

You can also do some image caching within the HTTP request you make.

ImageView myImageView = findViewById(R.id.testImage);
URL url = new URL("http://www.website.com/image.jpg");
URLConnection connection = url.openConnection();
connection.setUseCaches(true);
Object response = connection.getContent();
if (response instanceof Bitmap) {
  Bitmap bitmap = (Bitmap)response;
  myImageView.setBitmap(bitmap);
} 

It also may be helpful to lookup the uses of the LRUCache, which performs a lot of caching functionality for you.

Check out this link at the Android Developer site for a good in depth guide to image caching

Edit: You can use the advice in Robert Rowntree's answer to load bitmaps more efficiently to cut down on your memory use as well. The link provided details loading of bitmaps using less memory, something that would work well if you are creating thumbnails from larger images downloaded over the web and saved off to local storage.