Display Animated GIF

Question

I want to display animated GIF images in my aplication  As I found out the hard way Android doesn t support animated GIF natively   However it can display animations using AnimationDrawable   Develop   Guides   Images  amp  Graphics   Drawables Overview  The example uses animation saved as frames in application resources but what I need is to display animated gif directly   My plan is to break animated GIF to frames and add each frame as drawable to AnimationDrawable   Does anyone know how to extract frames from animated GIF and convert each of them into Drawable

User · Answer

Just wanted to add that the Movie class is now deprecated.

This class was deprecated in API level P.

It is recommended to use this

AnimatedImageDrawable

Drawable for drawing animated images (like GIF).

User · Answer

Android actually can decode and display animated GIFs  using android graphics Movie class   This is not too much documented  but is in SDK Reference  Moreover  it is used in Samples in ApiDemos in BitmapDecode example with some animated flag

User · Answer

Try this  bellow code display gif file in progressbar  loading activity xml in Layout folder    lt RelativeLayout xmlns android  http   schemas android com apk res android      xmlns tools  http   schemas android com tools      android id    id container      android layout width  match parent      android layout height  match parent      android background   ffffff   gt        lt ProgressBar         android id    id progressBar          style   android attr progressBarStyleLarge          android layout width  70dp          android layout height  70dp          android layout centerHorizontal  true          android layout centerVertical  true          android indeterminate  true          android indeterminateDrawable   drawable custom loading          android visibility  gone    gt    lt  RelativeLayout gt    custom loading xml in drawable folder   here i put black gif gif in drawable folder   you can put your own gif here   lt  xml version  1 0  encoding  utf-8   gt   lt animated-rotate xmlns android  http   schemas android com apk res android      android drawable   drawable black gif      android pivotX  50       android pivotY  50     gt    LoadingActivity java in res folder   public class LoadingActivity extends Activity        ProgressBar bar       Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout activity loading           bar    ProgressBar  findViewById R id progressBar           bar setVisibility View VISIBLE

User · Answer

The easy way to display animated GIF directly from URL to your app layout is to use WebView class    Step 1  In your layout XML   x000D   x000D   lt WebView x000D  android id    id webView  x000D  android layout width  50dp  x000D  android layout height  50dp  x000D    gt  x000D   x000D   x000D    Step 2  In your Activity   x000D   x000D  WebView wb  x000D  wb    WebView  findViewById R id webView   x000D  wb loadUrl  https             x000D   x000D   x000D    Step 3  In your Manifest XML make Internet permission   x000D   x000D   lt uses-permission android name  android permission INTERNET    gt  x000D   x000D   x000D    Step 4  In case you want to make your GIF background transparent and make GIF fit to your Layout   x000D   x000D  wb setBackgroundColor Color TRANSPARENT   x000D  wb getSettings   setLoadWithOverviewMode true   x000D  wb getSettings   setUseWideViewPort true   x000D   x000D   x000D

User · Answer

Put it into a WebView  it has to be able to display it correctly  since the default browser supports gif files   Froyo   if i am not mistaken

User · Answer

PointerNull gave good solution  but it is not perfect  It doesn t work on some devices with big files and show buggy Gif animation with delta frames on pre ICS version  I found solution without this bugs  It is library with native decoding to drawable  koral s android-gif-drawable

User · Answer

There are two options to load animated gifs into our Android apps  1 Using Glide to load the gif into an ImageView       String urlGif    https   cdn dribbble com users 263558 screenshots 1337078 dvsd gif         add Glide implementation into the build gradle file      ImageView imageView    ImageView findViewById R id imageView       Uri uri   Uri parse urlGif       Glide with getApplicationContext    load uri  into imageView     2  Using an html to load the gif into a WebView  Create the html with the address to the  gif file    lt html style  margin  0   gt   lt body style  margin  0   gt   lt img src  https        myimage gif  style  width  100   height  100     gt   lt  body gt   lt  html gt    store this file into the assets directory     The load this html into the WebView of your application       WebView webView     WebView findViewById R id webView       webView    WebView  findViewById R id webView       webView loadUrl  file    android asset html webpage gif html        Heres is a complete example of this two options

User · Answer

Glide  Image Loader Library for Android  recommended by Google    Glide is quite similar to Picasso but this is much faster than Picasso  Glide consumes less memory than Picasso    What that Glide has but Picasso doesn t  An ability to load GIF Animation to a simple ImageView might be the most interesting feature of Glide  And yes  you can t do that with Picasso   Some important links-   https   github com bumptech glide http   inthecheesefactory com blog get-to-know-glide-recommended-by-google en

