How to load Image from Url using Glide Library | Android Studio Tutorial

How to load Image from Url using Glide Library | Android Studio Tutorial

 


Hello there,
In this article we are going to learn how to load images & GIFs in Android Studio form Url.

We'll be using Glide Image Loading library because it comes with a support of GIFs where other library lacks.

Before implementation let's learn how Glide Image Loading library works, our Glide Image Loading library works on the concept of image caching. When we make a Glide object and provide url to make a image loading call, Glide downloads the image into our cache memory and loads in the ImageView. This is why once the image is loaded and even after with no internet connection the image is able to load in our ImageView, because the image is already present in our cache.

Let's start with the implementation of our dependencies in build.gradle.

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

Now let's add a button and ImageView in our MainActivity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="300dp"
        android:id="@+id/img_glide"
        android:layout_marginTop="50dp"
        android:layout_gravity="center"
        android:layout_height="300dp"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        android:id="@+id/btn_load"
        android:layout_marginTop="50dp"
        android:layout_height="wrap_content"/>

</LinearLayout>

We'll use glide with backup options (Placeholder & Error) means, if image is of big size (~5-6 Mb) then it will take time for a moderate user to download the image and show it. So in this case we'll use placeholder to load our temporary image until image is downloading, and in case the image url is wrong or corrupts by some reason then we'll show the error image rather than just blank space.

So moving to MainActvity.java

package com.example.tutorialspecial;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.Spinner;
import android.widget.Toast;

import com.bumptech.glide.Glide;

public class MainActivity extends AppCompatActivity {
    Context context;
    ImageView img_glide;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        context = this;
        img_glide = findViewById(R.id.img_glide);
        findViewById(R.id.btn_load).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Glide.with(context)
                        .load("https://i.picsum.photos/id/1011/5472/3648.jpg?hmac=Koo9845x2akkVzVFX3xxAc9BCkeGYA9VRVfLE4f0Zzk")
                        .placeholder(R.drawable.watermark)
                        .error(R.drawable.watermark)
                        .into(img_glide);
            }
        });


    }

}

As discussed above once the image is downloaded and loaded in our ImageView then there will be consumption of internet in loading the same image again, we can even load that cached image by turning off the internet connection. However these caching settings can be manipulated as per user convenience.

Join our telegram group in case of any doubt and subscribe to our youtube channel for more informative content.

Post a Comment

0 Comments