AndroidでGlideを使う方法！画像読み込みの基本をサンプルコード付きで徹底解説

Glideとは？Androidの画像読み込みを簡単にするライブラリ

Glideは、Androidアプリで画像を効率的に読み込むための定番ライブラリです。URLからの画像取得、キャッシュ管理、プレースホルダーやエラー画像の表示、リサイズや変換処理など、画像表示に必要な機能をわずか数行のコードで実現できます。

この記事では、実際に動作するサンプルアプリを作りながら、Glideの基本的な使い方をステップごとに解説します。ローカル画像の表示から、ネットワーク画像の読み込み、プレースホルダー・エラー画像の設定、リサイズや回転まで一通りカバーしています。

手順1：新規プロジェクトを作成する

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

手順2：レイアウトファイル（activity_main.xml）にコードを追加する

res/layout/activity_main.xml に以下のコードを記述します。中央に200dpのImageViewを配置し、その周囲に6つのボタン（Drawable／URL／Placeholder／Error／Resize／Rotate）を並べた構成になっています。

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity">
<Button
    android:id="@+id/btnDrawable"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_centerVertical="true"
    android:text="Drawable" />
<ImageView
    android:id="@+id/imageView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_centerHorizontal="true"
    android:src="@mipmap/ic_launcher" />
<Button
    android:id="@+id/btnPlaceholder"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/btnUrl"
    android:layout_alignBottom="@+id/btnUrl"
    android:layout_centerHorizontal="true"
    android:text="Placeholder" />
<Button
    android:id="@+id/btnUrl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/btnDrawable"
    android:layout_alignBottom="@+id/btnDrawable"
    android:layout_alignParentEnd="true"
    android:text="URL" />
<Button
    android:id="@+id/btnError"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/btnDrawable"
    android:layout_alignParentStart="true"
    android:layout_marginTop="12dp"
    android:text="Error" />
<Button
    android:id="@+id/btnRotate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/btnError"
    android:layout_alignBottom="@+id/btnError"
    android:layout_centerHorizontal="true"
    android:text="Rotate" />
<Button
    android:id="@+id/btnResize"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/btnRotate"
    android:layout_alignBottom="@+id/btnRotate"
    android:layout_alignParentEnd="true"
    android:text="Resize" />
</RelativeLayout>

手順3：MainActivity.javaにGlideの処理を実装する

src/MainActivity.java に以下のコードを追加します。各ボタンのクリックイベントに応じて、Glideのさまざまな機能を呼び出せるようにしています。

package app.com.sample;
import androidx.appcompat.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.RequestOptions;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    ImageView imageView;
    Button btnDrawableImage, btnUrlImage, btnErrorImage, btnPlaceholderImage, btnResizeImage, btnRotateImage;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    private void initView() {
        imageView = findViewById(R.id.imageView);
        btnDrawableImage = findViewById(R.id.btnDrawable);
        btnUrlImage = findViewById(R.id.btnUrl);
        btnPlaceholderImage = findViewById(R.id.btnPlaceholder);
        btnResizeImage = findViewById(R.id.btnResize);
        btnErrorImage = findViewById(R.id.btnError);
        btnRotateImage = findViewById(R.id.btnRotate);
        btnDrawableImage.setOnClickListener(this);
        btnPlaceholderImage.setOnClickListener(this);
        btnUrlImage.setOnClickListener(this);
        btnResizeImage.setOnClickListener(this);
        btnErrorImage.setOnClickListener(this);
        btnRotateImage.setOnClickListener(this);
    }
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btnDrawable:
                Glide.with(this).load(R.drawable.image).into(imageView);
                break;
            case R.id.btnPlaceholder:
                Glide.with(this).load("www.journaldev.com").placeholder(R.drawable.placeholder).into(imageView);
                break;
            case R.id.btnUrl:
                Glide.with(this).load("https://cdn.journaldev.com/wp-content/uploads/2017/01/android-constraint-layoutsdk-tool-install.png").placeholder(R.drawable.placeholder).into(imageView);
                break;
            case R.id.btnError:
                Glide.with(this).load("www.journaldev.com").placeholder(R.drawable.placeholder).error(R.drawable.error).into(imageView);
                break;
            case R.id.btnResize:
                Glide.with(this).load(R.drawable.image).apply(new RequestOptions().override(200, 200)).into(imageView);
                break;
            case R.id.btnRotate:
                Glide.with(this).load(R.drawable.image).into(imageView);
                imageView.setRotation(90);
                break;
        }
    }
}

各機能のポイント

• Drawable画像の表示：load() にリソースIDを渡すだけで、ローカル画像を読み込めます。
• URLから画像を読み込む：load() に画像のURL文字列を渡すと、ダウンロードして自動的に表示します。
• プレースホルダー：placeholder() を指定すると、読み込みが完了するまでの間に表示する画像を設定できます。
• エラー画像：error() を指定すると、読み込みに失敗したときの代替画像を表示できます。
• リサイズ：apply(new RequestOptions().override(200, 200)) で画像を任意のサイズに変更できます。
• 回転：ImageView の setRotation(90) メソッドで、画像を90度回転させています。

※ サンプル内のURLは説明用です。実際にネットワークから画像を読み込む場合は、「https://」などのスキーマを含む有効なURLを指定してください。

手順4：AndroidManifest.xmlを確認・編集する

androidManifest.xml に以下のコードを追加します。

<?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>

なお、インターネット上の画像を読み込む場合は、manifest要素直下に以下の権限宣言も必要です。

<uses-permission android:name="android.permission.INTERNET" />

アプリを実行して動作を確認しよう

それでは、アプリケーションを実行してみましょう。ここでは、実機のAndroidスマートフォンをパソコンに接続しているものとして進めます。Android Studioからアプリを実行するには、プロジェクト内のアクティビティファイルを開き、ツールバーの「Run（実行）」アイコンをクリックしてください。

デバイス選択画面で自分のモバイル端末を選択すると、端末にアプリの初期画面が表示されます。各ボタンをタップして、Drawable画像の表示、URLからの読み込み、プレースホルダー、エラー画像、リサイズ、回転の各機能が正しく動作することを確認しましょう。