Getting Image from Firebase Storage using Glide

Question

I am trying to load an image from Firebase Storage using Glide but I am getting an error .

package com.kanishq.wallpaper;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.firebase.ui.storage.images.FirebaseImageLoader;
import com.google.firebase.storage.FirebaseStorage;
import com.google.firebase.storage.StorageReference;

public class Picture_act extends AppCompatActivity{
ImageView i1;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.picture_activity);
    FirebaseStorage storage = FirebaseStorage.getInstance();
    StorageReference storageReference = storage.getReference();
    i1 = (ImageView) findViewById(R.id.full_picture);
    Glide.with(this).using(new 
FirebaseImageLoader()).load(storageReference).into(i1);
}
}

Gradle File -

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
    exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.google.firebase:firebase-storage:11.4.2'
compile 'com.google.firebase:firebase-auth:11.4.2'
compile 'com.firebaseui:firebase-ui-storage:3.0.0'
compile 'com.android.support:appcompat-v7:25.1.0'
compile 'com.android.support:design:25.1.0'
compile 'com.github.devlight.navigationtabstrip:navigationtabstrip:1.0.4'

testCompile 'junit:junit:4.12'
compile 'com.github.bumptech.glide:glide:3.8.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.2.0'

}
apply plugin: 'com.google.gms.google-services'

I am getting a error:

error

You have to create an image loader class – Yunus Kulyyev Oct 09 '17 at 18:04 — Yunus Kulyyev, Oct 09 '17 at 18:04

score 9 · Accepted Answer · edited Jun 19 '20 at 13:12

It seems that with Firebase UI 3.0.0, Firebase has Glide 4.0 support and has changed the way the data is loaded using Glide. According to documentation at Github:

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

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

Then you can 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);

(Source: https://github.com/firebase/FirebaseUI-Android/tree/master/storage)

If you downgrade Firebase UI to 2.4.0, your code should work, however in that case you will most probably receive mixing version errors with support libraries.

this is the good solution. You must add implementation 'com.firebaseui:firebase-ui-storage:4.1.0' and Rebuild project or even restart Android Studio (for GlideApp to be generated) — Dan Alboteanu, Aug 23 '18 at 06:18

score 8 · Answer 2 · answered Oct 09 '17 at 18:06

8

Try this way:

storageReference.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                    @Override
                    public void onSuccess(Uri uri) {
                        imageURL = uri.toString();
                        Glide.with(getApplicationContext()).load(imageURL).into(i1);
                    }
                }).addOnFailureListener(new OnFailureListener() {
                    @Override
                    public void onFailure(@NonNull Exception exception) {
                        // Handle any errors
                    }
                });

So this way, you get a URL to the image in the storage and you load that URL into the glide

answered Oct 09 '17 at 18:06

Yunus Kulyyev

1,022
15
26

Hi, Thanks for your Ans, but now I am getting this error in logcat _- StorageException has occurred. User does not have permission to access this object. Code: -13021 HttpResult: 403 – Kanishq Gupta Oct 09 '17 at 18:41
Ohh Ok so you have to go to your firebase and change the rules for the storage – Yunus Kulyyev Oct 09 '17 at 18:42
By default, you can access the firebase storage only if you are signed in – Yunus Kulyyev Oct 09 '17 at 18:42
firebase rules :- service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write; } } } – Kanishq Gupta Oct 09 '17 at 18:46
Unfortunately yes :- E/StorageUtil: error getting token java.util.concurrent.ExecutionException: com.google.android.gms.internal.zzekw: Please sign in before trying to get a token. – Kanishq Gupta Oct 09 '17 at 18:52

score 0 · Answer 3 · answered Jun 19 '20 at 15:41

( KOTLIN ) It was not mentioned anywhere in the Docs but to have to load images directly from Cloud Storage to your App using Glide you have to include three lines in app build.gradle (in addition to other Firebase dependencies):

implementation 'com.github.bumptech.glide:glide:4.11.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'
implementation 'com.firebaseui:firebase-ui-storage:6.2.0'

Though you are adviced to use kotlin - kapt instead of annotationProcessor for Kotlin.

Then some where in your Project add this class for Firebase Loader. Note that the annotation is very important for the class:

package com.your.package.name

import android.content.Context
import com.bumptech.glide.Glide
import com.bumptech.glide.Registry
import com.bumptech.glide.annotation.GlideModule
import com.bumptech.glide.module.AppGlideModule
import com.firebase.ui.storage.images.FirebaseImageLoader
import com.google.firebase.storage.StorageReference
import java.io.InputStream


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

Then you can use it as:

Glide.with(this /* context */)
    .load(storageReference)
    .into(imageView)

Any errors? Update the dependencies above also Invalidate Cache and Restart your Android Studio.

Getting Image from Firebase Storage using Glide

3 Answers3

Linked

Related