Glide – Image Caching and Loading Library

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

Requires internet permission for loading images on net.

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.8.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'
}

Glide.with(this).load("http://goo.gl/gEgYUd").into(imageView);

Place the above code inside any activity. this can be replaced with context and imageView can be replaced with required image view

// For a simple example in activity:
@Override public void onCreate(Bundle savedInstanceState) {
  ...
  ImageView imageView = (ImageView) findViewById(R.id.my_image_view);

  Glide.with(this).load("http://goo.gl/gEgYUd").into(imageView);
}

Using inside image list

// For a simple image list:
@Override public View getView(int position, View recycled, ViewGroup container) {
  final ImageView myImageView;
  if (recycled == null) {
    myImageView = (ImageView) inflater.inflate(R.layout.my_image_view, container, false);
  } else {
    myImageView = (ImageView) recycled;
  }

  String url = myUrls.get(position);

  Glide
    .with(myFragment)
    .load(url)
    .centerCrop()
    .placeholder(R.drawable.loading_spinner)
    .into(myImageView);

  return myImageView;
}

General Usage:

Glide
    .with(myFragment)
    .load(url)
    .centerCrop()
    .placeholder(R.drawable.loading_spinner)
    .into(myImageView);

RequestOptions

Most options in Glide can be applied using the RequestOptions class and the apply() method.

Use request options to apply (among others):

• Placeholders
• Transformations
• Caching Strategies
• Component specific options, like encode quality, or decode Bitmap configurations.

For example, to apply a CenterCrop Transformation, you’d use the following:

import static com.bumptech.glide.request.RequestOptions.centerCropTransform;

Glide.with(fragment)
    .load(url)
    .apply(centerCropTransform(context))
    .into(imageView);

Statically importing methods like centerCropTransform from RequestOptions allows for a simple fluent API.

If you’d like to share options consistently in loads across different parts of your app, you can also instantiate a new RequestOptions object and pass it in to each load:

RequestOptions cropOptions = new RequestOptions().centerCrop(context);
...
Glide.with(fragment)
    .load(url)
    .apply(cropOptions)
    .into(imageView);

apply() can be called multiple times, so RequestOptions can be composed. If two RequestOptions objects contain conflicting settings, the last RequestOptions applied to the load will win.

Generated API

If you use the generated API, all RequestOptions methods are inlined and can be used directly:

Glide.with(fragment)
    .load(url)
    .centerCrop()
    .into(imageView);

TransitionOptions

TransitionOptions determine what will happen when your requested load completes.

Use TransitionOptions to apply:

• View fade in
• Cross fade from the placeholder
• No transition

Without a transition, your image will pop into place, immediately replacing the previous image. To avoid the sudden change, you can fade in your view, or cross fade between Drawables using TransitionOptions.

For example, to apply a cross fade:

import static com.bumptech.glide.load.resource.drawable.DrawableTransitionOptions.withCrossFade;

Glide.with(fragment)
    .load(url)
    .transition(withCrossFade())
    .into(view);

Unlike RequestOptions, TransitionOptions are type specific and are tied to the type of resource you ask Glide to load.

As a result, if you request a Bitmap, you will need to use BitmapTransitionOptions, rather than DrawableTransitionOptions. As a result, if you request a Bitmap, you may need to do a simple fade in, rather than a cross fade.

RequestBuilder

RequestBuilder is the backbone of the request in Glide and is responsible for bringing your options together with your requested url or model to start a new load.

Use RequestBuilder to specify:

• The type of resource you want to load (Bitmap, Drawable etc)
• The url/model you want to load the resource from
• The view you want to load the resource into
• Any RequestOption object(s) you want to apply
• Any TransitionOption object(s) you want to apply
• Any thumbnail() you want to load.

You obtain a RequestBuilder by calling Glide.with() and then one of the as methods:

RequestBuilder<Drawable> requestBuilder = Glide.with(fragment).asDrawable();

Or by calling Glide.with() and then load():

RequestBuilder<Drawable> requestBuilder = Glide.with(fragment).load(url);

Picking a resource type

RequestBuilders are specific to the type of resource they will load. By default you get a Drawable RequestBuilder. You can change the requested type using as... methods. For example, if you call asBitmap() you will get a Bitmap RequestBuilder instead:

RequestBuilder<Bitmap> requestBuilder = Glide.with(fragment).asBitmap();

Applying RequestOptions

As mentioned above, you apply RequestOptions with the apply() method and TransitionOptions with the transition() method:

RequestBuilder<Drawable> requestBuilder = Glide.with(fragment).asDrawable();
requestBuilder.apply(requestOptions);
requestBuilder.transition(transitionOptions);

RequestBuilders can also be re-used to start multiple loads:

RequestBuilder<Drawable> requestBuilder =
        Glide.with(fragment)
            .asDrawable()
            .apply(requestOptions);

for (int i = 0; i < numViews; i++) {
   ImageView view = viewGroup.getChildAt(i);
   String url = urls.get(i);
   requestBuilder.load(url).into(view);
}

Thumbnail requests

Glide’s thumbnail() API allows you to specify a RequestBuilder to start in parallel with your main request. The thumbnail() will be displayed while the primary request is loading. If the primary request completes before the thumbnail request, the image from the thumbnail request will not be shown. The thumbnail() API allows you easily and quickly load low resolution versions of your images while your full quality equivalents load, reducing the amount of time users spend staring at loading indicators.

The thumbnail() API is useful for both local and remote images, especially once the lower resolution thumbnails are in Glide’s disk cache where they can be loaded very quickly.

The thumbnail() API is relatively simple to use:

Glide.with(fragment)
  .load(url)
  .thumbnail(Glide.with(fragment)
    .load(thumbnailUrl))
  .into(imageView);

This will work well if your thumbnailUrl points to a lower resolution image than your primary url. A number of image loading APIs offer ways for you to specify the size of the image you want in your URL, which works particularly well with the thumbnail() API.

If you’re just loading a local image, or you only have a single remote URL, you can still benefit from the thumbnail API by using Glide’s override() or sizeMultiplier() APIs to force Glide to load a lower resolution image in the thumbnail request:

int thumbnailSize = ...;
Glide.with(fragment)
  .load(localUri)
  .thumbnail(Glide.with(fragment)
    .load(localUri)
    .override(thumbnailSize))
  .into(view);

There’s a thumbnail() convenience method that just takes a sizeMultiplier if you just want to load the same model at some percentage of your Viewor Target’s size:

Glide.with(fragment)
  .load(localUri)
  .thumbnail(/*sizeMultiplier=*/ 0.25f)
  .into(imageView);

Starting a new request on failure.

Starting in Glide 4.3.0, you can now easily specify a RequestBuilder to use to start a new load if your main request fails using the error() API. For example, to load fallbackUrl if your request for primaryUrl fails:

Glide.with(fragment)
  .load(primaryUrl)
  .error(Glide.with(fragment)
      .load(fallbackUrl))
  .into(imageView);

The error RequestBuilder will not be started if the main request completes successfully. If you specify both a thumbnail() and an error()RequestBuilder, the error RequestBuilder will be started if the primary request fails, even if the thumbnail request succeeds.

Component Options

The Option class is a generic way of adding parameters to Glide’s components, including ModelLoaders, ResourceDecoders, ResourceEncoders, Encoders etc. Some of Glide’s built in components contain Options and Options can be added to custom components as well.

Options are applied to requests using the RequestOptions class:

import static com.bumptech.glide.request.RequestOptions.option;

Glide.with(context)
  .load(url)
  .apply(option(MyCustomModelLoader.TIMEOUT_MS, 1000L))
  .into(imageView);

You can also create a new RequestOptions object:

RequestOptions options = new RequestOptions()
  .set(MyCustomModelLoader.TIMEOUT_MS, 1000L);

Glide.with(context)
  .load(url)
  .apply(options)
  .into(imageView);

Or use the generated API:

GlideApp.with(context)
  .load(url)
  .set(MyCustomModelLoader.TIMEOUT_MS, 1000L)
  .into(imageView);