What is Glide library?

Glide library is an Image Loader Library for Android, developed by bumptech, and is a Google-recommended library. It’s been used in a number of Google open-source projects. It supports animated GIFs and handles image loading/caching.

Glide is an open-source media management and image loading framework for Android that wraps media decoding, memory and disc caching, and resource pooling into a simple, easy-to-use interface.

• Glide Android is a media management and image loading framework for Android that is open source.
• Fetching, decoding, and displaying video stills, pictures, and animated GIFs are all supported.
• Glide comes with a versatile API that lets developers integrate it with nearly any network stack.

Output

Glide library dependency and repositories

repositories {
  google()
  mavenCentral()
}

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.12.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
}

Basic Usage of Glide Library

//Glide
       Glide.with(this).load("Image-Url").into(imageView);
//

Difference between Glide library and Picasso library

POINT OF DIFFERENCE	Glide and Picasso
Syntax	If you just want to load an image, the syntax for both libraries is nearly the same. Both support fade animation and center cropping, and you can add a placeholder image while loading the image.
Size and Method count	The size of the glide library is nearly 3.5 times larger than the Picasso library. Picasso library has 849 methods and glide has 2678 methods, if you want to use glide, we must enable ProGuard.
Memory Management	Glide library uses less memory than Picasso library because it loads the same image based on the size of the view, whereas Picasso library loads the full-size image. And if you want to avoid the OutOfMemoryError exception, we should use glide.
Image loading time	Picasso library uploading time is faster than glide if the file is downloaded from the internet, but glide download time is faster if the file is downloaded from the cache. When we try to load an image from a URL, both libraries check the local cache first, and if the image is not present in the cache, it will download from the internet because downloading glide will take time to convert and then upload but the Picasso library directly uploading that image by full size.
Cache	Picasso library downloads the image and stores the full-size image in the cache, and whenever we request the same image, it returns the full-size image and resizes it in real-time to fit into the Image view. Glide, on the other hand, works differently. It downloads an image from a URL, resizes it to fit the size of the image view, and saves it to the cache. Because if we need an image in two different sizes, glide will store two different copies of the same image in the cache, each with a different resolution. This will increase the size of the disc image.
Animated Gif Support	Picasso library does not support animated gifs, but glide does.
Configuration and Customization	Glide offers a variety of configuration and customization options.

Usage of Glide library

By- Resize:

It is not always possible to request images in perfect dimensions. If your images aren’t the right size, you can use resize(horizontal size, vertical size) to change the dimensions to a suitable size or size of your choice. This will allow you to resize the image before it is loaded into ImageView.

Glide.with(this)
.load("Url")
.apply(RequestOptions.overrideOf(300,300))
.into(imageView)

By- ScaleType:

In any image manipulation, resizing an image can distort its aspect ratio and make it look unappealing. When we will load an image view, and you always want to avoid this happening here, Glide provides you with options: center crop() and center inside, Fit.

centreCrop()

It is a cropping technique that scales the image so that it crops the extra and fills only the image view’s requested bounds. Even if the entire image is not displayed, the entire image view will be filled.

Glide.with(this)
.load("Url")
.apply(RequestOptions.centerCropTransform())
.into(imageView)

circleCrop()

It is a cropping method that scales images so that their dimensions are equal to or less than the bounds of the requested Image view. The image displayed here will be complete but will not fill the entire imageView.

Glide.with(this)
.load("Url")
.apply(RequestOptions.circleCropTransform())
.into(imageView)

Fit Center()

Scales the image uniformly (maintaining the image’s aspect ratio) so that one of the dimensions of the image will be equal to the given dimension and the other will be less than the given dimension.

Glide.with(this)
.load("Url")
.apply(RequestOptions.fitCenterTransform())
.into(imageView)

Placeholder

Simple Placeholder()

If you’re using the Glide library, it may take a long time to load photos from the internet, depending on your user’s environment. The application’s expected behavior is to load a placeholder picture in place of the actual image until the actual image is loaded. Glide makes it simple to do so using a smooth interface that you just call.

Glide library will display a placeholder until the actual picture is loaded if you call placeHolder() with a reference to a drawable.

Glide.with(this)
.load("Url")
.apply(RequestOptions.placeholderOf(R.drawable.image))
.into(imageView)

Error PlaceHolder()

When we’re using the Glide library to load an image into an application and your server goes down. Glide responds appropriately by providing the option of receiving an error callback.

Glide.with(this)
.load("Url")
.apply(RequestOptions.placeholderOf(R.drawable.image))
.apply(RequestOptions.errorOf(R.drawable.image))
.into(imageView)

Glide library Example in Android studio

Step-by-step explanation:

The following is an example of using the Glide library in Android, in which we will demonstrate various features provided by the Glide library.

In this case, we’ve used a simple image URL that will be loaded in imageview using the Glide library.

Step 1: Create a New Project in Android Studio.

Step 2: Open build.gradle(Module: app) and add the following dependency:

• In this project, we will use the Picasso library for image loading.

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.12.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
}

Step 3: Add internet permission to the AndroidManifest.xml file

• Because we work with network operations and other such things, we require Internet connection permission.

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

• Below is the code of the AndroidManifest.xml file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.sagar.glideexample">

    <uses-permission android:name="android.permission.INTERNET" />
    <application
        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/Theme.GlideExample">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Step 4:  In the activity_main.xml layout file, we used one image view, which will be your target imageView and where the image will be displayed, and a Button for Image loading.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/ImageView"
        android:layout_width="400dp"
        android:layout_height="0dp"
        android:layout_marginTop="166dp"
        android:layout_marginBottom="82dp"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="35dp"
        android:text="Load Image"
        android:onClick="LoadImage"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ImageView" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: In MainActivity.kt file implementing Glide library with simple image URL.

package com.sagar.glideexample


import android.os.Bundle
import android.view.View
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import com.bumptech.glide.Glide

class MainActivity : AppCompatActivity() {
    private lateinit var ImageView: ImageView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

    }

    fun LoadImage(view: View) {
        ImageView = findViewById(R.id.ImageView)
        Glide.with(this)
            .load("https://i2.wp.com/developersdome.com/wp-content/uploads/2021/07/Home-Page-Slider-3.png?fit=1600%2C400&ssl=1")
            .error(R.drawable.ic_launcher_foreground).placeholder(R.drawable.ic_launcher_foreground)
            .into(ImageView)
    }
}
//                Try it yourself
//***************************************************************************
//            .centerCrop()
//            .centerInside()
//            .apply(RequestOptions.overrideOf(300,300))
//            .circleCrop()
//            .fitCenter() and so on
//***************************************************************************

Run the application now. You will get the output shown in the output section.

Advanced Example of Glide library–Image download from Server

We hope that this guide will assist you in quickly creating a simple Android Application using the Glide library in android. We concentrated on making a simple application for this tutorial. If you have any problems, please post them in the comments section, and we will gladly assist you.