1. Intro
2. Displaying images
   1. Setup
   2. Usage
   3. Troubleshooting

Cloud Storage for Firebase provides secure file uploads and downloads for your Firebase apps, regardless of network quality. You can use it to store images, audio, video, or other user-generated content. Cloud Storage is a powerful, simple, and cost-effective object storage service.

FirebaseUI provides bindings to download an image file stored in Cloud Storage from a StorageReference and display it using the popular Glide library. This technique allows you to get all of Glide's performance benefits while leveraging Cloud Storage's authenticated storage capabilities.

If you're not already using Glide in your application, add the following dependencies to your app/build.gradle file:

// Find the latest Glide releases here: https://goo.gl/LpksbR
implementation 'com.github.bumptech.glide:glide:4.x'
// If you're using Kotlin (and therefore, kapt), use kapt instead of annotationProcessor
annotationProcessor 'com.github.bumptech.glide:compiler:4.x'

To load an image from a StorageReference, first register an AppGlideModule:

@GlideModule
public class MyAppGlideModule extends AppGlideModule {

    @Override
    public void registerComponents(Context context, Glide glide, Registry registry) {
        // Register FirebaseImageLoader to handle StorageReference
        registry.append(StorageReference.class, InputStream.class,
                new FirebaseImageLoader.Factory());
    }
}

The class MyAppGlideModule can live anywhere in your source directory and is processed by the Glide annotation processor at compile time in order to create the GlideApp class.

Once you have created an AppGlideModule class and done a clean build, you can use GlideApp to load a StorageReference into an ImageView:

// Reference to an image file in Cloud Storage
StorageReference storageReference = ...;

// ImageView in your Activity
ImageView imageView = ...;

// Download directly from StorageReference using Glide
// (See MyAppGlideModule for Loader registration)
GlideApp.with(this /* context */)
        .load(storageReference)
        .into(imageView);

If your image paths are stored as gs:// URL strings (e.g. retrieved from Firestore) rather than as StorageReference objects, register FirebaseImageLoader.StringLoader.Factory in your AppGlideModule alongside the default loader:

@GlideModule
public class MyAppGlideModule extends AppGlideModule {

    @Override
    public void registerComponents(Context context, Glide glide, Registry registry) {
        registry.append(StorageReference.class, InputStream.class,
                new FirebaseImageLoader.Factory());
        registry.append(String.class, InputStream.class,
                new FirebaseImageLoader.StringLoader.Factory());
    }
}

You can then pass a gs:// string directly to Glide:

String gsUrl = "gs://my-bucket.appspot.com/images/photo.png";

GlideApp.with(this /* context */)
        .load(gsUrl)
        .into(imageView);

StringLoader only intercepts strings that start with gs://, so Glide's built-in loaders for http://, https://, and other schemes continue to work as normal.

If GlideApp is not an importable class, build your application first before trying to use. For more information, see Glide v4 Generated API documentation.

Images displayed using FirebaseImageLoader are cached by their path in Cloud Storage, so repeated loads will be fast and conserve bandwidth. For more information on caching in Glide, see this guide.