Android App DevelopmentEducationProgramming

How to Load and Display Images Using Glide in Android

Glide
How to Load Images using Glide

Hey Guys, We are back with a new Topic on Glide Library. Recently I got a mail from my blog reader. He asked me to make a tutorial on Glide Library. He asked to make a tutorial and explain all the features of Glide Library like DISKCACHE, Image FITTING, and all other features. So today I’m gonna explain all the features of Glide. And How to Load and Display Images Using Glide in Android.

We already used Glide in our last tutorial How to retrieve data from Firebase Realtime Database into Recycler View in Android. But I didn’t Explain more about Glide. So Now Let’s See what is Glide? and How it is Used? and Where can we use Glide? and also We see Implementation of Glide in Android and How to Load Images into Image view Using Glide in Android?

What is Glide?

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

Glide supports fetching, decoding, and displaying video stills, images, and animated GIFs. Glide includes a flexible API that allows developers to plug into almost any network stack. By default, Glide uses a custom HttpUrlConnection based stack, but also includes utility libraries plug into Google’s Volley project or Square’s OkHttp library instead.

Glide’s primary focus is on making scrolling any kind of a list of images as smooth and fast as possible, but Glide is also effective for almost any case where you need to fetch, resize, and display a remote image.

How Glide is Used?

By adding Dependencies in build.gradle, Glide is downloaded into our Android Project and then We can Implement it as per our Requirements in our Project.

Where can we Use Glide?

We Use Glide to fetch and display Images from a Url or an API. It also decodes and displays video stills. We can also use Glide to display animated GIFs.

Implementaion of Glide in Android

Let’s See How to Implement Glide in Our Android App to load and display Images in Imageview.

First Add the required dependencies

// this goes in project level build.gradle file

repositories {
  google()
  mavenCentral()
}
//this goes in app-level build.gradle file

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

After Adding dependencies Sync your Project. After Successful Gradle Sync go to your activity_glide_image.xml and Implement an Imageview using the below code.

activity_glide_image.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".GlideImageActivity">


    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="250dp" />

</RelativeLayout>

Note: I’m taking height as 250dp. you change dimensions of Imageview as per your requirements

Now Let’s go to GlideImageActivity.java and see how to load our image from url into Imageview

GlideImageActivity.java

package com.example.glidesample;

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

public class GlideImageActivity extends AppCompatActivity {

    ImageView imageView;
    String image_url = "https://bigbosstelugu.org/wp-content/uploads/2021/06/Using-Glide.jpg";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_glide_image);
        
        imageView = findViewById(R.id.image_view);

        //Convert String into URI
        Uri url = Uri.parse(image_url);

        
        //Now Using Glide we load Image from Url into imageview
        Glide.with(getApplicationContext())
                .load(url)
                .into(imageView);


    }
}

In the Same Way we can also load video thumbnail into Imageview using Glide

Check our Android App Development Tutorials here

Now you Learned how to Load and Display Images Using Glide. Using above Code Try yourself. Stay Safe and Stay Home.

Happy Coding 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button