Issue using GridView with ImageViews and TextViews

Question

I'm trying to use a GridView with an ImageView and a TextView inside each cell. So i created the cell layout, the grid layout, the imageAdapter and the main activity, of course, but i keep getting the following problem:

When i try this on the emulator, the initial images and captions are shown correctly but as soon as i scroll down, a few of the items start to mess up and keep changing and even duplicating some times.

I'm using 2 parallel arrays (images and caption). I tried using the Log.v function to find out which indexes and images were being shown when the getView was called but only the initial ones (which can be seen without scrolling) are assigned correctly.

I got to solve the problem by generating the view over and over but that's obviously not the right way.

Here are the files I'm using:

Grid Cell:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/GridItem"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:gravity="center_horizontal">

   <ImageView android:id="@+id/grid_item_image"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
   </ImageView>

   <TextView android:id="@+id/grid_item_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="TextView"
      android:gravity="center_horizontal"
      android:textColor="#FFFFFF">
   </TextView>

</LinearLayout>

GridView:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:gravity="center_vertical"
        android:text="@string/txtMenu"
        />
    <GridView
        android:id="@+id/grdMenu"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:padding="10dp"
        android:horizontalSpacing="10dp"
        android:verticalSpacing="10dp"
        android:numColumns="3" >
    </GridView>

</RelativeLayout>

GridActivity: (The only implemented method)

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.menu);

    GridView gridview = (GridView) findViewById(R.id.grdMenu);
    gridview.setAdapter(new ImageAdapter(this));

    gridview.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
            Toast.makeText(getApplicationContext(), "" + position, Toast.LENGTH_SHORT).show();
        }
    });
}

ImageAdapter:

public class ImageAdapter extends BaseAdapter {

    private Context mContext;
    private Integer[] mThumbIds = {R.drawable.potencia32x32,R.drawable.detalle_cuenta32x32,R.drawable.solicitud32x32,R.drawable.agregar32x32,R.drawable.cyr_32x32,
            R.drawable.usuarios,R.drawable.cambio_med64x64,R.drawable.cobranza_ex64x64,R.drawable.convenio_pagos64x64,R.drawable.copiabf64x64,
            R.drawable.info_cliente64x64,R.drawable.mant_exp64x64,R.drawable.ordenes64x64,R.drawable.reembolsos64x64,R.drawable.seguro64x64,R.drawable.solicitudes64x64,
            R.drawable.suministro64x64

    };
    private String[] Caption = {"Consumo","Facturaciones","Solicitudes","Pagos","Cortes y Rcnx","Datos Generales","Cambios de Medidores","Cobranza Externa","Convenio Pagos","Copia Fac. o Bol.",
            "Info. Cliente","Mant. Expediente","Consulta Ordenes","Historia Reembolsos","Seguros","Solicitudes","Caracteristicas Suministro"

    };
    public ImageAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        return mThumbIds.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }


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


        View myView  = null;

        if(convertView==null)
        {
            LayoutInflater li = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            myView = li.inflate(R.layout.grdmenu_cell, null);

            TextView tv = (TextView) myView.findViewById(R.id.grid_item_text);
            Log.v("D:<",String.valueOf(Caption.length) +" y: "+ String.valueOf(position));
            tv.setText(Caption[position]);


            ImageView iv = (ImageView) myView.findViewById(R.id.grid_item_image);
            Log.v("D:<",String.valueOf(mThumbIds.length) +" y: "+ String.valueOf(position));
            iv.setImageResource(mThumbIds[position]);
        }
        else
        {
            myView = convertView;
        }

        return myView;
    }

}

This is my very first question so if I committed any mistakes, please tell me. Thanks in advance.

Answer 1

I think the error is in your getView of your Adapter. ConvertView won't hold on to your resources accessed through findViewById() and whatnot, only the inflated view. Try changing it to something like this:

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


    View myView  = null;

    if(convertView==null)
    {
        LayoutInflater li = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        myView = li.inflate(R.layout.grdmenu_cell, null);
    }else{
        myView = convertView;
    }


    TextView tv = (TextView) myView.findViewById(R.id.grid_item_text);
    Log.v("D:<",String.valueOf(Caption.length) +" y: "+ String.valueOf(position));
    tv.setText(Caption[position]);

    ImageView iv = (ImageView) myView.findViewById(R.id.grid_item_image);
    Log.v("D:<",String.valueOf(mThumbIds.length) +" y: "+ String.valueOf(position));
    iv.setImageResource(mThumbIds[position]);

    return myView;

}