How to Use Glide Image Loader Library in Android Apps?

Glide, like Picasso, can load and display images from many sources, while also taking care of caching and keeping a low memory impact when doing image manipulations. Official Google apps (like the app for Google I/O 2015) are using Glide. In this article, we're going to explore the functionalities of Glide and why it's superior in certain aspects. 

Glide is an Image Loader Library for Android developed by bumptech and is a library that is recommended by Google. It has been used in many Google open source projects including Google I/O 2014 official application. It provides animated GIF support and handles image loading/caching. Animated GIF support is currently not implemented in Picasso. Yes, images play a major role in making the UI of an App more interactive and user-friendly too. So, as an Android Developer, we should take care of using images in App. We should handle the different aspects of an image like the slow unresponsive image, memory issues, loading errors, and many more. If you are not handling these aspects in your application, then your app will make a bad impression on your users.

How to Use Glide Android Library?

Step 1: Adding Dependency

For using Glide in the android project, we have to add the dependency in build.gradle.kts file. So, For adding dependency open app/build.gradle file in the app folder in your Android project and add the following lines inside it. 

implementation ("com.github.bumptech.glide:glide:4.16.0")

Now sync your gradle once again. If you get any type of error then you may check the error on stackoverflow. 

Step 2: Adding Internet Permission

Now add Internet Permission inside the AndroidManifest.xml file. Open the manifest.xml file and add the following line.  

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

Step 3: Working with Activity layout file

Add the following in the activity_main.xml file

activity_main.xml:

<?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"
    android:background="@color/white"
    tools:context=".MainActivity">

    <!--ImageView is created below-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Working with MainActivity file

Now Navigate to the MainActivity file and Add the following code block to the onCreate() method.  

MainActivity File:

package org.geeksforgeeks.demo;

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // add this code
        ImageView imageView = findViewById(R.id.imageView);
        Glide.with(this)
            .load("https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png")
            .into(imageView);
    }
}

package org.geeksforgeeks.demo

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


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // add the code below
        val imageView = findViewById<ImageView>(R.id.imageView)
        Glide.with(this)
            .load("https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png")
            .into(imageView)
    }
}

In the first line, we are getting the ImageView instance from the layout. And then load the image from the above remote URL using Glide library.  

Advanced Usage

For any real-time application, we must think of all possible cases. In the above code, we just store the image from the server link into the imageView.There are some more cases.  

Resize

 Glide.with(context)
            .load("YOUR IMAGE URL HERE")
            .override(WIDTH, HEIGHT)
            .into(imageView);

Here we are using Glide to fetch a remote image and overriding(resizing) it using before displaying it in an image view. 

Placeholder 

Glide.with(context)
           .load("YOUR IMAGE URL HERE")
           .placeholder(R.drawable.placeholder)
           .into(imageView);

If your application relies on remote assets, then it’s important to add a fallback in the form of a placeholder image. The placeholder image is shown immediately and replaced by the remote image when Glide has finished fetching it. 

Handling errors 

Glide.with(context)
            .load("YOUR IMAGE URL HERE")
            .placeholder(R.drawable.placeholder)
            .error(R.drawable.imagenotfound)
            .into(imageView);

We already saw how the placeholder method works, but there’s also an error method that accepts a placeholder image. Glide will try to download the remote image three times and display the error placeholder image if it was unable to fetch the remote asset.

GIFS Support

Glide.with(context)
            .asGif()
            .load("YOUR GIF URL HERE")
            .into(imageView)

Effects:

• Blur Image:

Glide.with(context)
           .load("YOUR IMAGE URL HERE")
           .apply(RequestOptions.bitmapTransform(BlurTransformation(radius, margin)))
           .into(imageView)

• Multiple Transform:

Glide.with(context)
            .load("YOUR IMAGE URL HERE")
            .apply(
                RequestOptions.bitmapTransform(
                    MultiTransformation(
                        BlurTransformation(25),
                        CropCircleTransformation()
                    )
                )
            )
            .into(imageView)

• Circle crop:

Glide.with(context)
        .load("YOUR IMAGE URL HERE")
        .apply(
              RequestOptions.bitmapTransform(
                     CropCircleTransformation()
               )
          )
         .into(imageView)

• Rounded Corners:

Glide.with(context)
       .load("YOUR IMAGE URL HERE")
       .apply(
                RequestOptions.bitmapTransform(
                    RoundedCornersTransformation(radius, margin)
              )
       )
       .into(imageView)