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);