Using Glide ? Few tips to be a pro

I have been using Glide for over a year now and its really well-designed library for image loading. You could find various articles on comparison but this article will go through some known issues and best practices. Glide version 3.7.0 is used in this article.

1. How to clear the cache of specific Image URL

In Glide cache files names given on the basis of their image URL and are hashed keys so there is no way to simply remove the cache of a specific image. Glide uses LRU cache so when the disk cache is full, the least recently used image gets removed. We can customize the size of the disk cache default size 250MB. You can read more about this here.

Solution :

1. Use .signature() to save last update time of file

.signature(new StringSignature(profile.imageLastUpdate))

2. Use regular intervals like daily or weekly

.signature(new StringSignature(
System.currentTimeMillis() / (24 * 60 * 60 * 1000)))

The above code would update the disk cache daily.

Ref: https://github.com/bumptech/glide/issues/624
Ref: http://stackoverflow.com/a/32483405/3746306

2. How to avoid light grey/green background on white JPEG

Usually, you won’t face this but if you are loading white background JPEG images then there is a chance. Image loads perfectly fine on the first load but after that light grey/green color tint gets added to the background replacing white. You could observe the same in the following images.

Image background color if image loaded via cache — Glide

So to avoid this we can :

1. Load image as bitmap using .asBitmap()
2. Set diskCacheStrategy as DiskCacheStrategy.SOURCE
3. Set Bitmap configuration to ARGB_8888 default is RGB_555. There are two ways to do it
   i) We can pass configuration parameter in every single load of Glide using .format(PREFER_ARGB_8888)
   So final Glide load request becomes :

glide.load(model.url)
    .asBitmap()
    .encoder(new BitmapEncoder(Bitmap.CompressFormat.PNG,100))
    .placeholder(R.drawable.res_placeholder_grey)
    .error(R.color.grey_lighter)
    .format(PREFER_ARGB_8888)
    .diskCacheStrategy(DiskCacheStrategy.SOURCE)
    .into(cat_image);

from :

glide.load(model.url)
    .placeholder(R.drawable.res_placeholder_grey)
    .error(R.drawable.res_placeholder_grey)
    .into(cat_image);

ii) Another way is to change the overall app’s configuration to ARGB_8888 so you won’t need to pass configuration param in every request. To do so create the following class

public class GlideConfiguration implements GlideModule {

    @Override
    public void applyOptions(Context context, GlideBuilder builder){
        // Apply options to the builder here.
        builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);
    }

    @Override
    public void registerComponents(Context context, Glide glide) {
        // register ModelLoaders here.
    }
}
This happens due to jpeg compression. see this for detailed explanation over the issue.

And add this to your AndroidManifest.xml replace com.demo.myglide with your package name.

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

You could read more about this here.
Ref: https://github.com/bumptech/glide/issues/927 — on a single activity
Ref: https://github.com/bumptech/glide/issues/305#issuecomment-112937571

3. How to use setTag() on Glide target Image?

In an ideal situation you shouldn’t use setTag on Glide targeted images but in case you are looking for work around then you could use

Using setTag on ImageView

All you need to do is pass an extra parameter as key. Usually, id which you have given in XML file.

imageView.setTag(R.id.bannerImageView,position);

And then extract value in the onClick method using the same key.

public void onClick(View v) {
        int position = 0;
        try {
               position = (Integer) v.getTag(R.id.bannerImageView);
            } catch (Exception e) {
              e.printStackTrace();
        }
}

Ref: http://androidhiker.blogspot.in/2015/10/how-to-resolve-glide-settag-issue.html
Ref: http://stackoverflow.com/a/35096552/3746306

4. Use Glide.with(this) everywhere

Glide takes any among the Activity, Context, or Fragment. The benefit of passing in the Fragment or Activity? Image loading, its memory management, and the pausing and resuming of GIFs are then in step with the lifecycle of the activity. So Glide attaches its life cycle with Activity, Context, or Fragment and onPause(), onStop(), onRestart() etc it behaves accordingly.

Glide.with() args

So always pass current context to the Glide in Activity or Fragment using :

Glide.with(this)

Read TWiStErRob’s more detailed answer here.

Ref: http://stackoverflow.com/a/32887693/3746306

5. Use RequestManager object in RecyclerView

We generally tend to use the sample code given in tutorials or docs as it is as long as it's working its fine for us. With Glide this could lead to using
it in Recycler view onBindViewHolder method like this :

Glide.with(context).load(...) 

Rather than doing this we can simply pass RequestManager object in Adapter’s constructor method and use it in a onBindViewHolder like :

private RequestManager glide;
public WalletsAdapter(RequestManager glide, List<MediaModel> modelList) {
    this.glide = glide;
    this.modelList = modelList;
}
@Override
public void onBindViewHolder(final WalletViewHolder holder, int position) {

    glide.load(getModel(position).url).into(holder.iconImages);
  
}

And adapter constructor would look like :

WalletsAdapter adpater = new WalletsAdapter(Glide.with(this), modelList);

I have made a sample app on the above tips have a look at the source code :

nieldeokar/GlideApp

Thanks for reading!

Tap the ❤ button if you found this article useful!

Clean app update code by storing 2 booleans into 1 int

Improve network performance of apps with DiffServ

Using Vibrate In Android