Troubles with using Palette with GridView

Question

When implementing Palette with my GridView, I am having trouble with scrolling.

Basically, here's the situation: Each one of the items in the GridView has a title bar and an Image that loads. Using the Palette, the title bar is supposed to change to the extracted color that the Palette extracts.

But what happens is that every time I scroll down the Grid View, and then scroll back up, the positioning changes with the bar background color.

Here's an example:

Then when I have scrolled down and scrolled up again:

Also, the coloring doesn't seem to be quite right either does it? for some reason it looks like it just selects the last color that was loaded, and sometimes it doesn't even load at all as you can see looking at the bars.

I am doing this in my Album Adapter, here's the code and hopefully someone can guide me in the right direction.

public class AlbumAdapterNew extends ArrayAdapter<String> {

ArrayList<String> names;
Activity context;
ArrayList<String> coverPaths;
String coverPath;
Drawable img;
Bitmap bitmap;
ViewHolder mViewHolder = null;
ImageLoader imageLoader = ImageLoader.getInstance();
private RelativeLayout background;

static class ViewHolder {

    private TextView text;
    private ImageView image;

}

public AlbumAdapterNew(Activity context, ArrayList<String> names,
        ArrayList<String> coverPaths) {
    super(context, R.layout.albums_row, names);

    this.names = names;
    this.context = context;
    this.coverPaths = coverPaths;

    DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder()

    .displayer(new FadeInBitmapDisplayer(500))

    .build();
    ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
            context)

    .defaultDisplayImageOptions(defaultOptions)

    .build();
    ImageLoader.getInstance().init(config); // Do it on Application start

}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub

    if (convertView == null) {
        mViewHolder = new ViewHolder();
        LayoutInflater vi = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = vi.inflate(R.layout.albums_row, parent, false);
        mViewHolder.text = (TextView) convertView
                .findViewById(R.id.albumTextView);
        mViewHolder.image = (ImageView) convertView
                .findViewById(R.id.album_photo);
        background = (RelativeLayout) convertView
                .findViewById(R.id.containerText);
        convertView.setTag(mViewHolder);

    }

    else {

        mViewHolder = (ViewHolder) convertView.getTag();

    }

    mViewHolder.text.setText(names.get(position));

    if (coverPaths.get(position) != null && !coverPaths.isEmpty()) {

        mViewHolder.image.setScaleType(ScaleType.CENTER_CROP);

        Glide.with(context).load("file:///" + coverPaths.get(position))
                .asBitmap()
                .into(new BitmapImageViewTarget(mViewHolder.image) {
                    @Override
                    protected void setResource(Bitmap resource) {
                        // Do bitmap magic here

                        Palette.from(resource).generate(
                                new Palette.PaletteAsyncListener() {
                                    public void onGenerated(Palette palette) {
                                        Palette.Swatch vibrantSwatch = palette
                                                .getVibrantSwatch();
                                        if (vibrantSwatch != null) {

                                            background
                                                    .setBackgroundColor(vibrantSwatch
                                                            .getRgb());

                                        }
                                    }
                                });

                        super.setResource(resource);
                    }
                });

    } else {

        mViewHolder.image.setScaleType(ScaleType.CENTER_INSIDE);

        imageLoader.displayImage("drawable://" + R.drawable.music_record,
                mViewHolder.image);

    }

    return convertView;
}

}

Answer 1

When you create your Palette, you should save it to your ViewHolder in the callback. Apart from Palette being expensive to create, this always keeps your Palette instances in sync with the grid item being handled as you bind the data from the ViewHolder.

EDIT: As requested, a sort-of example. I didn't have a computer with the SDK handy, so this is from memory, but it should get you going in the right direction!

    public class AlbumAdapterNew extends ArrayAdapter<String> {

    ArrayList<String> names;
    Activity context;
    ArrayList<String> coverPaths;
    String coverPath;
    Drawable img;
    Bitmap bitmap;
    ImageLoader imageLoader = ImageLoader.getInstance();

    static class ViewHolder {

        private TextView text;
        private ImageView image;
        private Palette palette;
        private RelativeLayout background;

    }

    public AlbumAdapterNew(Activity context, ArrayList<String> names,
                           ArrayList<String> coverPaths) {
        super(context, R.layout.albums_row, names);

        this.names = names;
        this.context = context;
        this.coverPaths = coverPaths;

        DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder()
            .displayer(new FadeInBitmapDisplayer(500))
            .build();

        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context)
            .defaultDisplayImageOptions(defaultOptions)
            .build();
        ImageLoader.getInstance().init(config); // Do it on Application start

    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // This should be local so you don't get conflicts
        ViewHolder viewHolder;

        if (convertView == null) {
            viewHolder = new ViewHolder();
            LayoutInflater vi = LayoutInflater.from(parent.getContext());
            convertView = vi.inflate(R.layout.albums_row, parent, false);
            viewHolder.text = (TextView) convertView
                    .findViewById(R.id.albumTextView);
            viewHolder.image = (ImageView) convertView
                    .findViewById(R.id.album_photo);
            viewHolder.background = (RelativeLayout) convertView
                    .findViewById(R.id.containerText);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }

        viewHolder.text.setText(names.get(position));

        if (coverPaths.get(position) != null && !coverPaths.isEmpty()) {
            viewHolder.image.setScaleType(ScaleType.CENTER_CROP);
            Glide.with(context)
                    .load("file:///" + coverPaths.get(position))
                    .asBitmap()
                    .into(new BitmapImageViewTarget(viewHolder.image) {
                        @Override
                        protected void setResource(Bitmap resource) {
                            // Do bitmap magic here

                            if(viewHolder.palette != null) {
                                setViewBackgroundColor(viewHolder)
                            } else {
                                Palette.from(resource).generate(
                                    new Palette.PaletteAsyncListener() {
                                        public void onGenerated(Palette palette) {
                                            viewHolder.palette = palette;
                                            setViewBackgroundColor(vh);
                                        }
                                    });
                            }
                            super.setResource(resource);
                        }
                    });
        } else {
            mViewHolder.image.setScaleType(ScaleType.CENTER_INSIDE);
            imageLoader.displayImage("drawable://" + R.drawable.music_record,
                    mViewHolder.image);
        }

        return convertView;
    }

    private void setViewBackgroundColor(ViewHolder vh) {
        Palette.Swatch swatch = vh.palette.getVibrantSwatch();
        if(swatch != null) {
            vh.background.setBackgroundColor(swatch.getRgb());
        }
    }
}