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.
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.
2011/10/17 at 13:55
HI,can you send me the whole project of this series article for me to study?thank you very much
2011/10/17 at 16:01
Hello Jacky,
I will publish the complete sourcecode of this series whith its last part, comming this evening (GMT +2).
Best regards
Johannes
2012/01/19 at 12:23
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
2012/01/23 at 10:00
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
2012/01/25 at 06:01
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
2012/01/25 at 10:47
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
2014/02/21 at 06:19
Can anyone please post how to use animations in widget?
My issue is i had a view with Animations….
I need to use that view in my widget
Can anyone come up with a answer as soon as possilble
2012/01/25 at 11:09
Thank u very much for the reply.I will try.
2012/04/24 at 08:41
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
2012/04/24 at 09:55
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
2012/07/07 at 11:10
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
2012/07/08 at 14:33
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
2012/08/07 at 07:30
How would I go about adding this to an ImageView?
2012/09/01 at 09:53
hi all…
Can anyone plz send me working sample of how to use gif images in android, im new to this domain
2012/09/06 at 07:36
Hi,The solution is ok eccept some unpleasure gifs,but this bug was solved in Android 4.0+,I have test it in a 4.0+ mobile.
2012/09/07 at 07:49
Hi ,
I tried your code, its working fine. I want to run GIF file only once.My GIF file is running again and again for indefinite time.
2012/11/16 at 09:36
Hi. Is it possible to play a gif image only when i tap the screen? Please reply. Thankyou!
2012/12/06 at 19:34
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
2012/11/20 at 10:53
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
2012/12/03 at 10:09
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
2012/12/06 at 19:44
Maybe you need to call invalidate() on it?
2012/12/06 at 20:20
I called invalidate()/postInvalidate() but nothing happened.
2012/12/10 at 14:09
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 =)
2012/12/12 at 07:38
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
2012/12/16 at 12:21
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.. =)
2013/04/30 at 14:28
Hi,
Thank you for this tutorial. I have a question and I have asked on StackOverflow,
can you see from there?
Thank you.
http://stackoverflow.com/questions/16302051/android-play-animated-gifs-from-a-file
2013/09/21 at 14:38
Hello friend…..
I am beginner to android development and wanna integrate gifs animation over pager
and have no idea how it get implemented …….please help if anyone has solution regarding my problem.
thanks an advance
2014/02/20 at 15:36
Hi,
I am trying your GifMovieView and it is successfully displayed animated GIF file.
I don’t know why I have to set android:minSdkVersion as less than 14, so my sample can be run successfully; if I set it as 14 or higher, my app is crash with fatal signal 11. Could you help to explain this.
Many thanks for your helpful guide.
Thanh
2014/03/17 at 05:45
i have exact the same problem, do you find the solution?
2014/03/06 at 09:53
I have recently started exploring things in android.
Can u pls share me the source code, as i am not able to find one in the link.
It would be of great help to start up on this.
Thanks in advance
Kiran
2014/03/06 at 22:18
Hi Kiran,
can you try this link: https://code.google.com/p/animated-gifs-in-android/source/browse/#svn%2Ftrunk%2FAnimatedGifs%2Fsrc%2Feu%2Fandlabs%2Ftutorial%2Fanimatedgifs
Best regards,
Johannes
2014/03/07 at 06:38
Hi Johannws Borchardt,
Thank you so much for u r help.
I am able create an AnimatedGIfs workspace in eclipse :), will try to explore more on it.
Regards,
Kiran
2014/11/05 at 09:13
it doesn’t work!
2015/02/24 at 10:35
How can i apply this to a fragment?
I am using an animation on image click in my code so how do I implement this to the code?
all help is appreciated.
2015/03/03 at 20:30
Hello Jay,
thank you for your question.
You can use this class just as you would use any custom view class, e.g. in your layout XML files.
Best regards,
Johannes
2015/04/21 at 17:22
hi…please can u help with this http://fc09.deviantart.net/fs70/f/2011/067/8/e/baby_alfred_animation_by_aiyana14-d3b7c1b.gif
i dont know how to make it full screen
2015/09/11 at 20:43
Thanks for this tutorial! Can I use this example freely in commercial software if I attribute it to you? You just didn’t mention any kind of license. I would recommend either the Apache or BSD license if you are not really worried about that kind of stuff.
2015/09/11 at 20:49
Nevermind I just saw on your Google Code page you decided to Apache 2.0 license it. Thanks a lot for this, it is a real lifesaver!
2016/03/17 at 07:55
Can you tell me how to scale the .gif image so that the live wallpaper will fit the variety of devices? Tried getWidth() and getHeight() methods but shows deprecated error message. Please help. Thank you