[ANDROID TUTORIAL] Playing GIF Animation In ImageView

Hey There !

Android actually supports gif files but doesnt play the animation. There are different ways to play the animation e.g "webView" , "videoView" etc.
Here We will be using "imageView" to do it, and "AnimationDrawable" class will be helping us.

PROCEDURE:




NAME OF GIF IMAGE : "dot_anim.gif"
NAME OF SPLITTED GIF : "dot_anim_a.png" -- "dot_anim_f.png"
NAME OF ANIMATIONDRAWABLE XML : "dot_anim_black.xml"
NAME OF ID OF ANIMATIONDRAWABLE XML : "anim_black"
NAME OF ID OF IMAGEVIEW : "MainMenu_AnimView2"



WORKING WITH GIF'S :

1.You cant put directly a gif and order android to play the animation.
2.The way is to divide your GIF into frames (Use GIFSplitter, or some online website to do it).
3.When done with splitting ,You are ready to go into coding part.

WORKING WITH ANIMATION DRAWABLE :

1.First create a XML file in "res/drawable" folder. (I have used dot_anim_black.xml )

2.See the code below

  <?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/anim_black" android:oneshot="false">
    <item android:drawable="@drawable/dot_anim_a" android:duration="60" />
    <item android:drawable="@drawable/dot_anim_b" android:duration="60" />
    <item android:drawable="@drawable/dot_anim_c" android:duration="60" />
    <item android:drawable="@drawable/dot_anim_d" android:duration="60" />
    <item android:drawable="@drawable/dot_anim_e" android:duration="60" />
    <item android:drawable="@drawable/dot_anim_f" android:duration="60" />
 </animation-list>

3. [android:drawable="@drawable/dot_anim_a"] This is the place where you are going to list all splitted images.
4.[android:duration="60"] : This is where you are goint to set duration to display the image.
5.Whe done Save it, Proceed to another XML Where you have specified your ImageView.

WORKING WITH IMAGEVIEW:

1.Set up a imageView.
2.Dont setany background for the view
3.See the code Below

  <ImageView
    android:id="@+id/MainMenu_AnimView2"
    android:layout_width="wrap_content"
    android:layout_height="250dp"
    android:layout_alignParentLeft="true"
    android:layout_marginTop="167dp"  /> 

WORKING WITH JAVA:

1.Setup ImageView, See the code Below.

MainMenu_AnimView2 = (ImageView) findViewById (R.id.MainMenu_AnimView2);

2.Set the background of the View using name of the ANIMATION DRAWABLE XML, See the code Below.

NOTE: This is to be done in "OnCreate Method"

MainMenu_AnimView2.setBackgroundResource(R.drawable.dot_anim_black);

3.Time to play the animation, See the code Below.

NOTE: This is strictly not to be done in "OnCreate Method", Use the code where you want to play
the animation, e.g "OnClick". If you want play the animation at startup ,Use you brain to do so.
Use if-else , while etc.

       AnimationDrawable startAnimation = (AnimationDrawable) MainMenu_AnimView2.getBackground(); 
       startAnimation.start();

4. Voila! You are Done ! See your animation in action.

Thanks, Have problem feel free to ask !