Retrieving images from firebase storage

Question

I have uploaded some photos to firebase storage, and I need to connect each of those images with a document in my Cloud Firestore and then show them in my recyclerView. Do i get the url of each image, and add a field "image" to each of the documents in the firestore and use the url as a value? And then how do I put them in my RecyclerView?

I have successfully retrieved other data from the Firestore, using FirestoreUI, however I'm not sure how to do the same for images.

RecyclerViewAdapter Class

public class FirebaseRecyclerViewAdapter extends 
FirestoreRecyclerAdapter<Buildings, 
FirebaseRecyclerViewAdapter.FirebaseRecyclerViewHolder> {

public FirebaseRecyclerViewAdapter(FirestoreRecyclerOptions<Buildings> 
options) {
    super(options);
}

@Override
protected void onBindViewHolder(FirebaseRecyclerViewHolder holder, int 
position, Buildings model) {
    holder.textViewName.setText(model.getName());
}

@NonNull
@Override
public FirebaseRecyclerViewHolder onCreateViewHolder(@NonNull ViewGroup 
parent, int viewType) {
    View v = 
 LayoutInflater.from(parent.getContext()).inflate
(R.layout.buildings_row_item, parent, false);
    return new FirebaseRecyclerViewHolder(v);
}

class FirebaseRecyclerViewHolder extends RecyclerView.ViewHolder {
    TextView textViewName;

    public FirebaseRecyclerViewHolder(View itemView) {
        super(itemView);
        textViewName = itemView.findViewById(R.id.building_name);


    }
}
}

MainActivity Class

public class MainActivity extends AppCompatActivity {


private FirebaseFirestore db = FirebaseFirestore.getInstance();
private CollectionReference buildingRef = db.collection("Building");
StorageReference storageReference = 
FirebaseStorage.getInstance().getReference();
private FirebaseRecyclerViewAdapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main_2);

    setUpRecyclerView();


    getSupportActionBar().hide();
}

private void setUpRecyclerView() {

    Query query = buildingRef.orderBy("name", Query.Direction.DESCENDING);

    FirestoreRecyclerOptions<Buildings> options = new 
FirestoreRecyclerOptions.Builder<Buildings>()
            .setQuery(query, Buildings.class)
            .build();
    adapter = new FirebaseRecyclerViewAdapter(options);

    RecyclerView recyclerView = findViewById(R.id.recycler_view);
    recyclerView.setHasFixedSize(true);
    recyclerView.setLayoutManager(new LinearLayoutManager(this));
    recyclerView.setAdapter(adapter);

}

@Override
protected void onStart() {
    super.onStart();
    adapter.startListening();

}

@Override
protected void onStop() {
    super.onStop();
    adapter.stopListening();
}

}

YQadoome YQadoome · Accepted Answer · 2019-05-23T04:43:47

first of all, you need to upload the image you want to the Firestore Storage using

StorageReference

then you have to save the URL using

getDownloadUrl()

Next Step is to save the URL into field in the document and here an Example

upload the image

 private void uploadFile() {

    if (mImageUri != null) {
        StorageReference fileReference = mStorageRef.child(System.currentTimeMillis()
                + "." + getFileExtension(mImageUri));

        mUploadTask = fileReference.putFile(mImageUri)
                .addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                                          @Override
                                          public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                                              Toast.makeText(context, "Upload successful", Toast.LENGTH_LONG).show();
                                                fileReference.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                                                    @Override
                                                    public void onSuccess(Uri uri) {
                                                        image=new Images(mID+"",Objects.requireNonNull( uri.toString()));
                                                    }
                                                })
                                                .addOnFailureListener(new OnFailureListener() {
                                                    @Override
                                                    public void onFailure(@NonNull Exception e) {
                                                        Toast.makeText(context, "Upload Failed", Toast.LENGTH_LONG).show();
                                                    }
                                                });

                                          }
                                      }
                )

                .addOnFailureListener(e ->
                        Toast.makeText(context, e.getMessage(), Toast.LENGTH_SHORT).show())

        .addOnProgressListener(new OnProgressListener<UploadTask.TaskSnapshot>() {
            @Override
            public void onProgress(UploadTask.TaskSnapshot taskSnapshot) {
                Toast.makeText(context, "Uploading...", Toast.LENGTH_LONG).show();
            }
        });

    } else {
        Toast.makeText(context, "No file selected", Toast.LENGTH_SHORT).show();

    }


}

save the URL to Firestore document

  if(!TextUtils.isEmpty(image.getmImageUrl()))
         mProperty  = new Property(mID, username,mCity ,mDesc,mPrice,noRooms,noBathrooms,address,date,area,parking,Objects.requireNonNull(image.getmImageUrl()));
    else
         mProperty = new Property(mID, username,mCity ,mDesc,mPrice,noRooms,noBathrooms,address,date,area,parking);
        db.collection("Property").document(mProperty.getmID() + "").set(mProperty)
                .addOnSuccessListener(new OnSuccessListener<Void>() {
                    @Override
                    public void onSuccess(Void aVoid) {
                        Toast.makeText(context, "done",
                                Toast.LENGTH_SHORT).show();
                    }
                })
                .addOnFailureListener(new OnFailureListener() {
                    @Override
                    public void onFailure(@NonNull Exception e) {

                        Toast.makeText(context, "Failed",
                                Toast.LENGTH_SHORT).show();
                    }
                });


        boolean flag;

    } else {
        mError.setText("Empty Fields");
        mError.setVisibility(View.VISIBLE);
    }

i am using a model to insert data into firestore you should do that too

and in RecyclerAdapter you can bind the image to the Recyclerview using either Picasso or Bitmap

Picasso.get().load(model.getmImageDrawable()).
            fit().placeholder(R.drawable.placeholder_image).
            error(R.drawable.no_img).into(holder.mImage)

Retrieving images from firebase storage

1 Answers