Items Inside Gridview Getting Repeated When Screen Scrolls

Items inside GridView getting repeated when screen scrolls

It's normal that you see the same items as you scroll down the GridView because in the getView method you set the drawables for the ImageView only when the convertView is null(for example for the first elements that are seen when the GridView appear on the screen). If the convertView is not null, meaning you have a recycled row view, you don't set the correct image and you remain with the image that was previously set on this recycled view. Try to modify the getView method like this:

public View getView(int position, View convertView, ViewGroup parent) {
View v;
if (convertView == null) { // if it's not recycled, initialize some attributes
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService( Context.LAYOUT_INFLATER_SERVICE );
v = inflater.inflate(R.layout.gridview_item_layout, parent, false);
} else {
v = (View) convertView;
}
TextView text = (TextView)v.findViewById(R.id.grid_item_text);
text.setText(mTextIds[position]);
ImageView image = (ImageView)v.findViewById(R.id.grid_item_image);
image.setImageDrawable(mThumbIds[position]);
return v;
}

Clicking an element shows you the correct items because you use the position parameter to retrieve the data.

Android ListView and GridView repeating changed item during scroll

In order to optimize the scrolling experience, ListView and GridView will re-use item views to avoid having to inflate/instantiate a view for every list item.

That's why getView has a parameter of type View called convertView. When convertView is null, you need to inflate a new view for the item. When it is not null, that means you can re-use this view to avoid the overhead of inflation.

The downside is that this "recycled" item view will have garbage in it from the last time it was displayed, and you have to reset everything in the view to match the list item.

So a common mistake that new Android developers make is to not have a model representation of everything in the view. For example, if your list item can show a status of active or inactive, then the model for your list item should probably have a boolean property called mActive.

The model for the list has to have the entire current state of the list at any given time, so that it can be recreated whenever the ListView decides it needs to redisplay its list items.

So what you need to do is basically four things:

  • Add the property to your list item model:

        boolean mActive;    // this can be private with getter/setter
  • Create an adapter method for changing the state. For example:

        public void toggleItemActive(int position) {

    mListItem.get(position).mActive = ! mListItem.get(position).mActive;
    notifyDataSetChanged();
    }

    Calling notifyDataSetChanged() here is very important.

  • Use this property in your getView override:

        imageView.setImageResource(item.mActive ? R.drawable.active : R.drawable.inactive);  // or however you are doing it
  • Set the property from your event handler:

        listView.setOnItemClickListener(new OnItemClickListener) {

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    MyAdapter adapter = (MyAdapter) parent.getAdapter();
    adapter.toggleItemActive(position);
    }
    });

Now your ListView will correctly display your list items.

Android GridView Repeating Images

public View getView(int position, View convertView, ViewGroup parent) {
View v;
if (convertView == null) { // if it's not recycled, initialize some attributes
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService( Context.LAYOUT_INFLATER_SERVICE );
v = inflater.inflate(R.layout.gridview_item_layout, parent, false);
} else {
v = (View) convertView;
}
TextView text = (TextView)v.findViewById(R.id.grid_item_text);
text.setText(mTextIds[position]);
ImageView image = (ImageView)v.findViewById(R.id.grid_item_image);
image.setImageDrawable(mThumbIds[position]);
return v;
}

Scrolling issues with GridView in Android

i have solved it: in the link GridView cannot show image you can try



Related Topics



Leave a reply



Submit