GridView duplicates random item

Question

I have a problem with GridView. I use it as a menu for my app. I created a custom adapter to display the menu items as a picture with a label below. The problem is, that without any reason, the first picture and label gets assigned to 10th item, as you can see on the picture(the picures are just placeholders until I draw my own):

https://i.sstatic.net/VOqyr.jpg

I have no idea what causes this, espetially since when I click on some of the available items in the menu and then come back to the menu by pressing the back button, the problem magically disappears.

Here is my code:

public class MainMenuFragment extends Fragment implements OnItemClickListener{
    GridView grid;
    FragmentManager manager;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View root = inflater.inflate(R.layout.main_menu_fragment, container, false);

    manager = getActivity().getFragmentManager();
    grid = (GridView) root.findViewById(R.id.gridView1);

    grid.setAdapter(new MenuTileAdapter(getActivity()));
    grid.setOnItemClickListener(this);

    return root;
}
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    FragmentTransaction trans = manager.beginTransaction();
    switch (position){
        case 0:
            trans.replace(R.id.frag_container, new BasicSettingsFragment());
            trans.addToBackStack(null);
            trans.commit();
            break;
        case 1:
            trans.replace(R.id.frag_container, new StretchingFragment());
            trans.addToBackStack(null);
            trans.commit();
            break;
        case 2:
            trans.replace(R.id.frag_container, new SqueezingFragment());
            trans.addToBackStack(null);
            trans.commit();
            break;
        case 3:
            trans.replace(R.id.frag_container, new BendingFragment());
            trans.addToBackStack(null);
            trans.commit();
            break;
        case 4:
            trans.replace(R.id.frag_container, new CrackBrickingFragment());
            trans.addToBackStack(null);
            trans.commit();
            break;
        case 5:
            trans.replace(R.id.frag_container, new TraverseDeformationFragment());
            trans.addToBackStack(null);
            trans.commit();
            break;
        case 6:
            trans.replace(R.id.frag_container, new CuttingFragment());
            trans.addToBackStack(null);
            trans.commit();
            break;
        default:
            break;
    }
}
}

and here is the getView method of MenuTileAdapter:

    @Override
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);
        gridView = inflater.inflate(R.layout.menu_tile, null);

        TextView label = (TextView) gridView.findViewById(R.id.textView1);
        ImageView icon = (ImageView) gridView.findViewById(R.id.imageView1);

        label.setText(this.labels[position]);
        switch (position){
        case 0:
            icon.setImageResource(R.drawable.a1);
            break;
        case 1:
            icon.setImageResource(R.drawable.a2);
            break;
        case 2:
            icon.setImageResource(R.drawable.a3);
            break;
        case 3:
            icon.setImageResource(R.drawable.a4);
            break;
        case 4:
            icon.setImageResource(R.drawable.a5);
            break;
        case 5:
            icon.setImageResource(R.drawable.a6);
            break;
        case 6:
            icon.setImageResource(R.drawable.a7);
            break;
        case 7:
            icon.setImageResource(R.drawable.a8);
            break;
        case 8:
            icon.setImageResource(R.drawable.a9);
            break;
        case 9:
            icon.setImageResource(R.drawable.a10);
            break;
        case 10:
            icon.setImageResource(R.drawable.a11);
            break;
        case 11:
            icon.setImageResource(R.drawable.a12);
            break;
        }
    } else {
        gridView = convertView;
    }
    return gridView;
}

I've gone through this code a hundread times, and i see nothing to cause this strange problem.

Answer 1

this part right here

if (convertView == null){
    gridView = new View(context);
    gridView = inflater.inflate(R.layout.menu_tile, null);

    TextView label = (TextView) gridView.findViewById(R.id.textView1);
    ImageView icon = (ImageView) gridView.findViewById(R.id.imageView1);

    label.setText(this.labels[position]);
    switch (position){
    case 0:
        icon.setImageResource(R.drawable.a1);
        break;
    case 1:
        icon.setImageResource(R.drawable.a2);
        break;
    case 2:
        icon.setImageResource(R.drawable.a3);
        break;
    case 3:
        icon.setImageResource(R.drawable.a4);
        break;
    case 4:
        icon.setImageResource(R.drawable.a5);
        break;
    case 5:
        icon.setImageResource(R.drawable.a6);
        break;
    case 6:
        icon.setImageResource(R.drawable.a7);
        break;
    case 7:
        icon.setImageResource(R.drawable.a8);
        break;
    case 8:
        icon.setImageResource(R.drawable.a9);
        break;
    case 9:
        icon.setImageResource(R.drawable.a10);
        break;
    case 10:
        icon.setImageResource(R.drawable.a11);
        break;
    case 11:
        icon.setImageResource(R.drawable.a12);
        break;
    }
} else {
    gridView = convertView;
}

if convertView is not null you just give it the recycled view without putting what image and text should go in there