Download all the images before displaying it in recyclerview

Question

I have a RecyclerView where I will show 9 images. All these images are on the server. I am using Glide to download the images in the onBindViewHolder of the Adapter. Problem is if the internet is slow than Glide will take time to download the images and show. Till the time it downloads the images, my Recyclerview is empty and doesn't show anything. I want to show a Progressbar till all the images gets downloaded. Once all the images get downloaded will hide the Progressbar and will show all the 9 images.

This is my Adapter:

public class PuzzleGridAdapter extends RecyclerView.Adapter<PuzzleGridAdapter.MyViewHolder> implements ItemTouchHelperAdapter {
    List<String> itemList;
    LayoutInflater inflater;
    Context context;
    private final OnStartDragListener mDragStartListener;

    public PuzzleGridAdapter(Context context, OnStartDragListener dragStartListener) {
        this.context = context;
        mDragStartListener = dragStartListener;
        inflater = LayoutInflater.from(context);
        itemList = new ArrayList<>();
    }

    public void getItemList(List<String> nameList) {
        int currentSize = itemList.size();
        itemList.clear();
        itemList.addAll(nameList);
        notifyItemRangeRemoved(0, currentSize);
        notifyItemRangeInserted(0, nameList.size());
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = inflater.inflate(R.layout.custom_puzzle_row, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final MyViewHolder holder, int position) {
        Log.e("PuzzleGridAdapter", itemList.get(position));

//        holder.textView.setTag(itemList.get(position));
//        new DownloadTask().execute(holder.textView);
        Glide.with(context).load(itemList.get(position)).asBitmap().override(200,200).listener(new RequestListener<String, Bitmap>() {
            @Override
            public boolean onException(Exception e, String model, Target<Bitmap> target, boolean isFirstResource) {
                Log.e("PuzzleGridAdapter", e.getMessage());
                return false;
            }

            @Override
            public boolean onResourceReady(Bitmap resource, String model, Target<Bitmap> target, boolean isFromMemoryCache, boolean isFirstResource) {
                Log.e("PuzzleGridAdapter", "ready");
                return false;
            }
        }).diskCacheStrategy(DiskCacheStrategy.RESULT).into(holder.textView);
        //holder.textView.setImageResource(itemList.get(position));
        // Start a drag whenever the handle view it touched
        holder.cardView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (MotionEventCompat.getActionMasked(event) == MotionEvent.ACTION_DOWN) {
                    mDragStartListener.onStartDrag(holder);
                }
                return false;
            }
        });
    }


    @Override
    public int getItemCount() {
        Log.e("PuzzleGridAdapter", itemList.size() + "");
        return itemList.size();
    }

    public List<String> getUpdateList() {
        return itemList;
    }

    @Override
    public boolean onItemMove(int fromPosition, int toPosition) {
        String item = itemList.remove(fromPosition);
        itemList.add(toPosition, item);
        notifyItemMoved(fromPosition, toPosition);
        return true;
    }

    @Override
    public void onItemDismiss(int position) {
        itemList.remove(position);
        notifyItemRemoved(position);
    }

    public class MyViewHolder extends RecyclerView.ViewHolder implements ItemTouchHelperViewHolder {

        CardView cardView;
        ImageView textView;

        public MyViewHolder(View itemView) {
            super(itemView);
            cardView = (CardView) itemView.findViewById(R.id.gameCard);
            textView = (ImageView) itemView.findViewById(R.id.kolamImage);
        }

        @Override
        public void onItemSelected() {
            itemView.setBackgroundColor(Color.LTGRAY);
        }

        @Override
        public void onItemClear() {
            itemView.setBackgroundColor(Color.WHITE);
        }
    }
}

How can I show a Progressbar till all the contents get downloaded ?

instead of showing a progressbar. use a placeholder on each image until its loaded by Glide. Glide provide a way to use placeholder till image is loading and it also supports GIF. It will make the app more responsive and user can play till its being loaded or can press tha anroid.R.id.home button to go back — Sahil Manchanda, Sep 06 '17 at 08:55
try this one https://stackoverflow.com/a/35306315/5026709 i hope it help... — Ronny Sulistio, Sep 06 '17 at 08:56
Sorry @RonnySulistio I have seen that. But my problem is with the `RecyclerView`. Here I have multiple `ImageViews`. — sagar suri, Sep 06 '17 at 08:59

score 0 · Answer 1 · answered Sep 06 '17 at 09:17

get help from example https://stackoverflow.com/questions/aa and add code like this to adpter:

Glide.with(this)
            .load("https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg")
            .listener(new RequestListener<String, GlideDrawable>() {
                @Override
                public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
                    progressBar.setVisibility(View.GONE);
                    return false;
                }

                @Override
                public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                    progressBar.setVisibility(View.GONE);
                    return false;
                }
            })
            .into(imageView);

add progress bar on Imageview of recycler view items.

Download all the images before displaying it in recyclerview

1 Answers1