I need to download several images to directory so that content can be accessed offline

Question

I get some JSON data which contains some food menu items

Please note: this is just a sample, there are more than 2 images sometimes and many more menu items in the array!

{
  "menu": [
    {
      "url": "/api/v1/menu/1",
      "name": "Best Food",
      "description": "really nice food",
      "opening_time": "every day from 9am to 6pm",
      "contact_email": "[email protected]",
      "tel_number": "+54 911 3429 5762",
      "website": "http://bestfood.com",
      "images": [
        {
          "url": "https://blahblah/image1.jpg"
        },
        {
          "url": "https://blahblah/image2.jpg"
        }
      ]
    },

  ]
}

Each item has some info and an array of image URLs.

I am using the Glide image library to process these images and Retrofit 2.0 to download the JSON data from the endpoint. All is well at this point.

However, I need to store this downloaded data for offline access.

Currently, I am using ORM Lite on my existing models to store all the JSON data in a database. This part is OK.

However, in my database I only store the image URLs as I was told that it is not good approach to store images (as blob) in the database.

So there is a section in my app to view the saved menu's with an option to download it for offline access if the user chooses to.

It is worth mentioning at this point, that I already have the raw menu information in the database because the user would have to view the menu in the first place to get it in DB.

But the problem is the images.

This is where I do not know how to proceed, but I list the solutions and problems that I am thinking about and was hoping people could advise me on what is the best course of action is.

1. Use a service to download the images. This I feel is mandatory because I do not know how many images there will be, and I want the download to proceed even if user exits the app

2. Glide has a download only option for images and you can configure where its cache is located (internal private or external public) as I read here and here. Problem is I do not feel comfortable with setting the cache size as I do not know what is required. I would like to set unlimited.

3. I need to be able to delete the saved menu data especially if its saved on the external public directory as this is not removed when the app is deleted etc. or if the user chooses to delete a saved menu from within the app. I was thinking I could store the file image URIs or location of the entire saved menu in database for this but not sure if this is a good way

4. I read in different sources and answers that in this use case for just caching images to SD card etc. that I should specifically use a network library to do so to avoid the allocation of a bitmap to heap memory. I am using OK HTTP in my app at the moment.

Answer 1

I'm using ormlite to store objects with urls too, I have a synchronization after the "sign in" screen on my app, on my experience I really recommend this library https://github.com/thest1/LazyList

It's very simple:

ImageLoader imageLoader=new ImageLoader(context);
imageLoader.DisplayImage(url, imageView);

This library saves the image using the url on the external sd with basic and simple configuration about the memory issues, so if you actually have two or more items with the same url this library works perfectly, the url and imageView are the parameters, if the image is not on the phone begins a new task and put the image in the view when the download is finish, and btw this library also saves the images encoded, so these pictures don't appear on the gallery. Actually you only need these files to implement the library:https://github.com/thest1/LazyList/tree/master/src/com/fedorvlasov/lazylist

If you wanna manipulate some files, you can change the folder name in the FileCache class:

 public FileCache(Context context){
    //Find the dir to save cached images
    ...
        cacheDir=new File(android.os.Environment.getExternalStorageDirectory(),"LazyList");
    ...
}

Where "LazyList" is the folder name, and them you can delete, move, etc. Delete sample:

 /**
 * This method delete a file if exist
 */
public static void deleteFile(File file){
    if(file!=null && file.exists()) {
        file.delete();
    }
}

Now I learned more about memory cache and the allocation of a bitmap to heap memory, for the first time manipulating images online and offline, I recommend this library, also when you learn more about it, you can implement and edit the library to your needs.