banner_glide
January 25, 2016

Glide : Image Loading Library for Android tutorial

By admin


In the Google Developer Summit , Google introduced us an Image Loader Library for Android developed by bumptech named Glide as a library that recommended by Google. It has been used in many Google open source projects .

What is Glide ?

Glide is an open source media management 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 in to almost any network stack.

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.

Glide Features

Glide version 3.x supports large number of features…
-Animated GIF decoding
-Local video stills
-Thumbnail support
-Lifecycle integration
-Transcoding
-Animations
-OkHttp and Volley Support

Why to use ?

– It simplifies the process of loading images from external urls and display on your application. For example, downloading an image from server, is one of the most common task in any application. And it needs quite a larger amount of code to achieve this via android networking API’s. By using Glide, you can achieve this with few lines of code.
– It is always not about downloading image from remote location. You also have to think of implementing image caching logic in order to provide a seamless user experience. Glide provides automatic image caching.
– Image transformation is a costly affair. If your application need deal with such runtime image transformation, you must be watchful about OutOfMemoryException. Glide deals with it, so you dont have to do it yourself.

Glide Usage in Android

In this tutorials i will show you how to use glide in android project . following are the steps .

Step 1 ) Update build.gradle file

Before you can use it in your projects you need to add the following compile line to your Gradle dependencies block in your build.gradle file.

dependencies {
    compile 'com.github.bumptech.glide:glide:3.6.1'
    compile 'com.android.support:support-v4:19.1.0'
  }

Step 2) Add INTERNET permission in manifest file

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

Step 3) Add ImageView in you layout

Declare an ImageView in your layout to display image from remote server in it

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView"
    >
</ImageView>





Step 4) Glide Usage in Activity

-Loading Images from server
In this code snippet, I load an image from remote server and displayed in ImageView

//Initialize ImageView
ImageView imageView = (ImageView) findViewById(R.id.imageView);

//Loading image from below url into imageView
Glide.with(this)
        .load("IMAGE URL HERE")
        .into(imageView);

-Placeholder And Error Fallback
In the above code snippet, I have just downloaded the image and displayed on ImageView. But that is not enough always. For any real time application, you must think of all possible cases. Now we need an placeholder and error fallback for our ImageView. Placeholder image will be shown before the image is loaded. Error fallback will be shown if, there is an error while downloading image. However both fallback and placeholder are optional.

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

-Image Resizing and Cropping
you are not sure about the size of the image loaded from the remote server that what will be the size of the image . so in this code snippet image is resized to 200X200 and center cropped.

Glide.with(this)
        .load("IMAGE URL HERE")
        .placeholder(R.drawable.placeholder)
        .error(R.drawable.imagenotfound)
        .override(200, 200);
        .centerCrop();
        .into(imageView);

Enjoy Coding and Share Knowledge