Glide library in Kotlin

Glide is fast and efficient image loading library for android. Using Glide library we can download, decode and display images, videos or animated GIFs, resize downloaded images, show placeholder while loading image, show pre-defined images when there is any error while downloading image, apply animation while loading image and use cache for offline viewing.

First, in app/build.gradle file we have to add:

implementation 'com.github.bumptech.glide:glide:4.12.0'

And in AndroidManifest.xml file we need to add internet permission:

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

For loading pictures into ImageView we have to create ImageView element in xml Layout with ID:

<ImageView
  android:id="@+id/imageView" 
  android:layout_width="200dp"
  android:layout_height="200dp"/>

And in MainActivity.kt we can use basic code:

Glide.with(this)
   .load("Your_Image_URL")
   .into(imageView)

Methods that we can use with Glide are:

• .placeholder("Placeholder Image URL") – to show placeholder while image is being loaded.
• .error(“Error_Image_URL”) – to show error placeholder.
• .fallback(“Fallback_Image_URL”) – if requested url/model is null we use fallback placeholder.
• .override(150, 150) – If we want to resize downloaded image.
• .centerCrop(), . fitCenter(), .circleCrop() – several in-built transformations.

We can apply transition from a placeholder to newly loaded image, or from a thumbnail to full size image easly by using many transition available to glide. For example:

val factory = DrawableCrossFadeFactory.Builder().setCrossFadeEnabled(true).build()
Glide.with(this)
  .load("Your_Image_URL")
  .transition(withCrossFade(factory))
  .into(imageView)

We cannot do the cross fade between two different images that are loaded with different requests. Glide by default will cancel any existing requests when you start a new load into an existing View or Target. As a result, if you want to load two different images and cross fade between them, you cannot do so with Glide directly. Instead, the easiest way to cross fade across two different images loaded in two separate requests is to use ViewSwitcher containing two ImageViews. Load the first image into the result of getNextView(). Then load the second image into the next result of getNextView() and use a RequestListener to call showNext() when the second image load finishes.

_{see Glide documentation for more info}

Caching in Glide:

When loading image, Glide first checks if image already exist in memory, in case that this image is displayed in another View right now and to see if this image is recently loaded and is it still in memory?
After that Glide check if image is already stored in disk to see if this image has been decoded, transformed, and written to the disk cache before.
If image is neither found in memory nor in disk, Glide sends request to fetch image from remote url.

Using diskCacheStrategy method, we apply disk caching. Value passed in method defines how disk caching is configured:

• diskCacheStrategy.ALL caches remote data with both DATA and RESOURCE, and local data with RESOURCE only.
• diskCacheStrategy.AUTOMATIC is set by default and it tries to choose strategy using DataFetcher and EncodeStrategy.
• diskCacheStrategy.DATA writes retrieved data directly to disk cache before it is decoded.
• diskCacheStrategy.NONE doesn’t save data to cache and
• diskCacheStrategy.RESOURCE writes data to disk after it is decoded.

For example, we can apply disk caching for remote data with both DATA and RESOURCE:

Glide.with(CONTEXT)
  .load(URL)
  .diskCacheStrategy(DiskCacheStrategy.ALL)
  .into(imageView)

If we want to load data only from the cache, we use: .onlyRetrieveFromCache(true)

If we want to skip memory or disk caching (or both) we can use: .diskCacheStrategy(DiskCacheStrategy.NONE) or .skipMemoryCache(true)

End now our code for loading picture into ImageView can look something like this:

val imageUrl = "https://glideapps.com/images/cover-logo.png"
val factory = DrawableCrossFadeFactory.Builder().setCrossFadeEnabled(true).build()

Glide.with(this)
  .load(imageUrl)
  .placeholder(R.mipmap.ic_launcher)
  .error(R.drawable.ic_error)
  .fallback(android.R.drawable.ic_menu_slideshow)
  .circleCrop()
  .override(150, 150) // dimensions are in pixels
  .transition(withCrossFade(factory))
  .diskCacheStrategy(DiskCacheStrategy.ALL)
  .into(imageView)