Android development and money stuff

Newsletter

Subscribe to the Droid-Blog.net newsletter

About Johannes Borchardt

Johannes is the co-founder of ANDLABS, a company specialized in Android development. Starting his mobile career in 2008, he has been building up Android expertise since the beginning. He has helped several bluechip companies get their Android apps ready, gives talks on conferences on a regular basis and published several articles in field-related journals.
Continue reading

Worth clicking

Blogroll

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 2: Extracting the Bitmaps

For this approach, we will use the GifDecoder class published here on googlecode. It’s Apache licensed, so don’t worry. What this class esentially does is, it extracts the different bitmaps from the given stream so you can use it the way you want.

To get started, download this class first. Place it somewhere in your project, maybe in a util package.
Now, we create a new class which inherits from ImageView:

public class GifDecoderView extends ImageView

We create a constructor with a Context and an InputStream, just like in the first part of this series. This time, we call a method playGif(InputStream) and pass it our InputStream:

We give our class five member variables: A boolean which will state whether the thread we will use to play our animation is runningor not, an instance of the GifDecoder-class you just downloaded, a Bitmap which stores the different frames of the animation, a Handler to post our updates to the UI-thread and a Runnable that will arrange that the Bitmap we just defined will be drawn using the Handler:

Now we need to define our thread. We retreive the frame count of our GIF’s frames and the number of repetitions. When GifDecoder.getLoopCount() returns 0, this means the GIF should be played infinitely. Now for every frame, we receive the according Bitmap by calling getFrame() on the GifDecoder. We post our new Bitmap using the Handler and Runnable members we defined and send our thread to sleep until the next Bitmap needs to be drawn.

Now, what’ the bad thing about this? It’s the memory footprint. Bitmaps on pre-Honeycomb-devices are stored in an native heap, not in the heap the Dalvik VM uses. Still, this heap counts to the maximum of memory your app can use. So when you have a lot of Bitmaps, the garbage collector might not notice that you are running out of memory because it only controls the heap of the Dalvik VM. To avoid this, make sure you call recycle() on every Bitmap you don’t need anymore. If you want to see how much space your native heap allocated, call Debug.getNativeHeapAllocatedSize().

If you want to know another, maybe better way of playing animated GIFs, stay tuned: The next part of this series will come soon.

Thanks so much for this. The methods were great, particularly the second method. I ended up refactoring it to make an on the fly decoder since I wanted to guarantee playback whilst reducing memory footprint. For my purposes the processor usage was not as much of an issue. Let me know if you want to see the code.

i have 2 problems with Gif Decoder
1- i use it inside Grid view , multiple gifs run simultaneously , error occured when i scroll down then
up again some gifs change positions or some gifs overlap other and other not appeared in screen O_O

2 – the VM size is out of memory and i don’t know how i can replace this bitmaps with grid view
where i can put size line of code , and theres many bitmaps in Gifdecoder and Gif Decoder view

Hello Johannes,
From your tutorial, the GIF needs to be initially put in /assets folder. Besides, it displays one GIF at one time. A similar use case to Moaz’s I came across is we have to download bunch of files with MIMETYPE of ‘image/JPEG/PNG/GIF’, from a remote server and populate them in a ListView. So a custom ImageView in a row of the ListView would be set as a GIF, or JPEG, or PNG. In this regard, I tried your GifDecoder and GifDecoderView but caught an ArrayIndexOutOfBoundException from gifDecoder.getFrame(index) when playGif() got called in the ListView. Similarly, when I modified a bit to avoid this RuntimeException, the OME issue blocked the main thread seriously and the system log complained “Skipped N frames blabla…”

Thanks for your quick reply.
Actually I never tried a WebView in a ListView. For a specific GIF or other image files, probably it works fine. In my project, however, I have to use an ImageView in a ListView and its relevant adapter to render data from remote. I have to decode the media resources and get a thumbnail respectively. Meanwhile, the MIMETYPE of data could be any type and be clickable to show in full size or play back if it’s video/mp4 or audio/3gpp.
So what I concern is the memory consumption in the ListView. In terms of WebView, if it replaces ImageView in the list, the WebView seems to load data from local storage each time if there is.
Do you have any idea in this scenario? I do need to display GIF properly.

I see. Some time has passed since I worked with WebView the last time but I think there are options to change its caching policy and also to write into the cache. From the measurements I did back then, it worked much less memory intensive than by decoding the GIF myself.

..However, when I implemented this in my own app, for some reason my GIF image looks like it was sped up to about 10 times the original speed!! I tried to alter the delay values in various parts of the code, but I cannot figure out why my gif has been sped up so much!

Hi Johannes … I came across your tutorial just recently, and because I want to use this example in WallpaperService, I have NO layout xml as such. I run into a problem with setContentView … cannot resolve method setContentView(GifDecoderView). Do you have any ideas for a workaround?