How to Load Images With Glide Library In Android With Example

Velmurugan

2 years ago

What is Glide Android?

Glide Android is an open-source media management and image-loading framework for Android.
It supports fetching, decoding, and displaying video stills, images, and animated GIFs.
Glide includes a flexible API that allows developers to plug into almost any network stack.
By default, Glide uses a custom HttpUrlConnection-based stack but also includes utility libraries to plug into Google’s Volley project or Square’s OkHttp library instead.

Why is Glide Android?

Glide’s primary focus is on making scrolling any kind of 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.

Setup Glide in your Android Studio project

Add to your app/build.gradle file:

dependencies {
implementation 'com.github.bumptech.glide:glide:4.7.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.7.1'
}
Code language: JavaScript (javascript)

Basic Usage of Glide

Glide.with(this).load("imageUrl").into(imageView);
Code language: CSS (css)

Glide Basic Example

public class MainActivity extends AppCompatActivity {
private ImageView imageView;
Private String imageUrl =””;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = findViewById(R.id.imageview);
Glide.with(this)
.load("imageUrl")
.into(imageView);
}
}
Code language: JavaScript (javascript)

Advanced Usage of Glide

With PlaceHolder

Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.placeholderOf(R.drawable.no_image))
.into(imageView);
Code language: CSS (css)

With Placeholder and error placeholder

Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.placeholderOf(R.drawable.no_image))
.apply(RequestOptions.errorOf(R.drawable.error))
.into(imageView);
Code language: CSS (css)

Resizing image

Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.placeholderOf(R.drawable.no_image))
.apply(RequestOptions.overrideOf(300,300))
.into(imageView);
Code language: CSS (css)

Cropping image

Center Crop

Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.centerCropTransform())
.into(imageView);
Code language: CSS (css)

Circle crop

Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.circleCropTransform())
.into(imageView);
Code language: CSS (css)

Fit Center

Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.fitCenterTransform())
.into(imageView);
Code language: CSS (css)

Resizing with the center crop

Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.overrideOf(100,100))
.apply(RequestOptions.centerCropTransform())
.into(imageView);
Code language: CSS (css)

Resize and fit the center

Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.overrideOf(100,100))
.apply(RequestOptions.fitCenterTransform())
.into(imageView);
Code language: CSS (css)

Adding a listener for Glide image loading

Glide.with(this)
.load("imageUrl")
.listener(new RequestListener<Drawable>() {
@Override
public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
Toast.makeText(getApplicationContext(),e.getMessage(),Toast.LENGTH_SHORT).show();
return false;
}
@Override
public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
Toast.makeText(getApplicationContext(),"Success",Toast.LENGTH_SHORT).show();
return false;
}
})
.into(imageView);
Code language: JavaScript (javascript)

Change Glide Default Configuration

Extending AppGlideModule you can override the default config on the glide.

In this case, I just change the default image format of the glide.

Glide default Bitmap Format is set to RGB_565 since it
consumed just 50% memory footprint compared to ARGB_8888.

@com.bumptech.glide.annotation.GlideModule
public class GlideModule extends AppGlideModule {
@Override
public void applyOptions(@NonNull Context context, @NonNull GlideBuilder builder) {
builder.setDefaultRequestOptions(RequestOptions.formatOf(DecodeFormat.PREFER_ARGB_8888));
}
}
Code language: CSS (css)

Glide Transformations

Transformations are supported by an additional third-party library, glide-transformations. First, add the dependencies:

dependencies {
implementation 'jp.wasabeef:glide-transformations:3.3.0'
// If you want to use the GPU Filters
implementation 'jp.co.cyberagent.android.gpuimage:gpuimage-library:1.4.1'
}
Code language: JavaScript (javascript)

Rounded Corners

int radius = 50; // corner radius
int margin = 10; // crop margin
GlideApp.with(this)
.load("https://i2.wp.com/velmm.com/wp-content/uploads/2018/07/glide_android.png")
.transform(new RoundedCornersTransformation(radius, margin))
.into(imageView);
Code language: JavaScript (javascript)

Circle Crop

