Loading Bitmaps doesn't work correct, while scrolling in RecyclerView

Question

I'm loading the Album-Artworks in my Music-App. Because I couldn't load them on Main-Thread, I'm using Threads, and they get muddled up!

Sometimes the Image isn't loaded in the correct size or it is shown as a brown square. These issues appear if I scroll fast. If I scroll slow, it works!

The important methods of my MusicStore-Class:

public Bitmap getAlbumArtwork(long AlbumID, int Height, int Width) {
    ParcelFileDescriptor pfd;

    Bitmap bCover = null;
    BitmapFactory.Options bOptions = new BitmapFactory.Options();
    bOptions.inJustDecodeBounds = true;

    try {
        Uri ArtworkUri = Uri.parse("content://media/external/audio/albumart");
        Uri uri = ContentUris.withAppendedId(ArtworkUri, AlbumID);
        pfd = mContext.getContentResolver().openFileDescriptor(uri, "r");

        if (pfd != null) {
            BitmapFactory.decodeFileDescriptor(pfd.getFileDescriptor(), null, bOptions);

            bOptions.inSampleSize = calculateInSampleSize(bOptions, Width, Height);

            bOptions.inJustDecodeBounds = false;

            bCover = BitmapFactory.decodeFileDescriptor(pfd.getFileDescriptor(), null, bOptions);

            pfd.close();
        }
    }
    catch (IOException ioe) {
        BitmapFactory.decodeResource(mContext.getResources(), R.drawable.standardartwork, bOptions);

        bOptions.inSampleSize = calculateInSampleSize(bOptions, Width, Height);

        bOptions.inJustDecodeBounds = false;

        bCover = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.standardartwork, bOptions);
    }

    return bCover;
}

public void setAlbumArtwork(final long AlbumID, final ImageView ArtworkView) {
    Thread thArtwork = new Thread(new Runnable() {
        @Override
        public void run() {
            final Bitmap bArtwork = getAlbumArtwork(AlbumID, ArtworkView.getHeight() / 2, ArtworkView.getWidth() / 2);

            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    ArtworkView.setImageBitmap(bArtwork);

                    threadList.remove(Thread.currentThread());
                }
            }, 50);
        }
    });

    threadList.add(thArtwork);

    thArtwork.start();
}

private int calculateInSampleSize(BitmapFactory.Options options, int reqWidth, int reqHeight) {
    final int height = options.outHeight;
    final int width = options.outWidth;

    int size = 1;

    if (height > reqHeight && width > reqWidth) {
        final int halfHeight = height / 2;
        final int halfWidth = width / 2;

        while ((halfHeight / size) > reqHeight && (halfWidth / size) > reqWidth) {
            size *= 2;
        }
    }

    return size;
}

And my RecyclerViewAdapter:

public class SongRecyclerViewAdapter extends RecyclerView.Adapter<SongRecyclerViewAdapter.Holder> {
    private Context mContext;
    private Song[] sSongs;

    private MusicStore musicStore;

    public SongRecyclerViewAdapter(Context context, Song[] songs) {
        mContext = context;
        sSongs = songs;

        musicStore = new MusicStore(mContext);
    }

    @Override
    public Holder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.adapter_songview, parent, false);

        Holder holder = new Holder(view);

        return holder;
    }

    @Override
    public void onBindViewHolder(Holder holder, int position) {
        musicStore.setAlbumArtwork(sSongs[position].getAlbumID(), holder.imvSong);

        holder.txvSongTitle.setText(sSongs[position].getTitle());
        holder.txvSongInfo.setText(sSongs[position].getArtists());
    }

    @Override
    public void onViewDetachedFromWindow(Holder holder) {

    }

    @Override
    public int getItemCount() {
        return sSongs != null ? sSongs.length : 0;
    }

    public class Holder extends RecyclerView.ViewHolder {
        LinearLayout linearLayout;
        ImageView imvSong;
        TextView txvSongTitle;
        TextView txvSongInfo;

        public Holder(View layout) {
            super(layout);

            linearLayout = (LinearLayout) layout;

            imvSong = (ImageView) layout.findViewById(R.id.imvSong);
            txvSongTitle = (TextView) layout.findViewById(R.id.adap_txvSongtitle);
            txvSongInfo = (TextView) layout.findViewById(R.id.adap_txvSongInfo);
        }
    }
}

I'm absolutely open for any other idead to load the Bitmaps correctly!

You could try it out if you want: https://play.google.com/store/apps/details?id=at.guger.musixs

Thanks!

Answer 1

http://square.github.io/picasso/

The setup and docs are quite simple. You can also passing in the Uri and Picasso will resolve it.

Example

Picasso.with(this).load(uri).into(imageView);

If you can also specify things like width and height, placeholder, and much more.

.resize(width, height).placeholder(placeholderImg)