How To Play Gif File Use Android.Graphics.Movie Class

If you want to display a gif image in your android application, you can read this article. It will demonstrate how to use android.graphics.Movie class to read from a gif drawable resource and display it in a custom view canvas.

1. Play Gif Use Android.Graphics.Movie Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/ticI1yYAIG4

There are two buttons, click the first button will show the first gif image, click the second will show another.

2. Use Android Graphics Movie Class To Display Gif Source Code.

First you should get two gif image ( gif_one.gif and gif_two.gif ) and copy them into your android project app / res / drawable folder.

2.1 Main Activity Class.

MainActivity.java

package com.dev2qa.movieplaygif;

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

public class MainActivity extends AppCompatActivity {

    private Button showGifOneButton = null;

    private Button showGifTwoButton = null;

    private LinearLayout gifLinearLayout = null;

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

        setTitle("dev2qa.com - Android Show Gif Use Movie Example.");

        initControls();

        final ShowGifView showGifView = new ShowGifView(getApplicationContext());
        gifLinearLayout.addView(showGifView);

        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

        showGifView.setLayoutParams(layoutParams);

        showGifOneButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showGifView.setGifImageDrawableId(R.drawable.gif_one);
                showGifView.drawGif();
            }
        });

        showGifTwoButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showGifView.setGifImageDrawableId(R.drawable.gif_two);
                showGifView.drawGif();
            }
        });

    }

    private void initControls()
    {
        if(showGifOneButton == null)
        {
            showGifOneButton = (Button)findViewById(R.id.showGifOne);
        }

        if(showGifTwoButton == null)
        {
            showGifTwoButton = (Button)findViewById(R.id.showGifTwo);
        }

        if(gifLinearLayout == null)
        {
            gifLinearLayout = (LinearLayout) findViewById(R.id.gifLinearLayout);
        }
    }
}

2.2 Custom View Class.

ShowGifView.java

package com.dev2qa.movieplaygif;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Movie;
import android.view.View;

import java.io.InputStream;

/**
 * Created by zhaosong on 2018/6/18.
 */

public class ShowGifView extends View {

    private InputStream inputStream;

    private Movie movie;

    private int gifImageDrawableId;

    private Context ctx = null;

    private long gifStart = 0;

    public ShowGifView(Context context) {
        super(context);

        // Make the custom view focus.
        setFocusable(true);

        ctx = context;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        long now = System.currentTimeMillis();

        if (gifStart == 0) {
            gifStart = now;
        }

        if (movie != null) {
            // Get gif movie duration time.
            int duration = movie.duration();

            if (duration == 0) {
                duration = 1000;
            }
            
            // Get played frame percentage. 
            int relTime = (int)((now - gifStart) % duration);

            // Set current gif frame time.
            movie.setTime(relTime);

            // Get custom view width and height.
            int width = this.getWidth();
            int height = this.getHeight();

            // Get gif image width and height.
            int movieWidth = movie.width();
            int movieHeight = movie.height();

            // Scale canvas size to fit the custom view.
            canvas.scale(width / movieWidth, height / movieHeight);

            // Draw the gif image frame to custom view canvas. 
            movie.draw(canvas, 1, 1);

            // This method will invoke onDraw method.
            invalidate();
        }
    }

    public int getGifImageDrawableId() {
        return gifImageDrawableId;
    }

    public void setGifImageDrawableId(int gifImageDrawableId) {
        this.gifImageDrawableId = gifImageDrawableId;
    }

    // Call this method to read the drawable gif image to create movie object.
    public void drawGif()
    {
        Resources resources = ctx.getResources();

        inputStream = resources.openRawResource(gifImageDrawableId);

        movie = Movie.decodeStream(inputStream);

        // Invalidate the view and invoke onDraw method.
        invalidate();
    }
}

2.3 Main Activity Layout Xml File.

app / res / layout / activity_main.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/showGifOne"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Show Gif One"
        android:textAllCaps="false"
        android:textSize="20dp"/>

    <Button
        android:id="@+id/showGifTwo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Show Gif Two"
        android:textAllCaps="false"
        android:textSize="20dp"/>

    <LinearLayout
        android:id="@+id/gifLinearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    </LinearLayout>
</LinearLayout>

Reference

1. Android Move Text With Arrow Key Example