Android Glide Library Tutorial || Glide Image Library

 

Android Glide Library :

We have seen few image loading library’s earlier now its turn for a fastest image loading library in the android platform.I have personally used this library and observed terrific loading of images and also the caching of them for further use.Lets get into Android Glide Library Tutorial.

Generally we deal with few apps where we use a lot of images to be loaded for example consider social networking sites where there is a usage of high quality images to be loaded in a very little amount of time for which which a powerful library is to be considered to handle this task much easier and smoother than before versions.

Here it is glide library, previously i have shown few image loading library’s but this particular library is best recommended because of its features offering, making even a novice developer look like a pro with its features like..

1. Image loading much faster in terms of even high quality and size of the image
2. Animated GIF’s are loaded with much ease than before
3. And also video stills are decoded and displayed
4. A smoother interface to make loading process handle using a image or even a small gif based animation file which adds a cool UI too.
5. Also the most important thing is it comes with a listener where the onException and onResourceReady conditions can be handled easily and further process can be done.
6. Even cropping of the images can be done.

 

add glide library to your project

 

compile 'com.github.bumptech.glide:glide:3.8.0'

Glide Library Video Tutorial :

 

activity_main

add a simple android imageview to layout

 

<?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="glide.android.com.glide.MainActivity">


    <ImageView
        android:id="@+id/imgView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</LinearLayout>

 

and then initialize glide library in Activity

 

MainActivity

 

Glide.with(this)

 

add your image/gif  url here

.load("Your Url Here")

 

can override dimension here

 .override(200, 300)

 

and a listener can be used to handle the situations

 

.listener(new RequestListener<String, GlideDrawable>() {
    @Override
    public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {

        return false;
    }

    @Override
    public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {

        return false;
    }
})

 

public class MainActivity extends AppCompatActivity {

    ImageView imgView;

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

        imgView = (ImageView) findViewById(R.id.imgView);

        Glide.with(this)
                .load("Your Url Here")
                .override(200, 300)
                .listener(new RequestListener<String, GlideDrawable>() {
                    @Override
                    public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {

                        return false;
                    }

                    @Override
                    public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {

                        return false;
                    }
                })
                .into(imgView);

    }
}

 

AndroidManifest.xml :

At last don’t forget to add internet permission to your manifest file

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

 

Kotlin Code :

 

activity_main.xml :

Add  three image views to populate the images according to the variant

<?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/imgSrc"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:layout_constraintBottom_toTopOf="@+id/imgPlaceHolder"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.032" />

    <ImageView
        android:id="@+id/imgPlaceHolder"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="220dp"
        app:layout_constraintBottom_toTopOf="@+id/imgGif"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.037"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imgGif"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

MainActivity.java

Add the glide library and attach them to respective image views and populate images accordingly.

package com.abhi.glide

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.bumptech.glide.Glide
import kotlinx.android.synthetic.main.activity_main.*

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


        Glide.with(this).load(R.drawable.ic_launcher_foreground).into(imgSrc);


        // With place holder

        Glide
            .with(this)
            .load("https://picsum.photos/200")
            .centerCrop()
            .placeholder(R.drawable.ic_launcher_background)
            .into(imgPlaceHolder);

        // With Gif

        Glide.with(this).load("https://media.giphy.com/media/KHWuOdcXLfiwOLq34Y/giphy.gif").into(imgGif);

    }
}

 

Glide Library Output :

This below screen depicts the usage of the android glide library implementation.

 

 

If you have any query in this tutorial on Glide Library do let us know in the comment section below.If you like this tutorial do like and share us for more interesting updates.