User · Answer

I think the better library to handle gif files is this one  by koral  Used it and i m successful and this library is dedicated to GIF S  but where as the picasso and glide are general purpose image framework  so i think the developers of this library have entirely concentrated on gif files

User · Answer

Use fresco  Here s how to do it   http   frescolib org docs animations html   Here s the repo with the sample   https   github com facebook fresco tree master samples animation  Beware fresco does not support wrap content

User · Answer

i found a very easy way  with a nice and simple working example here  display animated widget  Before getting it working there are some chages to do do in the code  IN THE FOLLOWING       Override     public void onCreate Bundle savedInstanceState               super onCreate savedInstanceStated              setContentView new MYGIFView                   just replace   setContentView new MYGIFView       in  setContentView new MYGIFView this      AND IN  public GIFView Context context        super context     Provide your own gif animation file      is   context getResources   openRawResource R drawable earth       movie   Movie decodeStream is       REPLACE THE FIRST LINE IN  public MYGIFView Context context      according to the name of the class     after done this little changes it should work as for me     hope this help

User · Answer

First of all the Android browser should support Animated GIFs  If it doesn t then it s a bug  Have a look at the issue trackers   If you re displaying these animated GIFs outside of a browser it might be a different story  To do what you re asking would require external library that supports the decoding of Animated GIFs   The first port of call would be to look at Java2D or JAI  Java Advanced Imaging  API  although I would be very surprised if Android Dalvik would support those libraries in your App

User · Answer

Nobody has mentioned the Ion or Glide library  they work very well   It s easier to handle compared to a WebView

User · Answer

I solved the problem by splitting gif animations into frames before saving it to phone  so I would not have to deal with it in Android   Then I download every frame onto phone  create Drawable from it and then create AnimationDrawable - very similar to example from my question

User · Answer

For only android API  Android Pie 28 and   use AnimatedImageDrawable as     ImageView from layout val ima   ImageView   findViewById R id img gif     create AnimatedDrawable  val decodedAnimation   ImageDecoder decodeDrawable             create ImageDecoder Source object         ImageDecoder createSource resources  R drawable tenor      set the drawble as image source of ImageView ima setImageDrawable decodedAnimation     play the animation  decodedAnimation as  AnimatedImageDrawable   start     XML code  add a ImageView   lt ImageView     android id    id img gif      android background   drawable ic launcher background   lt  --Default background-- gt      app layout constraintLeft toLeftOf  parent      app layout constraintRight toRightOf  parent      android layout width  200dp      android layout height  200dp    gt    AnimatedImageDrawable is a child of Drawable and created by ImageDecoder decodeDrawable  ImageDecoder decodeDrawable which further required the instance of ImageDecoder Source created by ImageDecoder createSource   ImageDecoder createSource can only take source as a name  ByteBuffer  File  resourceId  URI  ContentResolver to create source object and uses it to create AnimatedImageDrawable as Drawable  polymorphic call   static ImageDecoder Source  createSource AssetManager assets  String fileName  static ImageDecoder Source  createSource ByteBuffer buffer  static ImageDecoder Source  createSource File file  static ImageDecoder Source  createSource Resources res  int resId  static ImageDecoder Source  createSource ContentResolver cr  Uri uri    Note  You can also create Bitmap using ImageDecoder decodeBitmap   Output     AnimatedDrawable also supports resizing  frame and color manipulation

User · Answer

Glide 4 6  1  To Load gif  GlideApp with context               load R raw gif     or url              into imageview     2  To get the file object  GlideApp with context                   asGif                    load R raw gif    or url                  into new SimpleTarget lt GifDrawable gt                           Override                     public void onResourceReady  NonNull GifDrawable resource   Nullable Transition lt   super GifDrawable gt  transition                             resource start                            resource setLoopCount 1                           imageView setImageDrawable resource

User · Answer

Create a package named    Utils    under src folder and create a class named    GifImageView     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                        Now define GifImageView in MainActivity File  src activity MainActivity class  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             Now UI Part File  res layout activity main xml   lt 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  gt       lt com android animatedgif Utils GifImageView         android id    id GifImageView          android layout width  wrap content          android layout height  wrap content          android layout centerInParent  true    gt    lt  RelativeLayout gt    Resourece code   Android example

User · Answer

Use ImageViewEx  a library that makes using a gif as easy as using an ImageView

User · Answer

