I have implemented a RecyclerView that contains mainly images which is loading in through Picasso. My problem is that as soon as I scroll down or up the view, the placeholder image appears for approx. a second before it is replaced by the actual image. It scrolls very smoothly, but is practically unusable. This happens every time something scrolls off the screen.
Picasso is clearly caching the images to the disk, as they load faster than the initial load time, but they are definitely instantly reloading from the cache. What did i implement incorrectly?
My adapter code:
public class ExploreAdapter extends RecyclerView.Adapter<ExploreAdapter.ExploreViewHolder> {
private List<ExploreItem> exploreItemList;
private Context mContext;
private int deviceWidth = PrefUtils.getDeviceWidth();
public ExploreAdapter(Context context, List<ExploreItem> exploreItemList){
this.mContext = context;
this.exploreItemList = exploreItemList;
}
@Override
public int getItemCount(){
return exploreItemList.size();
}
@Override
public void onBindViewHolder(ExploreViewHolder exploreViewHolder, int i){
ExploreItem item = exploreItemList.get(i);
exploreViewHolder.getvTitle().setText(item.getTitle());
exploreViewHolder.getvUsername().setText(item.getUsername());
exploreViewHolder.getvNumLikes().setText(item.getNbOfLikes());
Picasso.with(mContext).load(item.getMediaLocation().trim())
.resize(deviceWidth, deviceWidth)
.centerCrop()
.placeholder(R.drawable.profile_background)
.into(exploreViewHolder.getvImage());
Picasso.with(mContext).load(item.getUserProfilePicUrl().trim())
.placeholder(R.drawable.profile_picture)
.into(exploreViewHolder.getvProfilePic());
}
@Override
public ExploreViewHolder onCreateViewHolder(ViewGroup viewGroup, int i){
View itemView = LayoutInflater.
from(viewGroup.getContext()).
inflate(R.layout.explore_item, viewGroup, false);
return new ExploreViewHolder(itemView);
}
public static class ExploreViewHolder extends RecyclerView.ViewHolder{
private TextView vTitle,
vUsername,
vNumLikes;
private SquareImage vImage;
private ImageView vProfilePic;
public ExploreViewHolder(View v){
super(v);
this.vTitle = (TextView) v.findViewById(R.id.explore_item_title);
this.vUsername = (TextView) v.findViewById(R.id.explore_item_username);
this.vNumLikes = (TextView) v.findViewById(R.id.explore_item_number_likes);
this.vImage = (SquareImage) v.findViewById(R.id.explore_item_image);
this.vProfilePic = (ImageView) v.findViewById(R.id.explore_item_profile_picture);
}
public TextView getvTitle() {
return vTitle;
}
public TextView getvUsername() {
return vUsername;
}
public ImageView getvProfilePic() {
return vProfilePic;
}
public SquareImage getvImage() {
return vImage;
}
public TextView getvNumLikes() {
return vNumLikes;
}
public void setvImage(SquareImage vImage) {
this.vImage = vImage;
}
public void setvNumLikes(TextView vNumLikes) {
this.vNumLikes = vNumLikes;
}
public void setvProfilePic(ImageView vProfilePic) {
this.vProfilePic = vProfilePic;
}
public void setvTitle(TextView vTitle) {
this.vTitle = vTitle;
}
public void setvUsername(TextView vUsername) {
this.vUsername = vUsername;
}
}
}
Any help is appreciated.
Setting recyclerView parameters as below solved my stutter problem :
recyclerView.setHasFixedSize(true);
recyclerView.setItemViewCacheSize(20);
recyclerView.setDrawingCacheEnabled(true);
recyclerView.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);
i hope it helps someone else too.