Android gridview containing NetworkImageView from volley library duplicates image on scroll

Question

I'm using NetworkImageView for loading image from Url in my Gridview.

It works fine for the first time, but on Scroll, the grid items start duplicating at random positions.

Below is my code for GridView adapter:

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

    if (convertView == null) {
        LayoutInflater mInflater = (LayoutInflater)
                context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        convertView = mInflater.inflate(R.layout.grid_item, null);
    }

    NetworkImageView imageViewBand = (NetworkImageView) convertView.findViewById(R.id.imageView_grid_item);
    TextView textViewBand = (TextView) convertView.findViewById(R.id.textView_grid_item);
    imageViewBand.setDefaultImageResId(R.drawable.college_default_icon_grid_view);
    imageViewBand.setAdjustViewBounds(true);
    imageViewBand.setImageUrl(Constants.schoolImageUrl, AppController.getInstance(context).getImageLoader());

    textViewBand.setText(schoolArrayList.get(position).getSchoolName());

    return convertView;
}

The text in grid item works fine, but the issue occurs only with volley image loader causing image duplicate.

Please help.

Answer 1

Your problem is that you are reusing the view on scroll but you are not resetting the imageViewBand image url to null before loading the new image. So what you have to do is to set image url to null before reusing it

Next time try implementing a RecyclerView with a GridLayoutManager since with a RecyclerView reusing views is done automatically