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.
Related Posts
Nithya Govind
Latest posts by Nithya Govind (see all)
- How to Display Image Gallery Using ViewPager in Android - April 12, 2015
- How to Display Google Map in Android - February 19, 2015
- How to List Drawable Images in Array XML in Android using TypedArray - February 18, 2015
Hi! Thanks! what type of image am I supposed to put in drawable. I downloaded the congradulations.gif image from this page and it is not working..
Hi Dan,
I have the same problem before. Now I solved it.
You can try to create a new folder in your “res” folder called “raw”, and put your icon there. The raw folder should contain all your gif files of your app.
Then replace
“InputStream is = getResources().openRawResource(R.drawable.gifname);”
with
InputStream is = getResources().openRawResource(R.raw.gifname);
dear dan, because the name of picture is congratulations1.gif . make changes in program
Use View.isInEditMode() in your custom views to skip code when shown in Eclipse
I had this issue and couldnt find a quick fix in google.
Played around and found that Andriod compresses images when sending MMS, so it breaks the GIF. But, if your GIF is under about 1MB, it will send. Iphone will auto play, andriod you have to click.
the biggest one i tested was 666KB.
Your welcome internet
For those who have wrong, they must change the following line:
InputStream is = getContext().getResources().openRawResource( + R.drawable.congratulations);
Getting an error “invalid resource directory name ” at first line of GIFView.java which i placed in ‘res’ folder. am using eclipse
Hey,very cool tutorial,but i have a question,how to use this for lots of gifs but using same gifview
Thanks
its a working very well but now how to change the image width and height will not change how can do this.
Hi,
It is not showing any animation,it is just displaying image placed in drawable