Youtube thumbnails flicker in ListView using official YouTube Android Player API

Question

My problem is not easy to describe in words, but I'll try my best. I have a ListView that shows thumbnails of YouTube videos. Basically these thumbnails do load correctly (meaning that every thumbnail is shown its corresponding row of the ListView), but the strange thing happens while swiping through the list. While swiping down the list (= from the top of the list towards its end) whenever a new thumbnail enters the screen it shows a wrong thumbnail for a few milliseconds before changing to the right one. The wrong thumbnail is always a thumbnail from two or three rows before. While swiping up/back the list, everything is immediately displayed the right way.

I have absolutely no clue where to start the search for this, but I guess my listview adapter may be of interest:

private final Map<View, YouTubeThumbnailLoader> thumbnailViewToLoaderMap;

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    SuggestionViewHolder holder;

    Suggestion suggestion = getItem(position);
    String videoId = suggestion.getYoutubeId();

    // There are three cases here:
    if (convertView == null) {
        convertView = layoutInflater.inflate(R.layout.row_suggestion, parent, false);

        holder = new SuggestionViewHolder();

        // 1) The view has not yet been created - we need to initialize the YouTubeThumbnailView.
        holder.thumbnailView = (YouTubeThumbnailView) convertView.findViewById(R.id.youtubeThumbnail);
        holder.thumbnailView.setTag(videoId);
        holder.thumbnailView.initialize(DeveloperKey.DEVELOPER_KEY, this);

        convertView.setTag(holder);

    } else {

        holder = (SuggestionViewHolder) convertView.getTag();

        // 2) and 3) The view is already created...
        YouTubeThumbnailLoader loader = thumbnailViewToLoaderMap.get(holder.thumbnailView);

        // ...and is currently being initialized. We store the current videoId in the tag.
        if (loader == null) {
            holder.thumbnailView.setTag(videoId);

        // ...and already initialized. Simply set the right videoId on the loader.
        } else {
            loader.setVideo(videoId);

        }
    }

    return convertView;
}


@Override
public void onInitializationSuccess(YouTubeThumbnailView youTubeThumbnailView, YouTubeThumbnailLoader youTubeThumbnailLoader) {
    String videoId = (String) youTubeThumbnailView.getTag();

    thumbnailViewToLoaderMap.put(youTubeThumbnailView, youTubeThumbnailLoader);

    youTubeThumbnailLoader.setOnThumbnailLoadedListener(this);
    youTubeThumbnailLoader.setVideo(videoId);
}


private static class SuggestionViewHolder {
    public YouTubeThumbnailView thumbnailView;
}

Any ideas why this happens? Maybe some caching stuff of the list view (since it always shows one of the previous thumbnails, before switching the image)?

Answer 1

It happens because the loader takes time to show the thumbnail. When the cells are reused, it retains the image from the previous cell so if the loader takes time, it shows the old image for a while before loading the new image. You have to clear it before calling the loader.

    holder = (SuggestionViewHolder) convertView.getTag();

    // 2) and 3) The view is already created...
    YouTubeThumbnailLoader loader = thumbnailViewToLoaderMap.get(holder.thumbnailView);

    // ...and is currently being initialized. We store the current videoId in the tag.
    if (loader == null) {
        holder.thumbnailView.setTag(videoId);

    // ...and already initialized. Simply set the right videoId on the loader.
    } else {
        holder.thumbnailView.setImageBitmap(null);
        loader.setVideo(videoId);

    }