A quick study of Android Image loading Libraries

michael afolabi
May 29, 2017 · 4 min read

In the beginning…

So you have this image you want to load from an API and display it in your App. Well there are two ways of doing this, you can decided to use library to handle it or handle everything yourself.

I mean how complicated can it be right ? you just want to load an image from an API and display it.

So you start by …

URL url = new URL(image_url);
HttpURLConnection con= (HttpURLConnection) url.openConnection();
Bitmap bMap = BitmapFactory.decodeFile(con.getInputStream);
mImageView.setImageBitmap(bMap);

ooh, but you cant make a network on the UI thread

Then this…

private class DownloadImageTask extends AsyncTask<URL,Bitmap,nul> {
     protected Bitmap doInBackground(URL... urls) {
       URL url = new URL(image_url);
       HttpURLConnection con= (HttpURLConnection) url.openConnection();
     return BitmapFactory.decodeFile(con.getInputStream);
     }
     protected void onPostExecute(Bitmap result) {
        mImageView.setImageBitmap(result)
     }
 }

ooh nice, but what happens when there is no network connection

damn!! Then you have to this

ConnectivityManager cm = (ConnectivityManager) context.getSystemService(Context.CONNECTIVITY_SERVICE);
  NetworkInfo info = cm.getNetworkInfo(context);
  if(info != null && info.isConnected()){
     new DownloadImageTask().execute(image_url))
  } else{
    mImageView.setImageResources(error_image)}

Impressive, but what about applying transformation??

How about rotating the image??

How about about caching the image to reduce the network call??

But life does not have to be this complicated, all we want to do is just load image from url. This is where libraries thrives, they hide all this complexity from us.

For this tutorial we will be looking at three image loading library for android, even though these libraries solve the same problem they use different approach. Selecting the best library to fit your use case could be daunting task at times, but no need to panic we will be dissecting each of this libraries.

Glide

Glide is developed by bumptech and its one of the most popular mage library out there, i mean you can not expect less from a product recommended by Google, its currently in version 4.0.0. Glide is about 476 kb in size and has a method count of 2879.

To use it you will have to add the this your project dependence

compile 'com.github.bumptech.glide:glide:3.7.0'

Getting started with glide is as easy as follows

Glide
    .with(mContext)
    .load(img_url)
    .centerCrop()
    .placeholder(R.drawable.loading_spinner)
    .into(mImageView);

Additional configuration for glide

.error(Image_uri); this is the image shown in case of error
.fitcenter(); this makes the image to be centered in the imageView
.centerCrop()
.fades()
.transform()
.fetch()

Pros

  • Very easy to use.
  • it support gif loading.
  • it requires little configuration.
  • its been actively maintained.
  • it download image with the Size of the view been loaded into, this will reduce time and computation required to display the image.

Cons

  • its kind of large in terms of size and memory.
  • it requires large amount of caching space cause it saves different sizes of image separately.

Picasso

Picasso is named after the Spanish artist Pablo Picasso and its developed by square. its uses Fluent Api just like Glide, this library is not only powerful and fast but also very light in weight, its 121 kb in size with a total method count of 849. its currently in it version 2.5.2

To use Picasso in your project add the this to your dependency

compile 'com.squareup.picasso:picasso:2.5.2'

Using Picasso is very easy too

Picasso
   .with(mContext)
   .load(img_url)//insert the image url
   .placeholder(R.drawable.user_image)
   .into(mImageView);

Additional configurations

.rotate(float degree)
.resize(int height,int breath)
.fade()
.transform(Transformation trans)
.centerCrop
.fit()

Pros

  • Small size and method count
  • very easy to use
  • little configuration to set up
  • very easy to configure with the builder class

Cons

  • it cannot load gif
  • it cannot be used to load a very large file
  • it download and cache the the original image which will be re-sized to the view its been loaded to, this is an additonal computation at display time.

Fresco

This is developed by Facebook, its built to present the best optimization for image loading and processing, when you have over one billion user to tend to, you cant possibly settle for less. As the popular adage has it “with greater power comes greater resposibility”, Fresco is freaking 1.6mb and has a method count of 5714 thats huge if you are working against the 64k method count.

Getting started with Fresco

compile 'com.facebook.fresco:fresco:1.3.0'

You will use the custom view SimpleDraweeView instead of imageView

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="130dp"
    android:layout_height="130dp"
    fresco:placeholderImage="@drawable/my_drawable"
  />

Then you just specify the image url

Uri uri = Uri.parse(image_url);
draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);

pros

  • its has a custom view for its configuration, which makes it very easy to use
  • its well optimized in terms of memory usage and allocation
  • its has a lot of configuration option
  • its has a very verbose documentation
  • its easy to configure
  • its load progressive JPEG,webP, gif
  • it does not require alot configuration to get started

Cons

  • its very large
  • its documentation are kind of complicated

Resources

Other Notable Libraries