Display Animated GIF

java

android-development

image-loading

animation

byAlex Kataev·Sep 24, 2024

Here's a quick solution to display an animated GIF in Java using ImageIcon and JLabel:

import javax.swing.*;

public class GifDisplay {
    public static void main(String[] args) {
        ImageIcon gif = new ImageIcon("animated.gif"); // replace with your own gif
        JLabel label = new JLabel(gif);

        JFrame frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(label);
        frame.pack();
        frame.setVisible(true); // tada! It's magic!
    }
}

Just replace "animated.gif" with your GIF's file path and watch the magic unfold on your screen.

Alternative methods in diverse environments

Even though Swing provides a straightforward way to display GIFs, it's prudent to explore alternative methods suitable for varying needs or programing environments, like Android applications.

Making Glide work for you in Android

Android developers, it's now more convenient to handle animated GIFs using the Glide library. Consider it a magic wand, simplifying the process of loading and displaying animated GIFs:

Glide.with(context).asGif().load(GIF_URI).into(imageView); // load, set, and forget!

WebView and animated GIFs

An often overlooked method in displaying an animated GIF is within a WebView. By utilizing HTML, you can dynamically load the GIF using the loadDataWithBaseURL() method:

String html = "<html><body style='margin:0;padding:0;'><img src='file:///android_asset/animated.gif' /></body></html>";
webView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null); // embed GIF like a pro!

Frame-by-frame with AnimationDrawable

An animated GIF can be treated as a film reel and manipulated frame-by-frame with AnimationDrawable. With this approach, the GIF can be broken down and converted into Drawable components for more custom animations:

AnimationDrawable animation = new AnimationDrawable();
animation.addFrame(getResources().getDrawable(R.drawable.frame1), 100);
animation.addFrame(getResources().getDrawable(R.drawable.frame2), 100);
//... the magic of animation
imageView.setBackground(animation);
animation.start();

Advanced Techniques for GIFs

This section comprises some advanced practices and custom implementations for your animated GIF needs.

Too big? Let's handle it!

For large animated GIFs, loading efficiency is a priority. Get rid of any stuttering by breaking down GIFs into frames and effectively managing memory:

BufferedInputStream bis = new BufferedInputStream(new FileInputStream(new File(GIF_PATH))); // because size matters 😉
Movie movie = Movie.decodeStream(bis);

Custom View FTW

Extending the View class opens up a lot of possibilities. Having full control over drawing on the canvas ensures precise and optimized rendering of the GIF:

public class CustomGifView extends View {
    private Movie movie; // an epic one!
    public CustomGifView(Context context, AttributeSet attrs) {
        super(context, attrs);
        InputStream is = context.getResources().openRawResource(R.raw.animated_gif);
        movie = Movie.decodeStream(is); // it's show time!
    }
    @Override
    protected void onDraw(Canvas canvas) {
        long now = SystemClock.uptimeMillis(); // need... more... coffee...
        if (movie != null) {
            int dur = movie.duration();
            if (dur == 0) {
                dur = 1000; // less than a blink!
            }
            int relTime = (int)((now % dur));
            movie.setTime(relTime);
            movie.draw(canvas, 0, 0);
            invalidate(); // refresh! refresh! refresh!
        }
    }
}

Glide again? Yes, more Glide!

Glide isn't just for simple loading of images. It greatly reduces the effort required for animated GIFs, handling decoding, caching, and memory management:

Glide.with(this).load(gifUrl).into(new DrawableImageViewTarget(imageView)); // working hard so you don't have to!

explain-codes / Java / Display Animated GIF

Linked

How to add an image to a JPanel?



How to display HTML in TextView?



Html5 element on Android



How to load external webpage in WebView



How to set background drawable programmatically in Android



Html5 Canvas Rotate Image



Turning a string into a Uri in Android



Alternative methods in diverse environments Advanced Techniques for GIFs