How to Display Animated GIF in an Android Application

Graphics Interchange Format(GIF) pictures play a huge part in little picture movement. Actually Android doesn’t provide any support for GIF animation in the image view, but displaying a GIF image in an android application is not an exhausting process. This article gives you a complete information about displaying GIF in an android application.

Follow this steps for displaying animated gif in an android application:

1: Create new project (eg. AnimatedGif)

2: Select Target SDK Version

3: Now select Empty Activity

4: now click on Finish button and project is setup

5: Project Structure

6: Create a package named “Utils” under src folder and create a class named “GifImageView” under that package

File: src/utils/GifImageView.class

package com.android.animatedgif.Utils;import android.content.Context;import android.graphics.Canvas;import android.graphics.Movie;import android.net.Uri;import android.os.SystemClock;import android.util.AttributeSet;import android.util.Log;import android.view.View;import java.io.FileNotFoundException;import java.io.InputStream;public class GifImageView extends View {    private InputStream mInputStream;    private Movie mMovie;    private int mWidth, mHeight;    private long mStart;    private Context mContext;    public GifImageView(Context context) {        super(context);        this.mContext = context;    }    public GifImageView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public GifImageView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        this.mContext = context;        if (attrs.getAttributeName(1).equals("background")) {            int id = Integer.parseInt(attrs.getAttributeValue(1).substring(1));            setGifImageResource(id);        }    }    private void init() {        setFocusable(true);        mMovie = Movie.decodeStream(mInputStream);        mWidth = mMovie.width();        mHeight = mMovie.height();        requestLayout();    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        setMeasuredDimension(mWidth, mHeight);    }    @Override    protected void onDraw(Canvas canvas) {        long now = SystemClock.uptimeMillis();        if (mStart == 0) {            mStart = now;        }        if (mMovie != null) {            int duration = mMovie.duration();            if (duration == 0) {                duration = 1000;            }            int relTime = (int) ((now - mStart) % duration);            mMovie.setTime(relTime);            mMovie.draw(canvas, 0, 0);            invalidate();        }    }    public void setGifImageResource(int id) {        mInputStream = mContext.getResources().openRawResource(id);        init();    }    public void setGifImageUri(Uri uri) {        try {            mInputStream = mContext.getContentResolver().openInputStream(uri);            init();        } catch (FileNotFoundException e) {            Log.e("GIfImageView", "File not found");        }    }}

7: Now define GifImageView in MainActivity

File: src/activity/MainActivity.class

package com.android.animatedgif.Activity;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import com.android.animatedgif.R;import com.android.animatedgif.Utils.GifImageView;public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        GifImageView gifImageView = (GifImageView) findViewById(R.id.GifImageView);        gifImageView.setGifImageResource(R.drawable.smartphone_drib);    }}

8: Now UI Part

File: res/layout/activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:gravity="center"    android:background="#111E39"    tools:context=".Activity.MainActivity">    <com.android.animatedgif.Utils.GifImageView        android:id="@+id/GifImageView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true" />    </RelativeLayout>

9:Now run the app

See Demo

Download the demo project –>Download Demo

Cheers !!!