Problem Using GridView with ImageViews and TextViews

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

When I try to do this on the emulator, the source images and titles are displayed correctly, but as soon as I scroll down, some of the elements start randomly and continue to change and even duplicate several times.

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

I need to solve the problem by creating the view again and again, but this is clearly not the case.

Here are the files I use:

Grid:

<?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 first question, so if I make any mistakes, tell me. Thanks in advance.

+5
source share
1 answer

I think the error is in your getView of your adapter. ConvertView will not support access to your resources through findViewById () and something else, just an overpriced 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;

}

+4
source

All Articles