Handling Images In Android with Glide

Thumb-Handling-Images-In-Android-with-Glide

24th February, 2020

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>
Image-loading-using-Glide-Output
Image loading using Glide Library

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-Usage

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!

Leave a Reply