Question

I’m newbie in this area, so pls be patient 🙂

I’m using some LayoutInflater to set GridView with icon + text below. When I usit as below, everything goes fine. But when I remove comment mark “//” everything messess up. Icons are presented in wrong order and they even double in few places.

    View v;
//    if (convertView == null) {  // if it's not recycled, initialize some attributes
        LayoutInflater li = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = li.inflate(R.layout.icon, null);
        TextView tv = (TextView)v.findViewById(R.id.icon_text);
        tv.setText(kraj[position]);
        ImageView iv = (ImageView)v.findViewById(R.id.icon_image);
        iv.setImageResource(mThumbIds[position]);
        iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
        iv.setLayoutParams(new LinearLayout.LayoutParams(mniejszy, mniejszy));
//    } else {
    //    v = (View) convertView;
//    }
    return v;

This is the tutorial I got part of the code from:
http://developer.android.com/guide/topics/ui/layout/gridview.html

Answer 1

That is happening because you set the image only when convertView is null(this will happen for example when the GridView is first shown on the screen), and as the GridView is scrolled(convertView will not be null) it will recycle row views so you’ll end up with old rows which you didn’t update with the new images/text. Your code should be like this:

View v;
    if (convertView == null) {  // if it's not recycled, initialize some attributes
        LayoutInflater li = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = li.inflate(R.layout.icon, null);            
    } else {
       v = (View) convertView;
    }
    TextView tv = (TextView)v.findViewById(R.id.icon_text);
    tv.setText(kraj[position]);
    ImageView iv = (ImageView)v.findViewById(R.id.icon_image);
    iv.setImageResource(mThumbIds[position]);
    iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
    iv.setLayoutParams(new LinearLayout.LayoutParams(mniejszy, mniejszy));
    return v;