ライブラリ読み込み

build.gradle に下記を追記します。

// Import the BoM for the Firebase platform
implementation platform('com.google.firebase:firebase-bom:26.2.0')

// Declare the dependency for the Cloud Storage library
implementation 'com.google.firebase:firebase-storage-ktx'

implementation 'com.firebaseui:firebase-ui-storage:6.4.0'

// glide
implementation 'com.github.bumptech.glide:glide:4.12.0'
kapt 'com.github.bumptech.glide:compiler:4.12.0'

画像表示

YOUR_STORAGE_PATH にはFirebase Cloud Storageにアップした画像のURLを入れてください。

val storage = Firebase.storage
val storageRef = storage.getReferenceFromUrl("YOUR_STORAGE_PATH")

val ONE_MEGABYTE: Long = 1024 * 1024
storageRef.getBytes(ONE_MEGABYTE).addOnSuccessListener {
    val imageView = view.findViewById<ImageView>(R.id.image)
    GlideApp.with(this)
        .load(storageRef)
        .centerCrop()
        .into(imageView)
}.addOnFailureListener {
    // Handle any errors
    Log.e("TAG", it)
}

ハマりどころ

セキュリティルール

Firebaseのセキュリティルールの設定を忘れているとアクセスできないので、事前に設定しましょう。

FirebaseUIを利用したGlide表示

Glideを使用すると、Failed to find any ModelLoaders registered for model class: class com.google.firebase.storage.StorageReference というエラーが出ます。

GlideApp使う必要があります。

GlideModuleのカスタマイズ

下記のようにAppGlideModuleをカスタマイズします。

ビルドするとGlideAppが生成されるので、GlideAppで画像読み込みをすればOKです。

@GlideModule
class MyGlideAppModule: AppGlideModule() {
    override fun registerComponents(context: Context, glide: Glide, registry: Registry) {
        super.registerComponents(context, glide, registry)
        registry.append(
            StorageReference::class.java, InputStream::class.java,
            FirebaseImageLoader.Factory()
        )
    }
}

こんな風に画像が表示されます。

f:id:h3-birth:20210207121035p:plain:w300

参考

https://firebase.google.com/docs/storage/android/start?hl=ja

kako.dev

開発、自作アプリのこと

Firebase Cloud Storageにアップした画像を表示する