Ways to show animated GIF on Android    Movie class  As mentioned above  it s fairly buggy  WebView  It s very simple to use and usually works  But sometimes it starts to misbehave  and it s always on some obscure devices you don t have  Plus  you can   t use multiple instances in any kind of list views  because it does things to your memory  Still  you might consider it as a primary approach   Custom code to decode gifs into bitmaps and show them as Drawable or ImageView  I ll mention two libraries    https   github com koral-- android-gif-drawable - decoder is implemented in C  so it s very efficient    https   code google com p giffiledecoder - decoder is implemented in Java  so it s easier to work with  Still reasonably efficient  even with large files   You ll also find many libraries based on GifDecoder class  That s also a Java-based decoder  but it works by loading the entire file into memory  so it s only applicable to small files

User · Answer

public class Test extends GraphicsActivity       Override   protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView new SampleView this           private static class SampleView extends View       private Bitmap mBitmap      private Bitmap mBitmap2      private Bitmap mBitmap3      private Bitmap mBitmap4      private Drawable mDrawable       private Movie mMovie      private long mMovieStart          Set to false to use decodeByteArray     private static final boolean DECODE STREAM   true       private static byte   streamToBytes InputStream is          ByteArrayOutputStream os   new ByteArrayOutputStream 1024         byte   buffer   new byte 1024         int len        try           while   len   is read buffer    gt   0              os write buffer  0  len                     catch  java io IOException e                  return os toByteArray               public SampleView Context context          super context         setFocusable true          java io InputStream is        is   context getResources   openRawResource R drawable icon          BitmapFactory Options opts   new BitmapFactory Options          Bitmap bm         opts inJustDecodeBounds   true        bm   BitmapFactory decodeStream is  null  opts             now opts outWidth and opts outHeight are the dimension of the          bitmap  even though bm is null        opts inJustDecodeBounds   false     this will request the bm       opts inSampleSize   4     scaled down by 4       bm   BitmapFactory decodeStream is  null  opts          mBitmap   bm            decode an image with transparency       is   context getResources   openRawResource R drawable icon         mBitmap2   BitmapFactory decodeStream is             create a deep copy of it using getPixels   into different configs       int w   mBitmap2 getWidth          int h   mBitmap2 getHeight          int   pixels   new int w   h         mBitmap2 getPixels pixels  0  w  0  0  w  h         mBitmap3   Bitmap createBitmap pixels  0  w  w  h            Bitmap Config ARGB 8888         mBitmap4   Bitmap createBitmap pixels  0  w  w  h            Bitmap Config ARGB 4444          mDrawable   context getResources   getDrawable R drawable icon         mDrawable setBounds 150  20  300  100          is   context getResources   openRawResource R drawable animated gif          if  DECODE STREAM            mMovie   Movie decodeStream is           else           byte   array   streamToBytes is           mMovie   Movie decodeByteArray array  0  array length                       Override     protected void onDraw Canvas canvas          canvas drawColor 0xFFCCCCCC          Paint p   new Paint          p setAntiAlias true          canvas drawBitmap mBitmap  10  10  null         canvas drawBitmap mBitmap2  10  170  null         canvas drawBitmap mBitmap3  110  170  null         canvas drawBitmap mBitmap4  210  170  null          mDrawable draw canvas          long now   android os SystemClock uptimeMillis          if  mMovieStart    0       first time         mMovieStart   now                if  mMovie    null            int dur   mMovie duration            if  dur    0              dur   1000                    int relTime    int    now - mMovieStart    dur           mMovie setTime relTime           mMovie draw canvas  getWidth   - mMovie width    getHeight               - mMovie height             invalidate                         class GraphicsActivity extends Activity        set to true to test Picture   private static final boolean TEST PICTURE   false      Override   protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState           Override   public void setContentView View view        if  TEST PICTURE          ViewGroup vg   new PictureLayout this         vg addView view         view   vg             super setContentView view          class PictureLayout extends ViewGroup     private final Picture mPicture   new Picture       public PictureLayout Context context        super context          public PictureLayout Context context  AttributeSet attrs        super context  attrs           Override   public void addView View child        if  getChildCount    gt  1          throw new IllegalStateException             PictureLayout can host only one direct child               super addView child           Override   public void addView View child  int index        if  getChildCount    gt  1          throw new IllegalStateException             PictureLayout can host only one direct child               super addView child  index           Override   public void addView View child  LayoutParams params        if  getChildCount    gt  1          throw new IllegalStateException             PictureLayout can host only one direct child               super addView child  params           Override   public void addView View child  int index  LayoutParams params        if  getChildCount    gt  1          throw new IllegalStateException             PictureLayout can host only one direct child               super addView child  index  params           Override   protected LayoutParams generateDefaultLayoutParams         return new LayoutParams LayoutParams MATCH PARENT          LayoutParams MATCH PARENT           Override   protected void onMeasure int widthMeasureSpec  int heightMeasureSpec        final int count   getChildCount         int maxHeight   0      int maxWidth   0       for  int i   0  i  lt  count  i            final View child   getChildAt i         if  child getVisibility      GONE            measureChild child  widthMeasureSpec  heightMeasureSpec                      maxWidth    getPaddingLeft     getPaddingRight        maxHeight    getPaddingTop     getPaddingBottom         Drawable drawable   getBackground        if  drawable    null          maxHeight   Math max maxHeight  drawable getMinimumHeight           maxWidth   Math max maxWidth  drawable getMinimumWidth                setMeasuredDimension resolveSize maxWidth  widthMeasureSpec           resolveSize maxHeight  heightMeasureSpec           private void drawPict Canvas canvas  int x  int y  int w  int h  float sx        float sy        canvas save        canvas translate x  y       canvas clipRect 0  0  w  h       canvas scale 0 5f  0 5f       canvas scale sx  sy  w  h       canvas drawPicture mPicture       canvas restore            Override   protected void dispatchDraw Canvas canvas        super dispatchDraw mPicture beginRecording getWidth    getHeight          mPicture endRecording         int x   getWidth     2      int y   getHeight     2       if  false          canvas drawPicture mPicture         else         drawPict canvas  0  0  x  y  1  1         drawPict canvas  x  0  x  y  -1  1         drawPict canvas  0  y  x  y  1  -1         drawPict canvas  x  y  x  y  -1  -1                 Override   public ViewParent invalidateChildInParent int   location  Rect dirty        location 0    getLeft        location 1    getTop        dirty set 0  0  getWidth    getHeight         return getParent            Override   protected void onLayout boolean changed  int l  int t  int r  int b        final int count   super getChildCount         for  int i   0  i  lt  count  i            final View child   getChildAt i         if  child getVisibility      GONE            final int childLeft   getPaddingLeft            final int childTop   getPaddingTop            child layout childLeft  childTop              childLeft   child getMeasuredWidth                childTop   child getMeasuredHeight

