Glide Android – Image loading framework for Android with Example [updated]

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

Swipe card view Android with Example[Updated]

Expandable Recyclerview For Android


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

  1. Center Crop
    Glide.with(this)
           .load("imageUrl")
           .apply(RequestOptions.centerCropTransform())
           .into(imageView);
  2. Circle crop

    Glide.with(this)
           .load("imageUrl")
           .apply(RequestOptions.circleCropTransform())
           .into(imageView);
  3. Fir 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);

Android ConstraintLayout Example

Create Reusable Alert Dialog in Android


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


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




       /* GlideApp.with(this)
                .load("https://i2.wp.com/velmm.com/wp-content/uploads/2018/07/glide_android.png")
                .transform(new BlurTransformation(5,10))
                .into(imageView);*/

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

    }

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

Leave a Reply

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

Back to Top
%d bloggers like this: