In the previous tutorials you've looked at displaying images from all kind of sources. You've learned how to manipulate the image display, change the size and scaling of the images with standard options. This tutorial will show you a unique feature of Glide: displaying Gifs and thumbnails of local videos.

Glide Series Overview

Displaying Gifs

A lot of image loading libraries ship with the functionality to load and display images. Gif support is something special and very helpful if you need it in your app. Glide makes the experience with Gifs especially amazing because it's so simple. If you want to display a Gif, you can just use the same regular call you've been using in the past with images:

Glide 4.x

String gifUrl = "http://i.kinja-img.com/gawker-media/image/upload/s--B7tUiM5l--/gf2r69yorbdesguga10i.gif";

GlideApp  
    .with(context)
    .load(gifUrl)
    .into(imageViewGif);

Glide 3.x

String gifUrl = "http://i.kinja-img.com/gawker-media/image/upload/s--B7tUiM5l--/gf2r69yorbdesguga10i.gif";

Glide  
    .with(context)
    .load(gifUrl)
    .into(imageViewGif);

That's it! This will display the Gif in the ImageView and automatically start playing it. Another great thing about Glide is that you still can use all your standard calls to manipulate the image Gif:

Glide 4.x

GlideApp  
    .with(context)
    .load(gifUrl)
    .placeholder(R.drawable.cupcake)
    .error(R.drawable.full_cake)
    .into(imageViewGif);

Glide 3.x

Glide  
    .with(context )
    .load(gifUrl )
    .placeholder(R.drawable.cupcake)
    .error(R.drawable.full_cake)
    .into(imageViewGif);

Gif Check

A potential issue with the code above is, that if the source you provide is not a Gif, and maybe just a regular image, there is no way of registering that issue. Glide accepts Gifs or images as the load() parameter. If you, the developer, expect that the URL is a Gif, which is not the case, Glide can't automatically detect that. Thus, they introduced an additional method to force Glide into expecting a Gif asGif():

Glide 4.x

GlideApp  
    .with(context)
    .asGif()
    .load(gifUrl)
    .error(R.drawable.full_cake)
    .into(imageViewGifAsGif);

Glide 3.x

Glide  
    .with(context)
    .load(gifUrl)
    .asGif()
    .error(R.drawable.full_cake)
    .into(imageViewGif);

If the gifUrl is a gif, nothing changes. However, unlike before, if the gifUrl is not a Gif, Glide will understand the load as failed. This has the advantage, that the .error() callback gets called and the error placeholder gets shown, even if the gifUrl is a perfectly good image (but not a Gif).

Cache Settings

In most cases, the Gif will load significantly faster when you're using the correct cache setting.

Glide 4.x

GlideApp  
    .with(context)
    .load(gifUrl)
    .asGif()
    .error(R.drawable.full_cake)
    .diskCacheStrategy(DiskCacheStrategy.DATA)
    .into(imageViewGif);

Glide 3.x

Glide  
    .with(context)
    .load(gifUrl)
    .asGif()
    .error(R.drawable.full_cake)
    .diskCacheStrategy(DiskCacheStrategy.SOURCE)`
    .into(imageViewGif);

Display Gif as Bitmap

If your app displays a unknown list of Internet URLs, it might encounter regular images or Gifs. In some cases, you might be interested in not displaying the entire Gif. If you only want to display the first frame of the Gif, you can call asBitmap() to guarantee the display as a regular image, even if the URL is pointing to a Gif.

Glide 4.x

GlideApp  
    .with(context)
    .asBitmap()
    .load(gifUrl)
    .into(imageViewGifAsBitmap);

Glide 3.x

Glide  
    .with(context)
    .load(gifUrl)
    .asBitmap()
    .into(imageViewGifAsBitmap);

This should give you all the knowledge to display Gifs with Glide. It's easy, try it!

Display of Local Video Thumbnails

Another step up from Gifs are videos. Glide is also able to display the thumbnail of videos, as long as they're stored on the phone. Let's assume you get the file path by letting the user select a video:

Glide 4.x

String filePath = "/storage/emulated/0/Pictures/example_video.mp4";

GlideApp  
    .with(context)
    .asBitmap()
      .load(Uri.fromFile(new File(filePath)))
    .into(imageViewGifAsBitmap);

Glide 3.x

String filePath = "/storage/emulated/0/Pictures/example_video.mp4";

Glide  
    .with(context)
    .load(Uri.fromFile(new File(filePath)))
    .into(imageViewGifAsBitmap);

One more time: it's important to note that this only works for local videos. Videos, which are not stored on the device (for example Internet URLs), will not work! Additionally, this will only display the first frame of that video.

If you want to play videos or view videos from an Internet URL, look into the VideoView class.

Outlook

After reading this tutorial, you should be able to work with Gifs and local videos as well as you already can with images. Glide makes working with Gifs very smooth and convenient.

In the next tutorial, we'll introduce Glide's thumbnail system to you.