Glide: Best Image Loading and Caching Library for Android

As an Android developer if you are dealing with image loading and performance issues this article will help you to understand why Glide is the best fit here.

In this blog, we will discuss, 

• What is Glide?
• How does the Glide caching mechanism work?
• How does Glide optimize app performance?
• Steps to use Glide library with Kotlin.
• Features of Glide library.
• Performance analysis: Glide vs Picasso vs Coil
• How can DhiWise help you to improve the app performance?

Android applications that fail to load media resources instantly often deliver a poor user experience. Glide offers easy-to-use APIs to build Android apps that can handle image loading and caching efficiently.

But why do we need to look into the android application for media loading and caching? The reason is, for the web apps, the browser takes the responsibility of media loading and caching, while in the case of the android app one must look into the app code.

What is Glide?

Glide is a fast and efficient open-source media management and image loading library for Android applications. It offers an extensible resource decoding pipeline, memory and disk caching, automatic resource pooling, and an easy-to-use API to improve performance.

The library supports fetching, decoding, and displaying video stills, images, and animated GIFs. Its flexible API allows developers to plugin into any network stack. 

Further, it uses a custom HttpUrlConnection based stack in the default mode but also includes utility libraries plugged into Google’s Volly project or Square’s OKHttp3 library instead. 

‍

How does the Glide caching mechanism work?

By default, Glide uses memory and disk caching to avoid unnecessary network calls, it checks into multiple layers of caches before initiating a new request call for an image.

1. Active Resources- Is this image currently visible in another view?
2. Memory Cache– Was this image recently loaded and still in memory?
3. Resource– Has this image previously been decoded, transformed, and returned to the disc cache?
4. Data– Was the image’s data previously obtained from or written to the disc cache?

Here the first two steps check for the resources in memory and if found, return the requested image immediately. The next two steps check the image on disk and return the image quickly but in an asynchronous way.

If all steps fail to locate and retrieve the image, then Glide will retrieve the image from the source.

How does Glide optimize app performance?

If you have lots of images in your app the one thing that may bother you is the OOM error (Out of Memory Error) that occurs as a result of multiple decisions that are not optimal and may add up the excessive increase in the memory footprint. 

• Glide releases bitmap when the activity is destroyed

Glide helps you to deal with the excessive memory consumption of the images in-app through memory management. Each time Glide loads images, you don’t have to worry about releasing the memory, as Glide handles that for you. 

Glide releases a bitmap when the activity or fragment passed to the Glide.with is destroyed. However, what if the activities are not destroyed in the app that has many activities with each activity holding the big images. 

• Helps to deal with deep activity stack

In such a case, Glide holds each bitmap for every pending activity for a good reason that leads to a deep activity stack. This issue can be resolved by manually canceling all pending loads using Glide.with(context). clear(view).

• Resizes the image to fit the target dimensions

The image size determines its quality. Before setting the image to the image view, Glide resizes the image so that it fits the target dimension. Image resizing not only improves the quality but also helps to achieve optimal memory.

‍

Steps for using Glide with Kotlin

To make it work with the Kotlin, follow the steps below:

1. Include Glide dependency using annotation processor.

To use the Glide library in your Android application first add the Glide dependency to your app/build.gradle file.

	dependencies {
  ...
   //glide library
    kapt'com.github.bumptech.glide:compiler:4.9.0'
    implementation ('com.github.bumptech.glide:glide:4.9.0')
  ... }

kapt is the annotation processor for Kotlin. 

2. Add Internet Permission using AndroidManifest.xml.

After adding dependency add internet permission using AndroidManifest.xml. This is required because we need the internet to download the image:

< uses-permission android:name="android.permission.INTERNET"/>

3. Include the kotlin-kaptbuild.gradlefile. plugin in your  

apply plugin: 'kotlin-kapt'

4. Create AppGlideModule implementation.

import com.bumptech.glide.annotation.GlideModule
import com.bumptech.glide.module.AppGlideModule
@GlideModule
class AppGlideModule : AppGlideModule()

5.  Build the project and then use the generated API.

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

Features of Glide Library

1. Image loading and caching

Glide enables effective loading and caching of images.  You can load images from a variety of sources such as files URIs, Android resources, bitmaps, drawables, etc. Just use the load() method to receive images.

2. Image editing and more transformations. 

You can edit photos by adding the following dependencies to your application

implementation 'jp.wasabeef:glide-transformations:3.3.0'
implementation 'jp.co.cyberagent.android.gpuimage:gpuimage-library:1.4.1'

You can use the first implementation to apply three transformations: Blur, Vignette, and Contrast. The GPU filter is implemented in the second implementation.

3. Resize image

You can resize an image using the Override() method to set the final dimension of the image.

Glide.with(this)              .load("https://moodle.htwchur.ch/pluginfile.php/124614/mod_page/content/ 4/example.jpg")
        .override(300, 200)
        .into(resizeImage);

4. Adding placeholder and  error message

If your image is unable to load due to a slow internet connection, in such a case placeholder can be used to display information about the image and handle error situations.

Glide.with(this)  .load("https://moodle.htwchur.ch/pluginfile.php/124614/mod_page/content/4/example.jpg")
        .placeholder(R.drawable.placeholder) //placeholder
        .error(R.drawable.error) //error
        .into(placeholdeImage);

5. Crop image

Also, you can crop images using the centerCrop() method.

Glide.with(CropGlide.this)  .load("https://moodle.htwchur.ch/pluginfile.php/124614/mod_page/content/4/example.jpg")
        .centerCrop()
        .into(cropImage);

6. Add progress bar

Adding a progress bar while loading an app image is always a good idea. Here is how you can add a progress bar, 

progressBar.setVisibility(View.VISIBLE);

progressBar.setVisibility(View.VISIBLE);
 
Glide.with(this)
        .load("https://moodle.htwchur.ch/pluginfile.php/124614/mod_page/content/4/example.jpg")
        .listener(new RequestListener() {
            @Override
            public boolean onLoadFailed(Exception e, Object model, Target target, boolean isFirstResource) {
                progressBar.setVisibility(View.GONE);
                return false; // important to return false so the error placeholder can be placed
            }
 
            @Override
            public boolean onResourceReady(Drawable resource, Object model, Target target, boolean isFromMemoryCache, boolean isFirstResource) {
                progressBar.setVisibility(View.GONE);
                return false;
            }
        })
        .into(imageView);

Image loading libraries performance analysis: Coil vs Glide vs Picasso

Fast loading from the cache memory

In terms of image loading speed from cache memory, Glide compares favorably to Picasso and Coil. It has been found that Glide takes less time than the other two libraries. 

Features

In comparison to Picasso and Coil, Gide has the best features for image loading, transformation, and error handling.  Unlike other Libraries, Picasso doesn’t resize an image exactly when it is decoded into the memory.

On the other hand, Coil is still a young library and not as stable as compared to Glide.

Glide ensures fast and smooth image loading in Android with automatic downstampic and caching to minimize storage overhead and decode times, aggressive re-use of resources, and deep lifecycle integration.

‍

How can DhiWise help you to improve the app performance

There are certain factors that influence application performance. Among them, image loading, decoding, and caching are some of the most important factors that highly impact user experience. 

DhiWise is an application development platform that enables developers to build high-quality applications in less time and budget. It provides support for most of the advanced technologies used by developers for building mobile and web apps. 

DhiWise Android Builder (Supported by advanced libraries)directly converts your visual elements into the Kotlin code in a few steps. The platform enables developers to build an application that can load images faster using the Glide library.

Visit our website today to learn more about DhiWise Android Builder and its features.