Android Recyclerview, loading images from URls using Glide

Question

I am able to retrieve text data successfully from firebase, but i got some difficulty in doing the same for images. I am using a recycler view and below is my recycler adapter:

public class RecyclerviewAdapter extends RecyclerView.Adapter<RecyclerviewAdapter.MyHolder>{

    List<Listdata> listdata;

    public RecyclerviewAdapter(List<Listdata> listdata) {
        this.listdata = listdata;
    }

    @Override
    public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.myview,parent,false);

        MyHolder myHolder = new MyHolder(view);
        return myHolder;
    }


    public void onBindViewHolder(MyHolder holder, int position) {
        Listdata data = listdata.get(position);
        holder.vname.setText(data.getName());
        holder.vemail.setText(data.getEmail());
        holder.vaddress.setText(data.getAddress());

    }

    @Override
    public int getItemCount() {
        return listdata.size();
    }
    class MyHolder extends RecyclerView.ViewHolder{
        TextView vname , vaddress,vemail;
        ImageView thumbnail;


        public MyHolder(View itemView) {
            super(itemView);



            vname = (TextView) itemView.findViewById(R.id.vname);
            thumbnail = (ImageView) itemView.findViewById(thumbnail);
            vemail = (TextView) itemView.findViewById(R.id.vemail);
            vaddress = (TextView) itemView.findViewById(R.id.vaddress);

        }
    }


}

and here is activity code that initialises the process:

myRef.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {
                list = new ArrayList<>();
                // StringBuffer stringbuffer = new StringBuffer();
                for(DataSnapshot dataSnapshot1 :dataSnapshot.getChildren()){
                    Userdetails userdetails = dataSnapshot1.getValue(Userdetails.class);
                    Listdata listdata = new Listdata();
                    String name=userdetails.getName();
                    String email=userdetails.getEmail();
                    String address=userdetails.getAddress();
                    listdata.setName(name);
                    listdata.setEmail(email);
                    listdata.setAddress(address);
                    list.add(listdata);
                    // Toast.makeText(MainActivity.this,""+name,Toast.LENGTH_LONG).show();

                }

                RecyclerviewAdapter recycler = new RecyclerviewAdapter(list);
                RecyclerView.LayoutManager layoutmanager = new LinearLayoutManager(InvestmentDrawer.this);
                recyclerview.setLayoutManager(layoutmanager);
                recyclerview.setItemAnimator( new DefaultItemAnimator());
                recyclerview.setAdapter(recycler);

            }

            @Override
            public void onCancelled(DatabaseError error) {
                // Failed to read value
                //  Log.w(TAG, "Failed to read value.", error.toException());
            }
        });
Glide.with(this)
             .load(imageData)
             .diskCacheStrategy(DiskCacheStrategy.ALL)
             .into(ivImgGlide);
        }

I would like to use the url entered in the database to load the images dynamically. Using glide or picasso. Below is the Listdata class

public class Listdata {

    public String name;
    public String address;
    public String email;

    public String imageurl;

    public String getImageUrl() {
        return imageurl;
    }

    public void SetImageUrl(String imageurl) {
        this.imageurl = imageurl;
    }
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

Answer 1

You can use Picasso or glide inside your onBindViewHolder

public class RecyclerviewAdapter extends RecyclerView.Adapter<RecyclerviewAdapter.MyHolder>{

List<Listdata> listdata;
Context context;

public RecyclerviewAdapter(List<Listdata> listdata,Context context) {
    this.listdata = listdata;
    this.context = context;
}

@Override
public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.myview,parent,false);

    MyHolder myHolder = new MyHolder(view);
    return myHolder;
}


public void onBindViewHolder(MyHolder holder, int position) {
    Listdata data = listdata.get(position);
    holder.vname.setText(data.getName());
    holder.vemail.setText(data.getEmail());

    holder.vaddress.setText(data.getAddress());

      Glide.with(context)
         .load(data.getImageUrl())
         .diskCacheStrategy(DiskCacheStrategy.ALL)
         .into(holder.thumbnail);

     //with Picasso
      Picasso.with(context)
      .load(data.getImageUrl())
      .into(holder.thumbnail);

      // you need to define a method getImageUrl() to get the image url in Listdata
}

@Override
public int getItemCount() {
    return listdata.size();
}
class MyHolder extends RecyclerView.ViewHolder{
    TextView vname , vaddress,vemail;
    ImageView thumbnail;


    public MyHolder(View itemView) {
        super(itemView);



        vname = (TextView) itemView.findViewById(R.id.vname);
        thumbnail = (ImageView) itemView.findViewById(thumbnail);
        vemail = (TextView) itemView.findViewById(R.id.vemail);
        vaddress = (TextView) itemView.findViewById(R.id.vaddress);

    }
}



}

Remember you need to pass context from your parent activity into your adapter

In you onDataChanged you need to set the Image url using SetImageUrl()

@Override
        public void onDataChange(DataSnapshot dataSnapshot) {
            list = new ArrayList<>();
            // StringBuffer stringbuffer = new StringBuffer();
            for(DataSnapshot dataSnapshot1 :dataSnapshot.getChildren()){
                Userdetails userdetails = dataSnapshot1.getValue(Userdetails.class);
                Listdata listdata = new Listdata();
                String name=userdetails.getName();
                String email=userdetails.getEmail();
                String address=userdetails.getAddress();
                String imageUrl = userdetails.getImageUrl();
                listdata.setName(name);
                listdata.setEmail(email);
                listdata.setAddress(address);
                listdata.SetImageUrl(imageUrl);
                list.add(listdata);
                // Toast.makeText(MainActivity.this,""+name,Toast.LENGTH_LONG).show();

            }

            RecyclerviewAdapter recycler = new RecyclerviewAdapter(list,getApplicationContext());
            RecyclerView.LayoutManager layoutmanager = new LinearLayoutManager(InvestmentDrawer.this);
            recyclerview.setLayoutManager(layoutmanager);
            recyclerview.setItemAnimator( new DefaultItemAnimator());
            recyclerview.setAdapter(recycler);

        }