Handling Images In Android with Glide

11th October, 2022

Glide image loader library is used to download and handle images. In this tutorial you will learn integration and usage of Glide Library.

Step 1: Create New Project

Create a new project in Android Studio from File ⇒ New Project and select Empty Activity from the templates.

Step 2: Glide Integration

To use Glide add following dependency to your app level build.gradle.

Project ⇒ app ⇒ build.gradle

dependencies
{
    implementation 'com.github.bumptech.glide:glide:4.10.0'
}

Add Internet access permission in AndroidManifest.xml

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

Step 3: Load Image Using Glide

Now open the Activity and write code given below.

package com.codestringz.glideexample;

import android.os.Bundle;
import android.widget.ImageView;

import com.bumptech.glide.Glide;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity
{

    private ImageView mImageView;

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

        setUIRef();
        loadImage();
    }

    private void setUIRef()
    {
        mImageView = findViewById(R.id.myImageView);
    }

    private void loadImage()
    {
        //Simple Image Loading using Glide
        Glide.with(MainActivity.this)
                .load("http://lorempixel.com/400/200")// Load file
                .into(mImageView);//The image will load into this ImageView
    }
}

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="www.CodestringZ.com" />

    <ImageView
        android:id="@+id/myImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@mipmap/ic_launcher"
        tools:ignore="ContentDescription" />

</RelativeLayout>

Advance Uses of Glide

Scale Image:

Glide.with(MainActivity.this)
	 .load("http://lorempixel.com/400/200")
	 .centerCrop()//Scale Image
	 .into(mImageView);

Error And Placeholder:

Glide.with(MainActivity.this)
	 .load("http://lorempixel.com/400/200")
	 .placeholder(R.drawable.loading_img)// This image will be displayed when loading.
	 .error(R.drawable.loading_failed_img)// This image will be displayed when loading failed.
	 .into(mImageView);

Resize Image:

Glide.with(MainActivity.this)
	 .load("http://lorempixel.com/400/200")
	 .override(150,150)//Resize Image
	 .into(mImageView);

Rounded Corners Image:

Glide.with(MainActivity.this)
	 .load("http://lorempixel.com/400/200")
	 .override(350,150)
	 .transform(new RoundedCorners(25))//Rounded Corner
	 .into(mImageView);

Glide with ProGuard:

If you are using Proguard, set the Glide as follows.

Project ⇒ app ⇒ proguard-rules.pro

#----------------------------------Glide----------------------------------#
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.resource.bitmap.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}

-dontwarn com.bumptech.glide.load.resource.bitmap.VideoDecoder

Happy coding!