Creating animated splash using GIF and Glide library

Question

I want to create animated splash screen using gif image. I have used Glide library because it supports gif images.

I have done following things to achieve this:

1. Created splash.xml with an imageview in it.

   <ImageView
       android:id="@+id/iv_gif_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>
   

2. Inside SplashActivity.java

        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_splash);

            ImageView ivImage = (ImageView) findViewById(R.id.iv_gif_view);
            Glide.with(this).load(R.drawable.splash_xxhdpi_2)
                    .asGif().into(ivImage);
        }

But when I run the application screen goes black nothing appears on the screen. I'm using Glide compile 'com.github.bumptech.glide:glide:3.6.1'

Answer 1

You can try this way

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");
        }
    }
}

MainActivity.java

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.android);
    }
}

http://www.mavengang.com/2016/05/02/gif-animation-android/

http://www.geeks.gallery/how-to-display-the-animated-gif-image-in-android/

Answer 2

Android does not support GIF so avoid using it since it is memory consuming. Glide is nice image caching library and luckily it supports gif images.

I'm sharing alternate and efficient way to achieve animated splash screen.

1. Create splash.xml as usual with an image view.
2. Take out each frame from your gif image. I have used splash_hdpi_1, splash_hdpi_2, splash_hdpi_3 for example.
3. create splash_gif_animation.xml in drawable with below code

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >
    <item
        android:drawable="@drawable/splash_hdpi_1"
        android:duration="150"/>
    <item
        android:drawable="@drawable/splash_hdpi_2"
        android:duration="150"/>
    <item
        android:drawable="@drawable/splash_hdpi_3"
        android:duration="150"/>
</animation-list>

4. In your SplashActivity.java put below code

ImageView ivImage = (ImageView) findViewById(R.id.your_image_view);
ivImage.setBackgroundResource(R.drawable.splash_gif_animation);

AnimationDrawable splashAnimation = (AnimationDrawable) ivImage.getBackground();
splashAnimation.start();

5. You are done:)

Answer 3

Try this:

ImageView ivImage= (ImageView) findViewById(R.id.iv_gif_view);
GlideDrawableImageViewTarget imageViewTarget = new GlideDrawableImageViewTarget(ivImage);
Glide.with(this)
     .load(R.drawable.splash_xxhdpi_2)
     .into(imageViewTarget);