Retrieving images from firebase storage - firebase

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();
}
}

Answer 1

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)