Android, Glide shows wrong image for about one second

Question

I'm using Glide library for loading images from URL, which I get from Graph Request (Facebook). It's used in RecyclerAdapter. When I'm scrolling, each ImageView shows wrong picture for about less than one second, then correct one. Here is the code:

@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) {

    ImageView main_image = viewHolder.main_image,

    getEventCover(position, main_image);

        }

private void getEventCover(int position, final ImageView img){

        GraphRequest request = GraphRequest.newGraphPathRequest(
                AccessToken.getCurrentAccessToken(),
                event.get(position).getEventID(),
                new GraphRequest.Callback() {
                    @Override
                    public void onCompleted(GraphResponse response) {

                        JSONObject data = response.getJSONObject();

                        try {
                            JSONObject cover = data.getJSONObject("cover");
                            String source = cover.getString("source");

                            Glide.with(fragment)
                                    .load(source)
                                    .diskCacheStrategy(DiskCacheStrategy.ALL)
                                    .centerCrop()
                                    .into(img);

                        } catch (JSONException e) {
                            e.printStackTrace();
                        }
                    }
                }
        );

        Bundle parameters = new Bundle();
        parameters.putString("fields", "cover");
        request.setParameters(parameters);
        request.executeAsync();
}

Answer 1

Your "problem" is that the ImageViews you are using are recycled from previous rows (which are disappearing while scrolling). Thus your ImageView in onBindViewHolder already contains a previous image.

This image is displayed until the network requests (GraphRequest and Glide) for the new image are finished.

To avoid the problem you have to clear your ImageView before calling getEventCover. This can be done by setting an placeholder image or by setting a transparent image as follows:

main_image.setImageResource(android.R.color.transparent);

Answer 2

@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) {

    ImageView main_image = viewHolder.main_image,
    main_image.setImageURI(null);
    getEventCover(position, main_image);

        }

During the process of (binding) preparing a child view to display data, a (recycled) view previously used to display data is being retrieved from the cache for reuse. As this process skips initial layout inflation and construction, the ImageView noticeably retains it's source. Setting the source to null immediately drastically improves performance.