Glide — Displaying Gifs & Video Thumbnails

In the previously published blog posts we've looked at displaying images from all kind of sources. We've learned how to manipulate the image display, change the size and scaling of the images with standard options. This blog post will show you a unique feature of Glide: displaying Gifs and 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:

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  
    .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  
    .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 .diskCacheStrategy(DiskCacheStrategy.SOURCE):

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

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

Outlook

After reading this blog post, 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. Next week, we'll introduce Glide's caching system to you.

Explore the Library

Find interesting tutorials and solutions for your problems.

Miscellaneous