Loading and caching images in android with 1 annotation

Images are one of the most (if not the most) cached items in any application. When it comes to android there are some great libraries like Glide and Picasso that help us cache images with ease. I have used both the libraries and love them both but I wanted to eliminate the same code that I have to write for caching images into ImageViews in multiple places and achieve all that using just annotations.

TLDR;

The Glide or Picasso way of caching images:-

Glide -> 
Glide.with(this).load("http://goo.gl/gEgYUd").into(imageView);
Picasso->
Picasso.get().load("http://i.imgur.com/DvpvklR.png").into(imageView)

minimized to:-

@LoadImage(
    R.id.image_1,
    "http://i.imgur.com/DvpvklR.png"
)
lateinit var imageWithAnimation: ImageView

If I have managed to capture your attention with my insane claim that an annotation can load and cache images into an ImageView I have few more surprises about this annotation later on. 😃

How to use @LoadImage

• Add the ColdStorage library into your application following the instructions here. Make sure to use version > 4.0.0 to use the load image annotation.
• Create an activity whose layout contains at lease one ImageView. The annotation also works on fragments. For the purpose of this post, I will create an activity that will contain one ImageView and a Fragment which in turn will contain 2 ImageViews.

The layout of the Activity

The layout of the Fragment

• Now let us see how we can load data from a URL and display it inside the image views.

The code for the Activity

The code for the Fragment

Ok, now that the coding is complete let us see what is exactly happening here. The image views have been annotated with @LoadImage and we are passing the resource id and the URL into it with some additional parameters which we will look at later on. The resource id and the URL are the mandatory parameters for the annotation. If you notice, we are not actually initializing the image views with findViewById in our code because @LoadImage takes care of it for us. It will bind the view to the variable and download the image from the URL and load it onto the imageView.

The binding of the cache with the view takes place when we call Cache.bind(this). The bind method needs to be called only after the layout has been attached to the fragment (in onViewCreated method) or the activity (after setContentView).

Now, what if we want a placeholder image until the actual image is downloaded? No problem! Just pass the resource id of the placeholder drawable to the annotation.

Still not impressed? Ok how about I need to show a loading spinner and not a static placeholder? Again, just simply set a static image of a spinner as a drawable and set the enableLoadingAnimation value to true and you will get your spinner.

The result:-

Loading animation

After loading:-

Check out the repository here :- https://github.com/crypticminds/ColdStorage