How to load, process and cache image in Android using Glide

In this tutorial you can read about Glide. The advanced library for image uploading, caching, rotating and small memory usage.

Android SDK does not have a good way to get images from web and display it to android app. To solve this problem, numbers of third party libraries are available.

  • Picasso
  • Glide
  • Fresco
  • UImageLoader

You can read some comparison here and here.

Glide features

  • supports thumbnail
  • supports animations
  • animated GIF decoding, you can load GIF animation into ImageView
  • supports OkHttp and Volley library
  • display video stills
  • placeholder can be added before loading the original image
  • any custom image can be shown if error occurs while loading the original image

Glide offers some additional advantages over other image loading libraries. For example, when loading an image, Glide will cache both a version of the image in its original size as well as one that’s the size of its intended ImageView. This means Glide loads the image noticeably faster than libraries like Picasso because no resize is necessary. Additionally, Glide works with Android’s ImageView (Facebook’s Fresco uses DraweeView and Volley uses NetworkImageView).

Getting started with Glide is as easy as using Picasso. Their API also look quite similar.

Add the Gradle dependency to your android module build.gradle. Glide also needs android support library v4. Also I'm going to use CircleImageView for circle effect for image.

dependencies {
    compile 'com.github.bumptech.glide:glide:3.7.0'
    compile 'com.android.support:support-v4:23.4.0'
    compile 'de.hdodenhof:circleimageview:2.1.0'
}

The way to load an image to ImageView with Glide is quite the same as Picasso.

Glide.with(context).load(url).into(imageView);

Although it looks quite the same but in details Glide is designed far better since with doesn't accept only Context but also Activity and Fragment. The brilliant benefit from passing Activity/Fragment to Glide is: image loading would be integrated with Activity/Fragment's lifecycle for example, pause loading in Paused state and automatically resume on Resumed state.

The way Glide loads an image to memory and do the caching is better than Picasso which let an image loaded far faster. In addition, it also helps preventing an app from popular OutOfMemoryError. You can read more about memory usage here.

Load image from server server

Glide.with(context).load(url).into(imageView);

Loading image from res/drawable folder

Glide.with(this).load(R.drawable.IMAGE_NAME).into(imageView);

Show placeholder image

Glide.with(this)
   .load(url)
   .placeholder(R.drawable.PLACEHOLDER_IMAGE_NAME)
   .into(imageView);

Transform image

Glide.with(this)
   .load(url)
   .override(200, 200)
   .centerCrop()       
   .into(imageView);       

Fade on load

Glide.with(this)
    .load(url)
    .centerCrop()
    .placeholder(R.drawable.LOADING_SPINNER)
    .crossFade()
    .into(imageView);

Let's build simple application that will demonstrates Glide usage

Layout file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical">

    <de.hdodenhof.circleimageview.CircleImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_gravity="center_horizontal"
        android:id="@+id/img"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/placeholder_img"
        app:civ_border_width="2dp"
        app:civ_border_color="#FFFF4081"/>
</LinearLayout>

In MainActivity file define variable for ImageView and set image URL for load method of Glide. Following is the complete code of java activity file.

public class MainActivity extends AppCompatActivity {
    CircleImageView img;
    String url = "http://snovadoma.ru/media/photos/04f631d079c2171827cae83e2ee61c52.jpg";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        img = (CircleImageView) findViewById(R.id.img);
        Glide.with(this)
            .load(url)
            .placeholder(R.drawable.placeholder_img)
            .crossFade()
            .into(img);       
    }
}

Result

android_glide.png

We can use transformations for crop, blur, color, mask.

Bitmap format

Glide’s default bitmap format is set to RGB_565 so image quality will be poorer compared with Picasso. But the advantage is that it will consume less memory. If you are ok with image quality, don’t change the bitmap format else change it to ARGB_8888 as below.

public class GlideConfiguration implements GlideModule {
    @Override
    public void applyOptions(Context context, GlideBuilder builder) {
        builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);
    }
    @Override
    public void registerComponents(Context context, Glide glide) {
        // register ModelLoaders here.
    }
}

Then, add meta-tag into AndroidManifest.xml

<meta-data android:name="com.example.proft.GlideConfiguration"
           android:value="GlideModule"/>

If you run the app, images will look better now.

Image caching

Glide creates cached images per size while Picasso saves the full image and process it. If you are trying to load image (500x500) into ImageView (200x200). Glide will download full image, then resize it to 200x200, then it will cache and load into ImageView while Picasso will download full image then it will cache full image then resize it to 200x200 and load it into ImageView.

Next time when you request same image (500x500) to load into ImageView (100x100), Glide will again download the full image (500x500) then resize it to 100x100 then cache and load into ImageView. Picasso, unlike Glide, picks up the cached full size image and resize and load it into ImageView (100x100). Picasso doesn’t download same image again.

However, you can configure Glide to cache full size and resized image as below.

Glide.with(this)
    .load(url)
    .diskCacheStrategy(DiskCacheStrategy.ALL)
    .into(imageView);       

Useful links

comments powered by Disqus