Listview with images, but when scroll the List, the images apear in wrong rows

Question

The image (in this moment just one for one specified country), when I scroll the listview appears in some rows, when should appear in just one specified row.

Example: in the row "france", appear the flag of france, but then, the same flag appears in other rows. Not in all rows. At the moment, I'm only testing with the flag of france.

public class MyListAdapter extends SimpleCursorAdapter{

    private Cursor cur;
    private Context context;
    private SQLiteDatabase db;
    private static final String ASSETS_DIR = "images/";
    private String Flag;

    public MyListAdapter (Context context, Cursor c, SQLiteDatabase db) {
        super(context, R.layout.countries_list_item, c, new String[] {}, new int[] {}); 
        this.cur=super.getCursor();
        this.context = context;
        this.db=db;

    }

    private class ViewHolder {
        TextView txtTitle, txtDate;
        ImageView countryIcon;
    }



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

        ViewHolder holder = null;
        if (convertView == null) {
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.countries_list_item, null);

            holder = new ViewHolder();
            holder.txtTitle = (TextView) convertView.findViewById(R.id.lastName);
            holder.txtDate = (TextView) convertView.findViewById(R.id.firstName);
            holder.countryIcon = (ImageView) convertView.findViewById(R.id.country_icon);


            convertView.setTag(holder);
          } 
          else {
            holder = (ViewHolder) convertView.getTag();
          }

        this.cur.moveToPosition(position);  

        holder.txtTitle.setText(this.cur.getString(this.cur.getColumnIndex("CountryID")));
        holder.txtDate.setText(this.cur.getString(this.cur.getColumnIndex("Country")));
        Flag =(this.cur.getString(this.cur.getColumnIndex("CountryImage")));
        Flag=Flag.trim();

        // Set country icon usign File path
        try {
            String imgFilePath = ASSETS_DIR +""+Flag;
            Bitmap bitmap = BitmapFactory.decodeStream(this.context.getResources().getAssets().open(imgFilePath));            
            holder.countryIcon.setImageBitmap(bitmap);

        } catch (IOException e) {
            e.printStackTrace();
        }
        return convertView;
    }
}

http://stackoverflow.com/questions/7738527/getting-an-issue-while-checking-the-dynamically-generated-checkbox-through-list/7738854#7738854 — Lalit Poptani, Jan 20 '12 at 05:39

score 0 · Answer 1 · edited May 23 '17 at 12:13

0

This is happening because Views get recycled via convertView in ListViews. You already have a Holder to help you reference the Views in the rows so you need to grab the ImageView and set the image to the appropriate one based on the data in the adapter. This is because items in a listview have no idea which item they represent, they just know they are a View in a ListView. You need to give it some help so it "knows" what it represents.

The recycling of views in listviews is a very common source of confusion. Please also see my explanation here: Checkboxes in a ListView - When I select the first, it checks the last and vice versa

edited May 23 '17 at 12:13

Community

1
1

answered Jan 20 '12 at 04:34

LuxuryMode

33,401
34
117
188

Hi Luxury. I have created a empty class with RowData name, but when i try to put " RowData object = getModel(position);" in the getView(), give me a error on getmodel. I have try with other examples, to see what is the problem, but nothing. Thank you – filoli Jan 20 '12 at 23:45

Listview with images, but when scroll the List, the images apear in wrong rows

1 Answers1