Tutorial: How to play animated GIFs in Android – Part 3

Animated GIFs in Android is a difficult topic. It is an issue that has been discussed heavily and still, it is very difficult for developers to bring GIFs to life. There are three ways to animate GIFs on Android, each of them has its pros and cons. Each part of this series will cover one of these approaches.

Getting started

For this example, we will use an image I found on gifs.net, it’s this one:

I will store it in our project’s asset folder and name it ‘piggy.gif’. We will also use an Activity to set the views we define as content views. If you want to know everything about playing GIFs, please start at part one.

Approach 3: Using a WebView

This is the by far easyest way. As you might know, a WebView is able to do what a browser does. And since the browser of Android devices using Android 2.2 + supports the animation of GIFs (at least on most devices), we can just use that.

So, at first, we extend our own class by a WebView:

public class GifWebView extends WebView

We create a constructor that takes both a context to call the constructor of the mother-class and a path to the file. We use loadUrl() to load that file into our WebView:

   public GifWebView(Context context, String path) {
      super(context);
      loadUrl(path);
   }

Now, let’s go back to our Activity which we created in the first tutorial. Here, we create our view and pass it a context and path to our GIF-file:

   GifWebView view = new GifWebView(this, "file:///android_asset/piggy.gif");
   setContentView(view);

And now, believe it or not, we are done.

Movie, GifDecoder or WebView?

Which way you take depends on your needs. When your app is targeting users mainly using devices with Android 2.2+, the way described above is probably your way to go. If you want to support as many devices as possible and don’t care much about memory footprint, you can also use the GifDecoder-method. When you want to support many users but don’t want to recycle tons of Bitmaps, and are sure the format of your GIFs can be played using the Movie-class, then this approach is for you.

Personally, I prefer the WebView-way. Because WebKit is already implemented native, it’s memory footprint is really low, especially when compared to the GifDecoder. Operations on images like scaling can be performed simply by using HTML and the overall code is really short and pretty.

 

You can checkout the code of the three parts of this series at http://code.google.com/p/animated-gifs-in-android/.

 

Which method do you like best? As always, please feel free to leave your thoughts in the comments.

19 thoughts on “Tutorial: How to play animated GIFs in Android – Part 3

  1. Tried using this method, webview with gif image, tried just everything, however webview only shows first image.
    I have tried with 6 different gifs from different sources.
    It does not animate at all in webview.
    Tried it on my phone and on emulator but it does not work.
    I guess, if webview is used in browser and gif still does not animate, where it should work?
    Any suggestion what to do next?

    1. Hi there,
      GIF animation via the WebView does not work on all devices. The Emulator will most likely not play them, some weaker 2.2 devices too. One solution to make it still work is to decote your byte stream as described here.

      Best regards
      Johannes

  2. same problem here, it is just show the first fram.
    it’s look like a static picture not animated.

  3. I have been trying to do some animation in a widget, but after a while of research I am reaching the conclusion that this is not possible. Has any one ever done this? I would appreciate any Ideas.

    1. Hi Jorge,

      Maybe it’s possible when forcing the widget to refresh very often (like every 30 milliseconds) and then do a old school hand-drawn animation. But this is really bad programming style, of course!

      Best regards
      Johannes

  4. Thanks Johannes.

    You are right, I did think about that but as you mentioned It wouldn’t be a good practice and also the battery would suffer a lot, I imagine.

  5. Hi,
    I tried running this code but every time I get same error stating it is unable to find any file at assets folder. What can be the reason ? I am trying to run with emulator having API level 11.
    Kindly help its important for my project.

  6. Thanks Johannes for this great tutorial. There is one thing I want to know about loading GIF with WebView, can we set the size of the image loaded? I think it loads the original image size on the WebView.

  7. Thanks a lot for this tutorial.

    I am trying to make a splash screen with an animated gif as the background over which I will be providing a login button.
    The WebView trick wont allow me to stretch the gif so that it always fills up the full screen right ?
    Can the other 2 solutions do the trick.

    Thanks again.

  8. Hey, I´m a newbie to Android.
    I tried webview, I´m loading image from internet, and everything is working.
    I want to load the image to layout (one specific place) so, I set the attributes from layout file and want to load gif to the WebView in layout file. How should I send the loaded gif to webview?

    Thanks.

  9. My .gif works great with WebView on my Nexus 7 tablet. Is it possible to have this inside one of my existing activities instead of it taking up an entire view?

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.