[Android] Picasso の代わりにGlideで大きい画像を扱ってみる

ImgeViewで画面に表示させるときに、元画像のサイズ（縦横）が大きいと表示しきれない事があります。このPicassoを使っていましたがライブラリーがうまくいかないようなので（2024/7現在）
Glideを代わりに使ってみます

Android Studio
2024.1.1

Glide

Glideは画像をネットからダウンロードしたり、ギャラリーなどでのキャッシュなど、いい具合に画像を扱ってくれます。機能的にはPicasoと似ていますが機能的には多少違いがあります
特にネットからの画像を取り込むときにはいすれも簡単に設定できます
　

目次
1. 大きいdrawableの画像を取り込む
2. Glideで大きい画像を取り込む
3. assetsから取り込む
4. 画像をダウンロード

大きいdrawableの画像を取り込む

例えばこのような 5760×3760 サイズの画像をImageViewで表示させてみます。
　

img5760x3760

画像をres\drawable\に入れて、

ImageView imageView = findViewById(R.id.image_view);

int imgId = R.drawable.img5760x3760;
imageView.setImageResource(imgId);

ImageView imageView = findViewById(R.id.image_view);

int imgId = R.drawable.img5760x3760;

imageView.setImageResource(imgId);

　
これを古い機種ですが、Nexus5Xで試してみると

java.lang.RuntimeException: Canvas: trying to draw too large(598026240bytes) bitmap.

1	java.lang.RuntimeException: Canvas: trying to draw too large(598026240bytes) bitmap.

というエラーになりました。画像が大きいということです。
Pixel 3aではエラーにはなりませんでしたがワーニングが出ます。
因みに、Nexus5Xでは画像を1/4のimg1440x942では表示できました。

更に、画像を大きくして11520×7536のサイズでテストすると

Pixel 6a では

java.lang.RuntimeException: Canvas: trying to draw too large(347258880bytes) bitmap.

1	java.lang.RuntimeException: Canvas: trying to draw too large(347258880bytes) bitmap.

さすがにエラーになりました
5760×3760では問題ないのです

もっとも、こんな大きな画像はそれなりに画像を縮小して取り込むという手順を取ればいいだけなのですが、まあ面倒な場合はGlideを使うと簡単だということです

また、Androidはハイエンドからローエンドまで様々な機種があるので
機種によるパフォーマンス性能の違いは留意する必要があります。

Glideで大きい画像を取り込む

Glideで試してみます。
　
dependencyを設定します

build.gradle.ｋｔｓ

dependencies {
    implementation 'com.squareup.picasso:picasso:2.5.2'
}

dependencies {

implementation 'com.squareup.picasso:picasso:2.5.2'

}

　
以前はこのように記述していればよかったのですが、こちらを参考に設定したいと思います

他のプロジェクトでライブラリを使用する
　
Library Dependencyではなく直接ファイルを設定すると可能でしたので
Gradleの中に、libs.versions.tomlがあるのでそこに設定します

libs.versions.toml

[versions]
...
glide = "4.16.0"

[libraries]
...
glide = { group = "com.github.bumptech.glide", name = "glide", version.ref = "glide" }

[versions]

...

glide = "4.16.0"

[libraries]

...

glide = { group = "com.github.bumptech.glide", name = "glide", version.ref = "glide" }

バージョン等は公式、Glide にて確認して適宜合わせてください。

これで
build.gradle.kts に以下のように設定が可能となります

dependencies {
    implementation(libs.glide)
...
}

dependencies {

implementation(libs.glide)

...

}

後は、GlideのインポートをしてGlideの設定をすればできます

import com.bumptech.glide.Glide;
...

int img = R.drawable.img11520x7536;
Glide
    .with(this)
    .load(img)
    .into(imageView);

import com.bumptech.glide.Glide;

...

int img = R.drawable.img11520x7536;

Glide

.with(this)

.load(img)

.into(imageView);

まとめてみると

MainActivity.java

//package com.example.testglide;

import android.os.Bundle;
import android.widget.ImageView;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import com.bumptech.glide.Glide;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

        ImageView imageView = findViewById(R.id.image_view);
//        imageView.setImageResource(R.drawable.img11520x7536);

        int img = R.drawable.img11520x7536;
        Glide
                .with(this)
                .load(img)
                .into(imageView);

    }
}

//package com.example.testglide;

import android.os.Bundle;

import android.widget.ImageView;

import androidx.activity.EdgeToEdge;

import androidx.appcompat.app.AppCompatActivity;

import androidx.core.graphics.Insets;

import androidx.core.view.ViewCompat;

import androidx.core.view.WindowInsetsCompat;

import com.bumptech.glide.Glide;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

EdgeToEdge.enable(this);

setContentView(R.layout.activity_main);

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {

Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());

v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);

return insets;

});

ImageView imageView = findViewById(R.id.image_view);

// imageView.setImageResource(R.drawable.img11520x7536);

int img = R.drawable.img11520x7536;

Glide

.with(this)

.load(img)

.into(imageView);

}

レイアウト
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:contentDescription="@string/app_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/main"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<ImageView

android:id="@+id/image_view"

android:contentDescription="@string/app_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

　
これで実行すると、画像が表示されました。
　

assetsから取り込む

Picasoがassetから取り込むのも非常にシンプルでしたがGlideは多少面倒です
詳しくは公式ドキュメントを参照してください

画像をダウンロード

画像をダウンロードする場合は非同期処理で実行しないといけないので、意外とコードも増えてしまいます。
Glideでは、これも画像のURLを指定すればダウンロードできてしまいます。
例として https://hoge-hoge.com/image/ 以下に画像を置いて試してみます。

Glide
    .with(this)
    .load("https://hoge-hoge.com/images/img11520x7536.jpg");
    //.load("https://hoge-hoge.com/images/yuka1000x1000.png");
    .into(imageView);

Glide

.with(this)

.load("https://hoge-hoge.com/images/img11520x7536.jpg");

//.load("https://hoge-hoge.com/images/yuka1000x1000.png");

.into(imageView);

ただし、Manifestの記述は必要です。
AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

...

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

...

</manifest>

pngも大丈夫です
yuka1000x1000.png

　
　
　
References:
Glide
他のプロジェクトでライブラリを使用する