Load image and GIF using Glide

Hello everyone, in this post, we will discuss Glide.

We often find images on applications. It will be on the start page, list of projects, and others. How the way for our application can show an image from the internet?

If you want to read this post in Bahasa, you can open this link: https://www.yukngoding.id/2020/04/03/load-image-dan-gif-dengan-menggunakan-glide/

In this post, we will use Glide.

Prepare

First, we will add Glide on our build.gradle (app level), like this:

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
android {
    compileSdkVersion 29
    buildToolsVersion "29.0.2"
    defaultConfig {
        applicationId "ikhwankoto.com.explore_image_loader"
        minSdkVersion 17
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.appcompat:appcompat:1.0.2'
    implementation 'androidx.core:core-ktx:1.0.2'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
// UNTUK MENGGUNAKAN GLIDE
    implementation 'com.github.bumptech.glide:glide:4.11.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'
}

After that, we need to change our build.gradle on project level like this:

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
        google()
        jcenter()
        
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.1'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}
allprojects {
    repositories {
        // ADD THIS FOR GLIDE
        mavenCentral()
        google()
jcenter()
    }
}
task clean(type: Delete) {
    delete rootProject.buildDir
}

Don’t forget to add internet permission on AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="ikhwankoto.com.explore_image_loader">
<uses-permission android:name="android.permission.INTERNET" />
<application
        android:name=".MyApp"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
...
</application>
</manifest>

Our prepare is done

Layout

For the layout, we will use a simple ImageView.

<ImageView
    android:id="@+id/iv_standart"
    android:layout_width="172dp"
    android:layout_height="172dp"
    android:layout_marginStart="12dp"
    android:layout_marginTop="18dp"
    android:layout_marginEnd="12dp"
    android:background="@color/colorPrimary"/>

Note: Glide can get an image from the internet to produce a drawable or bitmap without using it to ImageView immediately.

Simple Call

First, we will show an image with a simple call

Glide.with(this)
     .load(urlImage)
     .into(iv_standart)

• this = context
• urlImage = image’s URL
• iv_standart = ImageView’s Id

Clear call

Glide.with(this).clear(iv_standart)

• this = context
• iv_standart = ImageView’s Id

Placeholder

1. Placeholder

We will show a drawable while the image still loads from the internet.

Glide.with(this)
     .load(urlImage)
     .placeholder(R.drawable.ic_loading)
     .into(iv_placeholder)

We can also use a color for placeholder like this:

Glide.with(this)
     .load(urlImage)
     .placeholder(ColorDrawable(Color.BLACK))
     .into(iv_placeholder_color)

2. Error

The next placeholder is to handle the error condition when an image we load from the internet found some error.

Glide.with(this)
     .load("https://bla.bla.bla/bla.pjg")
     .error(R.drawable.ic_error)
     .into(iv_error)

3. Fallback

This placeholder almost the same with error placeholder. This one will be executed when the URL has a null value. You can use this to load the profile picture (Profile picture can be null right?).

Glide.with(this)
     .load(urlImageNull)
     .fallback(R.drawable.ic_default)
     .into(iv_fallback)

Note: All placeholder can use for the same time.

Extra: We can use a placeholder from the internet.

Glide.with(this)
     .load(urlImageForFailure)
     .error(
         Glide.with(this)
              .load(urlImageError)
     )
     .into(iv_newrequest_onfailure)

Transformations

We can make changes after the image loaded from the internet. Here are some transformations that have been provided by Glide.

//CenterCrop
Glide.with(this).load(urlImage).centerCrop().into(iv_centercrop)
//FitCenter
Glide.with(this).load(urlImage).fitCenter().into(iv_fitcenter)
//CircleCrop
Glide.with(this).load(urlImage).circleCrop().into(iv_circlecrop)

Thumbnail

Thumbnail is an image will be shown before the real image loaded successfully.

1. Thumbnail with low resolutions from the real image

Glide.with(this)
     .load(urlImage)
     .thumbnail(0.25f)
     .into(iv_thumbnail)

2. Thumbnail with different URL

Glide.with(this)
     .load(urlImage)
     .thumbnail(
          Glide.with(this)
               .load(urlImageThumbnail)
     )
     .into(iv_thumbnail_different_image)

Transition

This is an animation when a placeholder change to image from the internet.

val factory = DrawableCrossFadeFactory.Builder().setCrossFadeEnabled(true).build()
Glide.with(this)
     .asBitmap()
     .load(urlImage)
     .placeholder(R.drawable.ic_loading)      
     .transition(withCrossFade(factory))
     .into(iv_transition)

We use a factory to avoid the issue with transparent images.

Performance tips: Don’t use transition on the layout used for RecyclerView

Load GIF

Use the code shown as bellow for load a GIF

Glide.with(this)
     .asGif()
     .load(urlGif)
     .into(iv_gif)

Glide has another function, but we will discuss it in another post. Thanks and I hope this helps someone. Bye-bye