Retrieve all of the images from the server via Glide or Volley library and show them in list view

Question

I want to Retrieve all of the images from the server via Glide or Volley library and show them in list view. How can I do it ?

Answer 1

You don't need to do the image management. Glide can do it internally for you.

For ListView, use glide to load the image in getView() method of the adapter

For Recyclerview, use glide to load the image in onBindViewHolder() method of Adapter.

Answer 2

I want to Retrieve all of the images from the server via Glide or Volley library

Those libraries are used to loading & caching images on Android actually.

In order to download and show all of those images, you can make a Json output of all those links from server side by using json_encode() (on PHP for example) then parse the json in Android and loop through the whole Json output of links then show the images by Glide or Volley library.

Edit:

This is how it should be, on the Android(Client side) inside RecyclerView Adapter:

Glide.with(myContext)
                    .load(mPosts.imgurl)
                    .apply(options)
                    .into(ViewHolder.imgShow)

Follow: https://ledron.github.io/RecyclerView/

You can however add those links seperately inside an ArrayList on Android then showing those too. Follow the tutorial and use Adapter for RecyclerView.

Example Adapter:

public class Adapter  extends RecyclerView.Adapter<Adapter.ViewHolder>{

    ArrayList<String> urls;
    Context context;
    //constructor
    public Adapter(ArrayList<String> ImgUrl, Context context_)
    {
        this.urls = ImgUrl;
        this.context = context_;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder
    {
        private ImageView image;

        public ViewHolder(View v)
        {
          super(v);
          image =(ImageView)v.findViewById(R.id.img);
        }

        public ImageView getImage(){ return this.image;}
    }

    @Override
    public Adapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
    {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.listitem, parent, false);
        v.setLayoutParams(new RecyclerView.LayoutParams(1080,800));
        return new ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(final ViewHolder holder, int position)
    {
        Glide.with(this.context)
                .load(urls.get(position))
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(holder.getImage());
    }

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

}

Answer 3

In Your Gradle

repositories {
  mavenCentral()
  google()
}

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.8.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'
}

Load image into list

  String url = myUrls.get(position);

  GlideApp
    .with(myFragment)
    .load(url)
    .centerCrop()
    .placeholder(R.drawable.loading_spinner)
    .into(myImageView);

Answer 4

Create a java class that Extends ArrayAdapter<ImageView> and use it for ListView:

class imageadapter extends ArrayAdapter<ImageView> {

    private Context context;
    private LayoutInflater inflater;

    private String[] imageurls;

    imageadapter(Context context, String[] imageurls) {
        super(context, R.layout.imagelayout);
        this.imageurls = imageurls;
        this.context = context;
        this.inflater = LayoutInflater.from(context);
    }


    @SuppressLint({"ViewHolder", "SetTextI18n", "ClickableViewAccessibility"})
    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {

        View layout = convertView;
        Holder holder = null;
        if (layout == null) {
            layout = inflater.inflate(R.layout.imagelayout, parent, false);
            holder = new Holder();
            holder.imageView1 = layout.findViewById(R.id.imageView);
            holder.textView1 = layout.findViewById(R.id.textView);
            layout.setTag(holder);
        } else {
            holder = (Holder) layout.getTag();
        }

        Picasso.get().load(imageurls[position]).fit().into(holder.imageView1);
        holder.textView1.setText("Image:" + (position + 1));

        return layout;
    }

    @Override
    public int getCount() {
        return imageurls.length;
    }


    static class Holder {

        ImageView imageView1;
        TextView textView1;

    }

}