Glide Library – Image Loading Library For Android

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

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'
}

Basic Usage of Glide

Glide.with(this).load("imageUrl").into(imageView);

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);
}
}

Advanced Usage of Glide

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);

Cropping 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);

Fit Center

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

Resizing with the center crop

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

Resize and fit center

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

Adding 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);

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));
}
}

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'
}

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);

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);

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);

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);

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);
}
};

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);

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'
}

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);


    }
}

you can download this example in github.

Leave a Reply

Your email address will not be published. Required fields are marked *