Android GridView bug

Question

I have an app with GridView, which cintains 60 elements... Here is code of ImageAdapter which extends BaseAdapter to show them...

public class ImageAdapter extends BaseAdapter {
private Context context;
private final String[] mobileValues;

public ImageAdapter(Context context, String[] mobileValues) {
    this.context = context;
    this.mobileValues = mobileValues;
}

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

    LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    View gridView;

    if (convertView == null) {

        gridView = new View(context);

        // get layout from mobile.xml
        gridView = inflater.inflate(R.layout.mobile, null);

        // set value into textview
        TextView textView = (TextView) gridView
                .findViewById(R.id.grid_item_label);
        textView.setText(mobileValues[position]);

        // set image based on selected text
        ImageView imageView = (ImageView) gridView
                .findViewById(R.id.grid_item_image);

        String mobile = mobileValues[position];

        if (mobile.equals("Alfa Romeo")) {
            imageView.setImageResource(R.drawable.alfa);
        } else if (mobile.equals("Aston Martin")) {
            imageView.setImageResource(R.drawable.aston);
        } else if (mobile.equals("Audi")) {
            imageView.setImageResource(R.drawable.audi);
        } else if (mobile.equals("Bentley")) {
            imageView.setImageResource(R.drawable.bentley);
        } else if (mobile.equals("BMW")) {
            imageView.setImageResource(R.drawable.bmw);
        } else if (mobile.equals("Bugatti")) {
            imageView.setImageResource(R.drawable.bugatti);
        } else if (mobile.equals("Buick")) {
            imageView.setImageResource(R.drawable.buick);
        } else if (mobile.equals("Cadillac")) {
            imageView.setImageResource(R.drawable.cadillac);
        } else if (mobile.equals("Chery")) {
            imageView.setImageResource(R.drawable.chery);
        } else if (mobile.equals("Chevrolet")) {
            imageView.setImageResource(R.drawable.chevrolet);
        } else if (mobile.equals("Chrysler")) {
            imageView.setImageResource(R.drawable.chrysler);
        } else if (mobile.equals("Citroen")) {
            imageView.setImageResource(R.drawable.citroen);
        } else if (mobile.equals("Dacia")) {
            imageView.setImageResource(R.drawable.dacia);
        } else if (mobile.equals("Daewoo")) {
            imageView.setImageResource(R.drawable.daewoo);
        } else if (mobile.equals("Dodge")) {
            imageView.setImageResource(R.drawable.dodge);
        } else if (mobile.equals("Ferrari")) {
            imageView.setImageResource(R.drawable.ferrari);
        } else if (mobile.equals("Fiat")) {
            imageView.setImageResource(R.drawable.fiat);
        } else if (mobile.equals("Ford")) {
            imageView.setImageResource(R.drawable.ford);
        } else if (mobile.equals("Gaz")) {
            imageView.setImageResource(R.drawable.gaz);
        } else if (mobile.equals("Holden")) {
            imageView.setImageResource(R.drawable.holden);
        } else if (mobile.equals("Honda")) {
            imageView.setImageResource(R.drawable.honda);
        } else if (mobile.equals("Hyindai")) {
            imageView.setImageResource(R.drawable.hyundai);
        } else if (mobile.equals("Infinity")) {
            imageView.setImageResource(R.drawable.infiniti);
        } else if (mobile.equals("Jaguar")) {
            imageView.setImageResource(R.drawable.jaguar);
        } else if (mobile.equals("Jeep")) {
            imageView.setImageResource(R.drawable.jeep);
        } else if (mobile.equals("Kia")) {
            imageView.setImageResource(R.drawable.kia);
        } else if (mobile.equals("Lada")) {
            imageView.setImageResource(R.drawable.lada);
        } else if (mobile.equals("Lamborghini")) {
            imageView.setImageResource(R.drawable.lamborghini);
        } else if (mobile.equals("Lancia")) {
            imageView.setImageResource(R.drawable.lancia);
        } else if (mobile.equals("Land Rover")) {
            imageView.setImageResource(R.drawable.land);
        } else if (mobile.equals("Lexus")) {
            imageView.setImageResource(R.drawable.lexus);
        } else if (mobile.equals("Lotus")) {
            imageView.setImageResource(R.drawable.lotus);
        } else if (mobile.equals("Maserati")) {
            imageView.setImageResource(R.drawable.maserati);
        } else if (mobile.equals("Maybach")) {
            imageView.setImageResource(R.drawable.maybach);
        } else if (mobile.equals("Mazda")) {
            imageView.setImageResource(R.drawable.mazda);
        } else if (mobile.equals("Mercedes")) {
            imageView.setImageResource(R.drawable.mercedes);
        } else if (mobile.equals("Mercuri")) {
            imageView.setImageResource(R.drawable.mercury);
        } else if (mobile.equals("Mini")) {
            imageView.setImageResource(R.drawable.mini);
        } else if (mobile.equals("Mitshubishi")) {
            imageView.setImageResource(R.drawable.mitsubishi);
        } else if (mobile.equals("Nissan")) {
            imageView.setImageResource(R.drawable.nissan);
        } else if (mobile.equals("Opel")) {
            imageView.setImageResource(R.drawable.opel);
        } else if (mobile.equals("Pagani")) {
            imageView.setImageResource(R.drawable.pagani);
        } else if (mobile.equals("Peugeot")) {
            imageView.setImageResource(R.drawable.peugeot);
        } else if (mobile.equals("Pontiac")) {
            imageView.setImageResource(R.drawable.pontiac);
        } else if (mobile.equals("Porshe")) {
            imageView.setImageResource(R.drawable.porshe);
        } else if (mobile.equals("Renault")) {
            imageView.setImageResource(R.drawable.renault);
        } else if (mobile.equals("Rolls Royce")) {
            imageView.setImageResource(R.drawable.rolls);
        } else if (mobile.equals("Rover")) {
            imageView.setImageResource(R.drawable.rover);
        } else if (mobile.equals("Saab")) {
            imageView.setImageResource(R.drawable.saab);
        } else if (mobile.equals("Scion")) {
            imageView.setImageResource(R.drawable.scion);
        } else if (mobile.equals("Seat")) {
            imageView.setImageResource(R.drawable.seat);
        } else if (mobile.equals("Skoda")) {
            imageView.setImageResource(R.drawable.skoda);
        } else if (mobile.equals("Sssang Young")) {
            imageView.setImageResource(R.drawable.ssang);
        } else if (mobile.equals("Subaru")) {
            imageView.setImageResource(R.drawable.subaru);
        } else if (mobile.equals("Suzuki")) {
            imageView.setImageResource(R.drawable.suzuki);
        } else if (mobile.equals("Toyota")) {
            imageView.setImageResource(R.drawable.toyota);
        } else if (mobile.equals("Vauxhall")) {
            imageView.setImageResource(R.drawable.vauxhall);
        } else if (mobile.equals("Volkswagen")) {
            imageView.setImageResource(R.drawable.volkswagen);
        } else if (mobile.equals("Volvo")) {
            imageView.setImageResource(R.drawable.volvo);
        } else {
            imageView.setImageResource(R.drawable.acura);
        }

    } else {
        gridView = (View) convertView;
    }

    return gridView;
}

@Override
public int getCount() {
    // TODO Auto-generated method stub
    return mobileValues.length;
}

@Override
public Object getItem(int position) {
    // TODO Auto-generated method stub
    return null;
}

@Override
public long getItemId(int position) {
    // TODO Auto-generated method stub
    return 0;
  }
 } 

Problem is - that when I scroll grid view down - it starts to show elements from the very beginning.... What is my mistake????

Answer 1

You are not using convertView correctly. The views in an adapter are recycled to prevent extra view creations. If the view is recycled it is passed in convertView. But the important point here is that the view could previously belong to a different item. If you do not fill the view again, it will contain an incorrect data - data that belong to some other item that was recycled.

The getView method is supposed to contain something like this:

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

    if (convertView == null) {
        // create new gridView here
    } else {
        // recycle the convertView
        gridView = (View) convertView;
    }

    // fill the gridView here

    return gridView;
}