How to retrive Images from firestore to recyclerview

Question

I am trying to retrieve images from Firebase Firestore. I am able to retrieve text in RecyclerView successfully however I'm not sure how to retrieve the images.

I had a look at similar questions unfortunately none helped.

My MainClass

 package com.harsh.preacher.ui.HomeToDestination;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.app.ProgressDialog;
import android.os.Bundle;
import android.util.Log;

import com.google.firebase.firestore.DocumentChange;
import com.google.firebase.firestore.DocumentSnapshot;
import com.google.firebase.firestore.EventListener;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.FirebaseFirestoreException;
import com.google.firebase.firestore.QuerySnapshot;
import com.harsh.preacher.R;
import com.squareup.picasso.Picasso;

import java.util.ArrayList;

public class MustHaveEquipment extends AppCompatActivity {
    DocumentSnapshot documentSnapshot;
    RecyclerView recyclerView;
    ArrayList<ProductModel> productModelArrayList ;
    ProductAdapter productAdapter;
    FirebaseFirestore db;
    ProgressDialog progressDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_must_have_equipment);
         progressDialog = new ProgressDialog(this);
         progressDialog.setCancelable(false);
         progressDialog.setMessage("Loading Products");
         progressDialog.show();

         recyclerView = findViewById(R.id.recyclerView);
         recyclerView.setHasFixedSize(true);
         recyclerView.setLayoutManager(new LinearLayoutManager(this));
         db = FirebaseFirestore.getInstance();
         productModelArrayList = new ArrayList<ProductModel>();
         productAdapter = new ProductAdapter(MustHaveEquipment.this,productModelArrayList);
         recyclerView.setAdapter(productAdapter);
         EventChangeListner();
    }

    private void EventChangeListner() {
        db.collection("Products")
                .addSnapshotListener(new EventListener<QuerySnapshot>() {
                    @Override
                    public void onEvent(@Nullable @org.jetbrains.annotations.Nullable QuerySnapshot value, @Nullable @org.jetbrains.annotations.Nullable FirebaseFirestoreException error) {
                        if(error!=null){
                            if(progressDialog.isShowing())
                                progressDialog.dismiss();
                            Log.e("No Internet Connection",error.getMessage());
                        }
                        for (DocumentChange dc : value.getDocumentChanges()){

                            if(dc.getType() == DocumentChange.Type.ADDED){
                                productModelArrayList.add(dc.getDocument().toObject(ProductModel.class));
                            }
                            productAdapter.notifyDataSetChanged();
                            if(progressDialog.isShowing())
                                progressDialog.dismiss();
                        }
                    }
                });
    }
}

My Adapter Class

package com.harsh.preacher.ui.HomeToDestination;

import android.content.Context;
import android.os.Build;
import android.transition.AutoTransition;
import android.transition.TransitionManager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.RequiresApi;
import androidx.recyclerview.widget.RecyclerView;

import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.FirebaseAppLifecycleListener;
import com.google.firebase.FirebaseOptions;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.firestore.DocumentReference;
import com.google.firebase.firestore.DocumentSnapshot;
import com.google.firebase.firestore.FirebaseFirestore;
import com.harsh.preacher.R;
import com.squareup.picasso.Picasso;

import org.jetbrains.annotations.NotNull;
import org.w3c.dom.Document;

import java.util.ArrayList;

public class ProductAdapter extends RecyclerView.Adapter<ProductAdapter.ProductViewHolder> {
    DocumentSnapshot documentSnapshot;

    Context context;
    ArrayList<ProductModel> productModelArrayList;

    public ProductAdapter(Context context, ArrayList<ProductModel> productModelArrayList) {
        this.context = context;
        this.productModelArrayList = productModelArrayList;
    }

    @NonNull
    @NotNull
    @Override
    public ProductAdapter.ProductViewHolder onCreateViewHolder(@NonNull @NotNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.epupiment_design,parent,false);
        return new ProductViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull @NotNull ProductAdapter.ProductViewHolder holder, int position) {
        ProductModel productModel = productModelArrayList.get(position);
        holder.productName.setText(productModel.ProductName);
        holder.aboutProduct.setText(productModel.AboutProduct);
        holder.productDescription.setText(productModel.ProductUse);






    }

    @Override
    public int getItemCount() {
        return productModelArrayList.size();
    }

    public static class ProductViewHolder extends RecyclerView.ViewHolder {
        TextView aboutProduct,productName,productDescription;
        RelativeLayout expandable,card;
        ImageView showmore,productImage;

        public ProductViewHolder(@NonNull @NotNull View itemView) {
            super(itemView);


            aboutProduct = itemView.findViewById(R.id.productDescription);
            productName = itemView.findViewById(R.id.productName);
            productDescription = itemView.findViewById(R.id.aboutProduct);
            productImage = itemView.findViewById(R.id.productImage);
            expandable = itemView.findViewById(R.id.expandable);
            card = itemView.findViewById(R.id.cardeshwar);
            showmore = itemView.findViewById(R.id.showMore);
            showmore.setOnClickListener(new View.OnClickListener() {
                @RequiresApi(api = Build.VERSION_CODES.KITKAT)
                @Override
                public void onClick(View view) {
                    if (expandable.getVisibility() == View.VISIBLE) {
                        TransitionManager.beginDelayedTransition(card,
                                new AutoTransition());
                        expandable.setVisibility(View.GONE);
                        showmore.setImageResource(R.drawable.showmore);
                    } else {
                        TransitionManager.beginDelayedTransition(card,
                                new AutoTransition());
                        expandable.setVisibility(View.VISIBLE);
                        showmore.setImageResource(R.drawable.showless);
                    }

                }
            });

        }
    }

}

My model class

package com.harsh.preacher.ui.HomeToDestination;

import android.widget.ImageView;

public class ProductModel {
    String ProductName, ProductUse, AboutProduct;
    ImageView ProductImage;

    public ProductModel(){}


    public ProductModel(String productName, String productUse, String aboutProduct,ImageView productImage){
        ProductName = productName;
        ProductUse = productUse;
        AboutProduct = aboutProduct;
        ProductImage = productImage;



    }

    public String getProductName() {
        return ProductName;
    }

    public void setProductName(String productName) {
        ProductName = productName;
    }

    public String getProductUse() {
        return ProductUse;
    }

    public void setProductUse(String productUse) {
        ProductUse = productUse;
    }

    public String getAboutProduct() {
        return AboutProduct;
    }

    public void setAboutProduct(String aboutProduct) {
        AboutProduct = aboutProduct;
    }
    public ImageView getProductImage() {
        return ProductImage;
    }

    public void setProductImage(ImageView productImage) {
        ProductImage = productImage;
    }




}

Here is the structure of my database

Answer 1

Follow these steps to show images in RecyclerView

1. Remove ImageView from ProductModel
2. Add String imageUrl to ProductModel and set its value with the image URL from Firestore (I see from the screenshot that it is named "Image").
3. In onBindViewHolder from the ProductAdapter, use the position provided to retrieve the appropriate ProductModel from productModelArrayList and pass its imageUrl value to ProductViewHolder.
4. In ProductViewHolder, use the imageUrl to load the image into the ImageView. (Glide and Picasso are two commonly used library to load images)

PS: Never add UI elements in your model. It will cause lifecycle issues in the future.

Let me know if you have any questions.