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 in this example, 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.
- Below is this example project source files list.
C:\WORKSPACE\WORK\DEV2QA.COM-EXAMPLE-CODE\ANDROIDEXAMPLEPROJECT\MOVIEPLAYGIF │ .gitignore │ build.gradle │ gradle.properties │ gradlew │ gradlew.bat │ settings.gradle │ ├───.idea │ gradle.xml │ misc.xml │ modules.xml │ runConfigurations.xml │ ├───app │ │ .gitignore │ │ build.gradle │ │ proguard-rules.pro │ │ │ └───src │ ├───androidTest │ │ └───java │ │ └───com │ │ └───dev2qa │ │ └───movieplaygif │ │ ExampleInstrumentedTest.java │ │ │ ├───main │ │ │ AndroidManifest.xml │ │ │ │ │ ├───java │ │ │ └───com │ │ │ └───dev2qa │ │ │ └───movieplaygif │ │ │ MainActivity.java │ │ │ ShowGifView.java │ │ │ │ │ └───res │ │ ├───drawable │ │ │ gif_one.gif │ │ │ gif_two.gif │ │ │ ic_launcher_background.xml │ │ │ │ │ ├───drawable-v24 │ │ │ ic_launcher_foreground.xml │ │ │ │ │ ├───layout │ │ │ activity_main.xml │ │ │ │ │ ├───mipmap-anydpi-v26 │ │ │ ic_launcher.xml │ │ │ ic_launcher_round.xml │ │ │ │ │ ├───mipmap-hdpi │ │ │ ic_launcher.png │ │ │ ic_launcher_round.png │ │ │ │ │ ├───mipmap-mdpi │ │ │ ic_launcher.png │ │ │ ic_launcher_round.png │ │ │ │ │ ├───mipmap-xhdpi │ │ │ ic_launcher.png │ │ │ ic_launcher_round.png │ │ │ │ │ ├───mipmap-xxhdpi │ │ │ ic_launcher.png │ │ │ ic_launcher_round.png │ │ │ │ │ ├───mipmap-xxxhdpi │ │ │ ic_launcher.png │ │ │ ic_launcher_round.png │ │ │ │ │ └───values │ │ colors.xml │ │ strings.xml │ │ styles.xml │ │ │ └───test │ └───java │ └───com │ └───dev2qa │ └───movieplaygif │ ExampleUnitTest.java │ └───gradle └───wrapper gradle-wrapper.jar gradle-wrapper.properties - First, you should get two gif images ( 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; 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
