How to play animated GIF image from url in android?

Question

I am integrating giphy to my android app..

How can i play animated gif image from URL in android? Should I use ImageView, WebView, VideoView etc? For example if i want to play animation from this URL.

http://stackoverflow.com/questions/3660209/display-animated-gif — Zied R., Nov 03 '14 at 10:22
http://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html — Naufal, Nov 03 '14 at 10:22
If you did R & D then you could find it. http://gayashan-a.blogspot.in/2012/02/android-how-to-display-gif-image-in.html , http://android-er.blogspot.in/2014/03/load-animated-gif-from-internet.html , http://androidsurya.blogspot.in/2014/03/how-to-load-animated-.gif-from-internet-programmatically-in-android-example-how-to-show-gif-images-in-android.html — Piyush, Nov 03 '14 at 10:23
@Dev i tried that but it looks like i opened the website as it howing all options..i just want user to see the animated gif..i tried what Javanator has written nd it works perfectly for the url he provided but doesn't work for my url.. — Android Developer, Nov 03 '14 at 11:27
becuase your url is of complete web not of image only..ask from server guys, even if you hit this url in web browser in system ,then also it display whole page. — Pankaj Arora, Nov 03 '14 at 11:37

Rohit Sharma · Accepted Answer · 2014-11-03T11:16:36.133

2

Just create a html string and load that into android webview. Tested solution.

http://developer.android.com/reference/android/webkit/WebView.html#loadData(java.lang.String, java.lang.String, java.lang.String)

 String x = "<!DOCTYPE html><html><body><img src=\"http://goo.gl/uPJ9P2\" alt=\"Smileyface\" width=\"100%\" height=\"100%\"></body></html>";

 webView.loadData(x, "text/html", "utf-8");

edited Nov 03 '14 at 11:16

answered Nov 03 '14 at 10:24

Rohit Sharma

13,787
8
57
72

is this way i should put url inside String x="http://giphy.com/gifs/funny-cat-DFiwMapItOTh6" – Android Developer Nov 03 '14 at 10:39
Can u plzz write what should i put inside string x..the code u gave above doesn't have starting body tag but does have an ending body tag?and is img a tag?thanku for ur time... – Android Developer Nov 03 '14 at 10:42
@user3753273 check now – Rohit Sharma Nov 03 '14 at 10:53
String x = ""; i tried this but it shows error in code " insert ";" to complete LocalVariableDeclarationStatement"..maybe because of quotation mark..if i remove all quotations mark app runs but it shows blank webview...should i use quotation marks or not..i am fresher ..thanks for ur time... – Android Developer Nov 03 '14 at 10:57
if i copy paste ur code that also shows syntax error, insert ";" to complete LocalVariableDeclarationStatement – Android Developer Nov 03 '14 at 10:58
yes you have to take care of escape characters else it will not form a proper string. @user3753273 check now. I edited it for you – Rohit Sharma Nov 03 '14 at 10:59
it works fine for the url given by you but shows blank webview for my url..i am integrating giphy and using url from this doc..https://github.com/giphy/giphyapi...example..i tested with this url http://giphy.com/gifs/funny-cat-DFiwMapItOTh6 – Android Developer Nov 03 '14 at 11:15
your url is not a valid image url. Its a url of webpage. Use a valid gif image url. – Rohit Sharma Nov 03 '14 at 11:18
i tested with this url also but didn't worked.. http://media4.giphy.com/media/DFiwMapItOTh6/200.gif ..plzz check out this doc https://github.com/giphy/giphyapi nd let me know wht url to use to play video..i have pared "Search Endpoint" – Android Developer Nov 03 '14 at 11:20

score 1 · Answer 2 · answered Nov 03 '14 at 10:26

Try this way

    Movie movie;
    GifView(Context context) {
        super(context);
        movie = Movie.decodeStream(
                context.getResources().openRawResource(
                        R.drawable.some_gif));
    }
    @Override
    protected void onDraw(Canvas canvas) {   
        if (movie != null) {
            movie.setTime(
                (int) SystemClock.uptimeMillis() % movie.duration());
            movie.draw(canvas, 0, 0);
            invalidate();
        }
    }

i want to play from url..should i replace R.drawable.some_gif with url? — Android Developer, Nov 03 '14 at 10:27

score 1 · Answer 3 · answered Nov 17 '15 at 03:42

1

I'd recommend using a third-party library like Glide that can support GIFs.

I made a quick example app for displaying a GIF from Giphy's API here.

Hope that helps

answered Nov 17 '15 at 03:42

Nick Millward

11
3

score 0 · Answer 4 · answered Nov 03 '14 at 10:28

The general sketch of the solution is to use employ custom View which draws asks a Movie to draw itself to the Canvas periodically.

The first step is building the Movie instance. There is factory called decodeStream that can make a movie given an InputStream but it isn't enough to use the stream from a UrlConnection. If you try this you will get an IOException when the movie loader tries to call reset on the stream. The hack, unfortunate as it is, is to use a separated BufferedInputStream with a manually-set mark to tell it to save enough data that reset won't fail. Luckily, the URLConnection can tell us how much data to expect. I say this hack is unfortunate because it effectively requires the entire image to be buffered in memory (which is no problem for desktop apps, but it is a serious issue on a memory-constrained mobile device).

Here is a snip of the Movie setup code:

URL url = new URL(gifSource);
URLConnection conn = url.openConnection();
InputStream is = conn.getInputStream();
BufferedInputStream bis = new BufferedInputStream(is);
bis.mark(conn.getContentLength());
Movie movie = Movie.decodeStream(bis);
bis.close();

Next, you need to create a view that will display this Movie. A subclass of View with a custom onDraw will do the trick (assuming it has access to the Movie you created with the previous code).

@Override protected void onDraw(Canvas canvas) {
    if(movie != null) {
        long now = android.os.SystemClock.uptimeMillis();
        int dur = Math.max(movie.duration(), 1); // is it really animated?
        int pos = (int)(now % dur);
        movie.setTime(pos);
        movie.draw(canvas, x, y);
    }
}

The view won't trigger itself to be redrawn without help, and blindly calling invalidate() at the end of onDraw is just an energy waste. In another thread (probably the one you used to download the image data), you can post messages to the main thread, asking for the view to be invalidated at a steady (but not insane) pace.

Handler handler = new Handler();
new Thread() {
    @Override public void run() {
        // ... setup the movie (using the code from above)
        // ... create and display the custom view, passing the movie

        while(!Thread.currentThread().isInterrupted()) {
            handler.post(new Runnable() {
                public void run(){
                    view.invalidate();
                }
            });
            try {
                Thread.sleep(50); // yields 20 fps
            } catch (InterruptedException e) {
                Thread.currentThread().interrupt();
            }
        }
    }
}.start();

hope it will help you to understand

How to play animated GIF image from url in android?

4 Answers4

Linked