Problems using palette with GridView
When implementing a palette with my GridView, I am having scrolling issues.
Basically, here's the situation: each of the items in the GridView has a title bar and an image to load. With the palette, the title bar should be changed to the extracted color that the palette extracts.
But what happens is that every time I view the grid view and then scroll back, the positioning changes with the background color of the panel.
Here's an example:
Then when I scrolled down and scrolled again:
Also, the coloration doesn't seem to be quite right, does it? for some reason it looks like it just picks the last color that was loaded and sometimes it doesn't even load as you can see by looking at the columns.
I do 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;
}
}
source to share
When you create yours Palette
, you must store it in ViewHolder
a callback. Besides being Palette
costly to create, this always keeps your instances in Palette
sync with the grid item being processed when you bind data from ViewHolder
.
EDIT: As requested - example. I didn't have a computer with the SDK, so this comes from memory, but you need to go 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());
}
}
}
source to share