AndroidでアニメーションGIF画像を表示する方法【Glideライブラリ活用ガイド】

Androidアプリでは、ImageViewにそのままGIFファイルを読み込んでもアニメーションは再生されません。GIFを動かして表示するには、画像読み込みライブラリ「Glide」を利用するのが最も簡単で定番の方法です。

この記事では、Android Studioでプロジェクトを作成し、Glideを使ってアニメーションGIFを表示するまでの手順を、サンプルコード付きでわかりやすく解説します。

Step 1：プロジェクトの作成とGlideの導入

まず、Android Studioで新しいプロジェクトを作成します。メニューバーから「File → New Project」を選択し、必要な項目を入力してプロジェクトを作成しましょう。

次に、Glideライブラリを使用できるようにするため、build.gradle（Module: app）のdependenciesブロックに以下の依存関係を追加します。

implementation 'com.github.bumptech.glide:glide:4.9.0'

追加後は「Sync Now」をクリックして、Gradleの同期を実行してください。

Step 2：レイアウトファイル（activity_main.xml）の編集

続いて、res/layout/activity_main.xmlに以下のコードを記述します。画面いっぱいに表示されるImageViewと、GIFをロードするためのButtonを配置しています。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="4dp"
    tools:context=".MainActivity">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:onClick="ShowGif"
        android:textAlignment="center"
        android:text="SHOW GIF"/>
</RelativeLayout>

Step 3：MainActivity.javaへのコード追加

src/MainActivity.javaに以下のコードを追加します。ボタンがタップされると、ShowGif()メソッドが呼び出され、Glide経由でdrawableフォルダ内のGIFファイル（ここでは「tenor」）がImageViewに読み込まれます。

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    public void ShowGif(View view) {
        ImageView imageView = findViewById(R.id.imageView);
        Glide.with(this).load(R.drawable.tenor).into(imageView);
    }
}

なお、表示したいGIFファイルは事前にres/drawableフォルダに配置しておいてください。ファイル名がそのままリソースIDになります。

Step 4：AndroidManifest.xmlの確認

androidManifest.xmlには、以下のようにMainActivityがランチャーアクティビティとして登録されていることを確認します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
            <activity android:name=".MainActivity">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
    </application>
</manifest>

アプリの実行と動作確認

それでは、実際にアプリを起動してみましょう。実機のAndroidスマートフォンをパソコンに接続した状態で、Android Studioのツールバーにある「Run」アイコンをクリックします。

デバイス選択ダイアログが表示されたら、接続したモバイル端末を選択して実行してください。アプリが起動したら「SHOW GIF」ボタンをタップすると、ImageViewにアニメーションGIFが再生されて表示されます。

まとめ

AndroidでアニメーションGIFを表示するには、Glideライブラリを使うのが最も手軽です。Glide.with().load().into()の一行だけで、通常のImageViewにGIFアニメーションを再生できます。URLからGIFを読み込む場合も、R.drawable.tenorの部分を文字列のURLに置き換えるだけで対応可能です。ぜひ本記事の手順を参考に、試してみてください。