Displaying GIF in ImageView using Glide

Question

I am using Glide for the very fist time to display GIF inside ImageView. I have coded it the way it is given across several sites. But it is not working. I have given all the code below:(Please let me know if I have mistaken anything)

Project level build.gradle

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.0.0'
        classpath 'com.google.gms:google-services:2.1.0-alpha5'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

App level build.gradle file:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 22
    buildToolsVersion "23.0.3"

    defaultConfig {
        applicationId "com.example.winner.myapplication"
        minSdkVersion 19
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
        renderscriptTargetApi 19
        renderscriptSupportModeEnabled true

    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:22.2.1'
    //compile files('libs/ion-2.1.6.jar')
    //compile files('libs/androidasync-2.1.6.jar')
    compile 'com.github.bumptech.glide:glide:3.7.0'
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.example.winner.myapplication.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:gravity="center"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:id="@+id/layoutImage1"
        android:orientation="vertical"
        android:layout_gravity="center"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:gravity="center"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:id="@+id/layoutImage2"
        android:orientation="vertical"
        android:layout_below="@+id/layoutImage1"
        android:layout_gravity="center"
        >
        <ImageView
            android:id="@+id/test_image"
            android:layout_width="160dp"
            android:layout_height="90dp"
            android:scaleType="fitXY"
            android:layout_gravity="center"
            android:src="@drawable/test"
            />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:gravity="center"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:id="@+id/layoutImage3"
        android:orientation="vertical"
        android:layout_below="@+id/layoutImage2"
        android:layout_gravity="center"
        >
        <TextView android:text="Hello World!" android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="right"
            android:id="@+id/submit"
            android:text="Submit" />

    </LinearLayout>

</RelativeLayout>

Activity Java code:

package com.example.winner.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.request.target.GlideDrawableImageViewTarget;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final Button submit = (Button) findViewById(R.id.submit);
        submit.setOnClickListener(onClickSubmit);
    }

    View.OnClickListener onClickSubmit = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            ImageView iView = (ImageView) findViewById(R.id.test_image);
            Glide.with(getApplicationContext()).
                    load("http://i.imgur.com/1ALnB2s.gif").into(iView);

        }
    };
}

I do not see the GIF image after clicking on the Submit button.

Answer 1

As Glide Documentation says,

You can use .asGif() to force the library to load an animated gif and fail if it is not :

Glide.with(activity).load(url).asGif().into(view);

I would recommand you to do the following

ImageView iView = (ImageView) findViewById(R.id.test_image);
if (iView != null)
    Glide.with(this).load("http://i.imgur.com/1ALnB2s.gif").asGif().into(iView);

For more informations, please consider reading Glide examples about loading Gif https://github.com/bumptech/glide/wiki

Code example provided works well !

Answer 2

You can go with this. It worked for me. I hope it will work for you too.

ImageView iView = (ImageView) findViewById(R.id.test_image); 
    GlideDrawableImageViewTarget imageViewPreview = new GlideDrawableImageViewTarget(iView);
    Glide
            .with(this)
            .load(url)
            .listener(new RequestListener<String, GlideDrawable>() {
                @Override
                public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {                       
                    return false;
                }

                @Override
                public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                    return false;
                }
            })
            .into(imageViewPreview);
}

It works for both images as well as gifs.

Answer 3

To load the gif using glide,glide takes few seconds to process the gif. So, the image can only be loaded after that time.So, mean while u can use placeholder.

Glide.with(this).load(" http://i.imgur.com/1ALnB2s.gif ").asGif().placeHolder(R.drawable.any_normal_image.png).into(iView);

Answer 4

I was having trouble getting Glide to display a local gif (in drawables folder) I had, and for me the problem was that I included the extension (.gif) in the filename. After I removed the extension, the image is finally displayed. Not sure if that also applies to a URL, but thought I'd share anyway for people Googling this.

Didn't work:

    Glide.with(this).load(getImage("logo.gif")).into(muhGif)

Did work:

    Glide.with(this).load(getImage("logo")).into(muhGif)

Answer 5

Try this

    ImageView banner = (ImageView)findViewById(R.id.bannerImageView);


    Glide.with(this)
            .asGif()
            .load(R.raw.banner_challenge)
            .placeholder(R.drawable.banner_1).into(banner);