GlideApp.with(this)
.load("https://i2.wp.com/velmm.com/wp-content/uploads/2018/07/glide_android.png")
.transform(new CircleCrop())
.into(imageView);
Code language: JavaScript (javascript)

Blur Effect

GlideApp.with(this)
.load("https://i2.wp.com/velmm.com/wp-content/uploads/2018/07/glide_android.png")
.transform(new BlurTransformation())
.into(imageView);
Code language: JavaScript (javascript)

Multiple transforms

Also, you can use multiple transformations at once.

GlideApp.with(this)
.load("https://i2.wp.com/velmm.com/wp-content/uploads/2018/07/glide_android.png")
.transform(new MultiTransformation<Bitmap>(new BlurTransformation(25), new CircleCrop()))
.into(imageView);
Code language: JavaScript (javascript)

Adjusting Image Size Dynamically

To readjust the ImageView size after the image has been retrieved, first define a SimpleTarget<Bitmap> object to intercept the Bitmap once it is loaded:

private SimpleTarget target = new SimpleTarget<Bitmap>() {
@Override
public void onResourceReady(Bitmap bitmap, @Nullable Transition<? super Bitmap> transition) {
// do something with the bitmap
// set it to an ImageView
imageView.setImageBitmap(bitmap);
}
};
Code language: PHP (php)

Next, pass the SimpleTarget to Glide via into().

GlideApp.with(context)
.load("https://i2.wp.com/velmm.com/wp-content/uploads/2018/07/glide_android.png")
.asBitmap()
.into(target);
Code language: JavaScript (javascript)

Glide Android Example :

build.gradle

dependencies {
implementation 'com.github.bumptech.glide:glide:4.7.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.7.1'
implementation 'jp.wasabeef:glide-transformations:3.3.0'
// If you want to use the GPU Filters
implementation 'jp.co.cyberagent.android.gpuimage:gpuimage-library:1.4.1'
}
Code language: JavaScript (javascript)

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;

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

        imageView = findViewById(R.id.imageview);

        /*//Normal way
        Glide.with(this)
                .load("imageUrl")
                .into(imageView);
        //With PlaceHolder
        Glide.with(this)
                .load("imageUrl")
                .apply(RequestOptions.placeholderOf(R.drawable.no_image))
                .into(imageView);*/


        //With Placeholder and error placeholder
        /*Glide.with(this)
                .load("imageUrl")
                .apply(RequestOptions.placeholderOf(R.drawable.no_image))
                .apply(RequestOptions.errorOf(R.drawable.error))
                .into(imageView);
*/

        //Resizing image
        /*Glide.with(this)
                .load("imageUrl")
                .apply(RequestOptions.placeholderOf(R.drawable.no_image))
                .apply(RequestOptions.overrideOf(300,300))
                .into(imageView);*/

        /*Glide.with(this)
                .load("imageUrl")
                .apply(RequestOptions.overrideOf(100,100))
                .apply(RequestOptions.centerCropTransform())
                .into(imageView);*/

        /*Glide.with(this)
                .load("imageUrl")
                .apply(RequestOptions.overrideOf(100,100))
                .apply(RequestOptions.fitCenterTransform())
                .into(imageView);*/


        //Croping image
        //center crop
        /*Glide.with(this)
                .load("imageUrl")
                .apply(RequestOptions.centerCropTransform())
                .into(imageView);*/
        //Circle crop
        Glide.with(this)
                .load("imageUrl")
                .apply(RequestOptions.circleCropTransform())
                .into(imageView);

        /*Glide.with(this)
                .load("imageUrl")
                .apply(RequestOptions.fitCenterTransform())
                .into(imageView);*/

        Glide.with(this)
                .load("imageUrl")
                .listener(new RequestListener<Drawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                        Toast.makeText(getApplicationContext(),e.getMessage(),Toast.LENGTH_SHORT).show();

                        return false;
                    }

                    @Override
                    public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                        Toast.makeText(getApplicationContext(),"Success",Toast.LENGTH_SHORT).show();
                        return false;
                    }
                })
        .into(imageView);


    }
}
Code language: JavaScript (javascript)

you can download this example from github.