Johannes is the co-founder of 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.
2011/11/17 at 04:23
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?
2011/11/23 at 12:51
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
2012/03/28 at 23:37
same problem here, it is just show the first fram.
it’s look like a static picture not animated.
2012/06/21 at 22:24
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.
2012/06/27 at 11:43
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
2012/06/27 at 22:40
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.
2012/07/01 at 21:26
Great tutorial
I done it with simple webview and calling the loadUrl
2012/07/10 at 04:34
Can you post the entire code?
2012/07/10 at 15:31
Hi Reese,
you can find it on google code: http://droid-blog.net/2011/10/17/tutorial-how-to-play-animated-gifs-in-android-part-3/#comment-1029
Best regards
Johannes
2013/01/24 at 09:59
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.
2013/02/15 at 07:08
thanks buddy..it helped me alot
2013/03/16 at 03:20
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.
2013/04/21 at 17:26
Yes, you can just surround the path to your image with an img-tag and set the height and widt.
Regards,
Johannes
2013/04/20 at 13:25
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.
2013/04/21 at 15:05
Should be possible with the WebView. You can just add HTML around the path to your image in which you define the size of your GIF using the img-tag.
2013/07/19 at 12:20
Can anybody send and paste in WWW example source code?
2013/08/02 at 11:16
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.
2014/04/17 at 05:07
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?
2014/11/08 at 09:42
Just a quick note to say thank you for a clear and helpful tutorial.
Great job.
Alex
2014/12/09 at 16:19
Thanks Alex!
2015/04/14 at 08:20
Hi,
This works just fine on Android version below 5.0. On version 5.0, the .GIF image doesn’t even show up – just a blank square placeholder.
Thoughts?
2015/09/03 at 21:08
Does anybody know how to animate the WebP animation in android?
2016/10/10 at 23:15
Whats the reason you extend WebView with GifWebView, why not just use native WebView if all you are doing is calling loadURL()?
Great information, here. Thanks!
2016/12/31 at 06:36
Thanks Johannes, i’ve looked for this answer for several days. You just made a great explanation here. Great job man.
2017/01/01 at 12:07
I’m glad it was helpful, HyunSoo. Thank you for your comment!