GIF Support now available in Xamarin.Forms

With the new pre-release version of Xamarin.Forms that just came out, you can now use animated GIF images! Of course it is super obvious what you can do with that, in this post I will show you how!

The support for animated GIF has been a long time coming, but recently the PR was cleaned up and merged into the repository. You can now use this from version 4.4-pre3 and up on iOS, Android and UWP.

How to use a GIF #

Actually, this is the seriously easy part: just load it into the existing Image control! You have probably worked with images before, that’s also how it works for GIF images. Add it to the platforms projects, or as an embedded resource in the shared project and use it like a regular image.

That’s all basically. The API on the Image control has been extended with the IsAnimationPlaying property. Simply set that to true to see the GIF do its magic!

This property can also be used to bind your property to. That means you can control if your animation is playing in accordance with your MVVM pattern.

Without further ado, here is a GIF of a Xamarin.Forms app playing a GIF. GIF-ception if you will.

A GIF showing a GIF in a Xamarin.Forms app

In the above sample my animation just plays once and is not looping. That is why it might look a bit weird. If you have a looping animation, that should work just fine as well.

The code for this little sample app can be found on my GitHub: https://github.com/jfversluis/AnimatedGifForms.

Good to know #

There are a couple of things that are good to know. For UWP this only works from SDK 1607 and up, which is also the UWP version recommended to use with Xamarin.Forms as a whole.

For Android the support is only implemented for the Fast Renderers. While the Fast Renderers are turned on by default for a while now, if you have the Legacy Renderers flag turned on you will not see the animation.

In closing #

The popularity of these animated images has never been higher, so it was about time that you could finally use them with Forms. If you’re looking for some more advanced animations you might want to have a look at the Lottie plugin. I blogged about that a while ago.

What do you think about this support? Liking it? Does it miss any features? Please let me know!

If you like Spanish more, please refer to this post by my good friend and colleague Javier.