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.
Approach 1: Using Movie
Android provides the class android.graphics.Movie. This class is capable of decoding and playing InputStreams. So for this approach, we create a class GifMovieView and let it inherit from View:
Public class GifMovieView extends View
Now we create a constructor that receives a Context object and an InputStream. We provide our class a member variable which is an instance of the Movie class. We initialize this member by calling Movie.decodeStream(InputStream):
private Movie mMovie;
public GifMovieView(Context context, InputStream stream) {
super(context);
mStream = stream;
mMovie = Movie.decodeStream(mStream);
}
Now that our Movie-object is initialized with our InputStrem, we just need to draw it. We can do this by calling draw(Canvas, int, int) on our Movie-object. Because we need a Canvas, we should do this in onDraw(). But before we drawing, we have to tell our object what to render. For that, we need a simple calculation to determine how much time has passed since we started the Movie. To do that, we need another member of the primitive type long, I named it mMoviestart. Now we get a timestamp, for example by calling SystemClock.uptimeMillis() or System.currentTimeMillis(). We determine how much time went by since our movie started and tell our movie to play draw the according frame. After that, we invalidate our view so that it’s redrawn:
private long mMoviestart;
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.TRANSPARENT);
super.onDraw(canvas);
final long now = SystemClock.uptimeMillis();
if (mMoviestart == 0) {
mMoviestart = now;
}
final int relTime = (int)((now - mMoviestart) % mMovie.duration());
mMovie.setTime(relTime);
mMovie.draw(canvas, 10, 10);
this.invalidate();
}
All we have to do now is initialize our new View with a Context and an InputStream and set it as content view, we can do this in our Activity like this:
// ...
InputStream stream = null;
try {
stream = getAssets().open("piggy.gif");
} catch (IOException e) {
e.printStackTrace();
}
GifMovieView view = new GifMovieView(this, stream);
setContentView(view);
// ...
That was easy, right? So where’s the contra? Well, here it is:
As you can see, the Movie-class is not able to deal with every type of animated GIFs. For some formats, the first frame will be drawn well but every other won’t. So when you walk this route, make sure your GIFs are displayed correctly.
If you want to know another, maybe better way of playing animated GIFs, stay tuned: The next part of this series will come tomorrow.
You can checkout the code of the three parts of this series at http://code.google.com/p/animated-gifs-in-android/.
As always, please feel free to leave your thoughts in the comments.
Johannes is the co-founder of 
ashish (2)
Mahan (2)
Ahmed (1)
Akshay (1)
Alan (1)
HI,can you send me the whole project of this series article for me to study?thank you very much
Hello Jacky,
I will publish the complete sourcecode of this series whith its last part, comming this evening (GMT +2).
Best regards
Johannes
hi,there,i implemented ur solution,and it worked.but now the problem is,on click of imageview i m opening 1 animated gif image.till this working fine,but this opening animated image is drawing new canvas so my earlier imagview and rest things are going and complete new canvas is coming.i want to open new animated image on the same page.can u plzzz help me.
and thnx for the tutorial
Hi supriya,
sorry for my late reply. You can use the GifMovieView just like any other view. You can just add it to your layout programmatically, use it in a new activity, a dialog or whatsoever. You can also modify it so that you can include it via your XML-layout. In short: you can do anything you can do with any other view with it, but might have to add some functionality. And you have to know the basics of layouts in Android.
Best regards
Johannes
Hi,
Johannes Borchardt..
thank you very much for the reply.i used the solution which u told,but now the problem as u mentioned in ur tutorial is happening,some GIF’s are working perfectly fine on emulator while testing,but not all.so i jus wanted to ask u,if those animated images are not working on emulator does that mean it wil not work on tat configuration devices also?bcz i hv 2.2.1 device and its working fine,but before going ahead i want to knw that it is wrkn on all devices.any idea about it?
Regards,
Supriya
Hello supriya,
in the most cases, GIF-Animation restricted by the Hardware of the device. If you want to animate GIFs, no matter the price, you maybe should try the version of the second part of this tutorial series.
Good luck!
Best regards
Johannes
Thank u very much for the reply.I will try.
New to Android framework:
I want to be able to place the GifMovieView in an existing layout (like any regular control).
Please give me a step-by-step of how to bind xml layout attributes to this custom view.
I have a feeling attrs.xml has a role to play in this.
Thanks
Jack
Hello Jack,
excelent question. Please take a look here: http://droid-blog.net/2012/04/24/how-to-add-attributes-to-your-custom-view/
Best regards
Johannes
Pingback: How to add attributes to your custom View
Pingback: First anniversary of Droid-Blog.net
I want to play my gif image in full screen mode, its fills only part of the screen rest of screen is showing blank ,
could you please help me doing this
Hi sushant,
maybe you want to put the GifMovieView into a XML layout and play with the width and height a little. If that’s not working, you should take a look on how to resize a android.graphics.Movie-Object.
It would be great if you could share your findings.
Best regards
Johannes
Hi. Is it possible to play a gif image only when i tap the screen? Please reply. Thankyou!
Hi Mina,
yeah, sure. Just pull the Movie.decodeStream(mStream) into a setter method and do a nullcheck on mMovie before doing all the stuff on onDraw(). Then call the setter method on click.
Best regards
Johannes
I tried the tutorial and I can get the gif playing fine on my emulator, but on my device it does not show at all. I created a question on stack overflow related to my problem http://stackoverflow.com/questions/13470037/gif-works-on-emulator-but-not-on-device
Hi Johannes,
I want to use that custom view class in getView() method of extended adapter class. But when I am using this class and adding into layout. It’s onDraw() method is not getting called. Can you please help me on this?
Thanks,
Trilochan
Maybe you need to call invalidate() on it?
I called invalidate()/postInvalidate() but nothing happened.
i able to start my animation..
but this method only show the animation itself..
i cant set any layout .. or add some other button in the same page with the gif ..
and i need to stop the animation after 2 or 3 times it play…
actually this is my homework, it make me really big head.. to settle that prob ..
can u please tell me how to do that ?
thanks =)
Hi Xin,
to let the animation play a certain amount of times is easy: just measure how many times the time of the movie duration passed and stop the updates after x passings.
The layout seems to be more difficult: I don’t know of any simple way to resize a movie at the moment. If you find one, it would be great I’d you could share it though.
Best regards
Johannes
this method is nice actually…but i have found another method in youtube..with that method i can set a layout together with the gif..
thank you very much for this tutorial also.. =)