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

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.

39 Comments

  1. HI,can you send me the whole project of this series article for me to study?thank you very much

  2. 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

  3. 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

  4. Thank u very much for the reply.I will try.

  5. 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

  6. 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

  7. How would I go about adding this to an ImageView?

  8. hi all…
    Can anyone plz send me working sample of how to use gif images in android, im new to this domain

  9. 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.

  10. Himanshu Doshi

    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.

  11. 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

  12. 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

  13. Trilochan Singh

    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

  14. Trilochan Singh

    2012/12/06 at 20:20

    I called invalidate()/postInvalidate() but nothing happened.

  15. 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.. =)

  16. beyza kokcan

    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

  17. Vivek Singh

    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

  18. 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

  19. 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

  20. 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

  21. tomasrosicky

    2014/11/05 at 09:13

    it doesn’t work!

  22. 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.

    • 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

  23. 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

  24. 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.

    • 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!

  25. varun puravankara

    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

Leave a Reply to Johannes Borchardt Cancel reply

Your email address will not be published.

*

© 2024 Droid-Blog

Theme by Anders NorenUp ↑