Firestore – RecycleView – Image holder

I don’t know how to write a holder for an image. I already have 2 texts set, but I don’t know what the holder for the image should look like. Can you help me tell what the writeup for the image should look like in order for it to appear correctly?

holder.artistImage.setImageResource(model.getArtistImage());

My code:

public class ArtistsAdapter extends FirestoreRecyclerAdapter<ArtistsModel, ArtistsAdapter.holder> {


/**
 * Create a new RecyclerView adapter that listens to a Firestore Query.  See {@link
 * FirestoreRecyclerOptions} for configuration options.
 *
 * @param options
 */
public ArtistsAdapter(@NonNull FirestoreRecyclerOptions<ArtistsModel> options) {
    super(options);
}

@Override
protected void onBindViewHolder(@NonNull holder holder, int position, @NonNull ArtistsModel model) {

    holder.artistName.setText(model.getArtistName());
    holder.artistClass.setText(model.getArtistClass());

}

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

class holder extends RecyclerView.ViewHolder{

    TextView artistName, artistClass;
    ImageView artistImage;


    public holder(@NonNull View itemView) {
        super(itemView);
        View view = itemView;

        artistName = view.findViewById(R.id.tvartist_name);
        artistClass = view.findViewById(R.id.tvartist_class);
        artistImage = view.findViewById(R.id.ivartist_photo);

    }


}

Answer

You can use a library like Glide or Picasso to load the image from a given URL. Both libraries have lots of extra options for things like making the image round, adding a placeholder image while it loads, or adding an error image to show if it can’t load.

With Glide:

You can pass in a context to the adapter constructor, or get it from the holder root view to use with Glide

@Override
protected void onBindViewHolder(@NonNull holder holder, int position, @NonNull ArtistsModel model) {
    holder.artistName.setText(model.getArtistName());
    holder.artistClass.setText(model.getArtistClass());
    Glide.with(holder.itemView)
         .load(model.getArtistImage())
         .into(holder.artistImage);
}

With Picasso:

@Override
protected void onBindViewHolder(@NonNull holder holder, int position, @NonNull ArtistsModel model) {
    holder.artistName.setText(model.getArtistName());
    holder.artistClass.setText(model.getArtistClass());
    Picasso.get()
           .load(model.getArtistImage())
           .into(holder.artistImage);
}