How to Display the Animated GIF Image in Android

Hello Everyone,

In this blog post i am going to brief about how to display the animated gif image in Android.

It is not difficult to show animated image in Android. You can use one of the 2 method either Moview or Webview. Following example i am going to use Moview class for displaying animated image.

This is the image i am going to display in Android application.

Step 1:

Save your image which you want to display in drawable folder.

Step 2:

Create MainActivity.java in your source folder. Then copy and paste the following code.

public class MainActivity extends Activity {
	public void onCreate(Bundle savedInstanceState) {
		
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
}
}

Step 3:

Create a activity_main.xml file inside your resource folder. Next, copy and paste the following code.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:components="http://schemas.android.com/apk/res/com.example.YourPakageName"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
 
<com.example.YourPakageName.GIFView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
components:src="@drawable/congratulations" />
</LinearLayout> 

Step 4:

Create a file called GifView.java in your resource folder. Next, copy the following code in that class.

import java.io.InputStream;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Movie;
import android.net.Uri;
import android.util.AttributeSet;
import android.view.View;
 
public class GIFView extends View {
public Movie mMovie;
public long movieStart;

public GIFView(Context context) {
super(context);
initializeView();
}
 
public GIFView(Context context, AttributeSet attrs) {
super(context, attrs);
initializeView();
}
 
public GIFView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initializeView();
}
 
private void initializeView() {
//R.drawable.loader - our animated GIF
InputStream is = getContext().getResources().openRawResource(R.drawable.congratulations);
mMovie = Movie.decodeStream(is);
}
 
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.TRANSPARENT);
super.onDraw(canvas);
long now = android.os.SystemClock.uptimeMillis();
if (movieStart == 0) {
movieStart = now;
}
if (mMovie != null) {
int relTime = (int) ((now - movieStart) % mMovie.duration());
mMovie.setTime(relTime);
mMovie.draw(canvas, getWidth() - mMovie.width(), getHeight() - mMovie.height());
this.invalidate();
}
} 
private int gifId;

public void setGIFResource(int resId) {
this.gifId = resId;
initializeView();
}
 
public int getGIFResource() {
return this.gifId;
}
 } 

Step 5:

Next add the followin attrs.xml file inside “res/values” folder.

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="GIFView">
<attr name="src" format="reference" />
</declare-styleable>    
</resources>

Finally don’t forget to add android:hardwareAccelerated=”false” line to your Manifest file.
so the code will be:

 <activity
            android:name=".MainActivity"
            android:hardwareAccelerated="false"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

That’s it, run your code and get animated gif image.

Hope this blog post was helpful. Do let me know your feedback.