User · Answer

UPDATE   Use glide   dependencies     implementation  com github bumptech glide glide 4 0 0      usage   Glide with context  load GIF URI  into new GlideDrawableImageViewTarget IMAGE VIEW      see docs

User · Answer

Similar to what  Leonti said  but with a little more depth     What I did to solve the same problem was open up GIMP  hide all layers except for one  export it as its own image  and then hide that layer and unhide the next one  etc   until I had individual resource files for each one   Then I could use them as frames in the AnimationDrawable XML file

User · Answer

Some thoughts on the BitmapDecode example    Basically it uses the ancient  but rather featureless Movie class from android graphics  On recent API versions you need to turn off hardware acceleration  as described here  It was segfaulting for me otherwise    lt activity             android hardwareAccelerated  false              android name  foo GifActivity              android label  The state of computer animation 2014  gt   lt  activity gt    Here is the BitmapDecode example shortened with only the GIF part  You have to make your own Widget  View  and draw it by yourself  Not quite as powerful as an ImageView   import android app Activity  import android content Context  import android graphics    import android os    import android view View   public class GifActivity extends Activity        Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView new GifView this               static class GifView extends View           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                                      2 other methods  one with ImageView another with WebView can be found in this fine tutorial  The ImageView method uses the Apache licensed android-gifview from Google Code

User · Answer

Easiest way - Can be consider the below code  We can take advantage of Imageview setImageResource   refer below code for the same   The below code can be used to show the image like gif incase if you have the multiple split image of gif  Just split the gif into individual png from a online tool and put image in the drawable like the below order  image 1 png  image 2 png  etc   Have the handler to change the image dynamically   int imagePosition   1      Handler handler   new Handler            Runnable runnable   new Runnable                 public void run                     updateImage                                     public void updateImage                      appInstance runOnUiThread new Runnable                          Override                     public void run                             int resId   getResources   getIdentifier  image     imagePosition   drawable   appInstance getPackageName                             gifImageViewDummy setImageResource resId                           imagePosition          Consider you have 30 image for the anim                         if  imagePosition    30      this make animation play only once                             handler removeCallbacks runnable                              else         You can define your own time based on the animation                             handler postDelayed runnable  50                                to make animation to continue use below code and remove above if else    if  imagePosition    30    imagePosition   1     handler postDelayed runnable  50

