Android Glide Image Loader Library Example

Google recently introduced an Image Loader Library for Android is known as Glide by bumptech. It has been used in many google’s open source projects. It is pretty much similar to Picasso.Since it’s google recommended library it automatically takes care of onresume and onpause method of activity.In this post we will learn how to use Glide Library.

So, Let’s start

  1. Open  Eclipse or Android Studio -> New Project->Android Application Project-> Name of Application-> Follow all instructions and complete by clicking on Finish.

  2. To use Glide in your application add the following dependencies in build.gradle
dependencies
{
compile 'com.github.bumptech.glide:glide:3.5.2'
compile 'com.android.support:support-v4:22.0.0'
}

Note: – don’t forget to add support library,  glide needs it.

3. Using Glide is much similar to Picasso.

Glide.with(Context or Activity or Fragment or FragmentActivity).load(url).into(imageview);

4. Use glide similar to Picasso for image resizing

Glide.with(Context or Activity or Fragment or FragmentActivity).load(url).override(width,height).centerCrop().into(imageview);

5. set default images as placeholder and error image.

Glide.with(Context or Activity or Fragment or FragmentActivity).load(url).placeholder(R.drawable.yourimage).errror(R.drawable.yourimage).into(imageview);

6.To use DiskCaching for all sizeImages in glide use like this

Glide.with(Context or Activity or Fragment or FragmentActivity).load(url).diskCacheStrategy(DiskCacheStrategy.ALL).into(imageview);

7. Create a layout containing image view to load an image from the server by Glide Library.

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

   <ImageView
       android:id="@+id/topimage"
       android:layout_alignParentTop="true"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</RelativeLayout>

8. Now Create MainActivty.java to use Glide library to load an image from the server and set to image view.

MainActivty.java

package com.coderzpassion.glidesample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;

import com.bumptech.glide.Glide;


public class MainActivity extends AppCompatActivity {

    ImageView top;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        top=(ImageView)findViewById(R.id.topimage);
        // loading image with glide from server
        Glide.with(MainActivity.this).load("http://coderzpassion.com/wp-content/uploads/2016/03/coderzpassion.png").into(top);
        // image transformations with glide
       // Glide.with(MainActivity.this).load("http://coderzpassion.com/wp-content/uploads/2016/03/coderzpassion.png").override(700, 700).centerCrop().into(top);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Important Point: – Glide Default Bitmap Format is RGB565

To change it create class implementing GlideModue

package com.coderzpassion.glidesample;

import android.content.Context;

import com.bumptech.glide.Glide;
import com.bumptech.glide.GlideBuilder;
import com.bumptech.glide.load.DecodeFormat;
import com.bumptech.glide.module.GlideModule;

/**
 * Created by coderzpassion on 02/03/16.
 */
public class CustomGlideLoader implements GlideModule {

    @Override
    public void applyOptions(Context context, GlideBuilder builder) {
        builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);
    }

    @Override
    public void registerComponents(Context context, Glide glide) {

    }
}

and use the following meta tag in AndroidManifest.xml

<meta-data android:name=“com.coderzpassion.picassosample.CustomGlideLoader”
android:value=“GlideModule”/>

9. AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.coderzpassion.glidesample" >
    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Output

androidhowtouseglideimageloaderlibrary            androidworkingwithglideimageloaderlibrary