User · Answer

I have had success with the solution proposed within this article  a class called GifMovieView  which renders a View which can then be displayed or added to a specific ViewGroup  Check out the other methods presented in parts 2 and 3 of the specified article    The only drawback to this method is that the antialiasing on the movie is not that good  must be a side-effect of using the  shady  Android Movie Class   You are then better off setting the background to a solid color within your animated GIF

User · Answer

I solved this by spliting gif in frames and use standard android animation

User · Answer

Something I did for showing gifs in apps  I extended ImageView so people can use its attributes freely  It can show gifs from url or from the assets directory  The library also makes it easy for extending classes to inherit from it and extend it to support different methods to initialize the gif   https   github com Gavras GIFView  There s a little guide on the github page   It was also published on Android Arsenal   https   android-arsenal com details 1 4947  Use example   From XML    lt com whygraphics gifview gif GIFView xmlns gif view  http   schemas android com apk res-auto          android id    id main activity gif vie          android layout width  200dp          android layout height  200dp          android scaleType  center          gif view gif src  url http   pop h-cdn co assets 16 33 480x264 gallery-1471381857-gif-season-2 gif    gt    In the activity       GIFView mGifView    GIFView  findViewById R id main activity gif vie        mGifView setOnSettingGifListener new GIFView OnSettingGifListener                      Override                 public void onSuccess GIFView view  Exception e                        Toast makeText MainActivity this   onSuccess     Toast LENGTH SHORT  show                                        Override                 public void onFailure GIFView view  Exception e                     Setting the gif programmatically   mGifView setGifResource  asset gif1

User · Answer

You may use GifAnimationDrawable library found in this link - https   github com Hipmob gifanimateddrawable  and which convert any gif to AnimationDrawable  Enjoy

User · Answer

also put  main assets htmls name gif   with this html adjust to the size    lt html style  margin  0   gt   lt body style  margin  0   gt   lt img src  name gif  style  width  100   height  100     gt   lt  body gt   lt  html gt    declare in your Xml for example like this  main res layout name xml    you define the size  for example    lt WebView android layout width  70dp  android layout height  70dp  android id    id webView  android layout gravity  center horizontal    gt    in your Activity put the next code inside of onCreate  web    WebView  findViewById R id webView    web setBackgroundColor Color TRANSPARENT     for gif without background web loadUrl  file    android asset htmls name html      if you want load dynamically you have to load the webview with data      or   path  name gif   e g  file    android asset name gif for resources in asset folder   and in loadDataWithBaseURL    you don t need to set base URL  on the other hand  it s similar to loadData   method  String gifName    name gif   String yourData     lt html style   margin  0    gt  n                  lt body style   margin  0    gt  n                  lt img src     gifName     style   width  100   height  100      gt  n                  lt  body gt  n                  lt  html gt       Important to add this attribute to webView to get resource from outside  webView getSettings   setAllowFileAccess true       Notice  should use loadDataWithBaseURL  BaseUrl could be the base url such as the path to asset folder  or SDCard or any other path  where your images or the other media resides related to your html webView loadDataWithBaseURL  file    android asset    yourData   text html    utf-8   null      Or if you want to load image from SD card or where else  here is the idea  String base   Environment getExternalStorageDirectory   getAbsolutePath   toString    webView loadDataWithBaseURL base        yourData   text html    utf-8   null     suggestion  is better load gif with static images for more information check https   developer android com reference android graphics drawable AnimationDrawable html  That s it  I hope you help

User · Answer

I had a really hard time to have animated gif working in Android  I only had following two working    WebView Ion   WebView works OK and really easy  but the problem is it makes the view loads slower and the app would be unresponsive for a second or so  I did not like that  So I have tried different approaches  DID NOT WORK     ImageViewEx is deprecated  picasso did not load animated gif android-gif-drawable looks great  but it caused some wired NDK issues in my project  It caused my local NDK library stop working  and I was not able to fix it   I had some back and forth with Ion  Finally  I have it working  and it is really fast  -   Ion with imgView     error R drawable default image     animateGif AnimateGifMode ANIMATE     load  file    android asset animated gif

[java] Display Animated GIF

Examples related to java

Examples related to android

Examples related to animated-gif