How can I change Image on Gridview Runtime?

Question

I have one GridView with 3 Column and 3 Rows I want to change Image when User Click any two Images.

for Example I Click First Row 1 and Column 3 Image and Secondly I

Answer 1

Also do the following for updating the grid view images to complete the swap operation:

im.notifyDataSetChanged();
gridView.setAdapter(im);
gridView.invalidateViews()

Answer 2

Swaping the images in the GridView is very simple.What you have to do is

1* Store the cliked position,where you want to perform the swaping .

2* By using those two values perform the swap operation on mThumbIds array.

3* Finally invoke the notifyDataSetChanged() method on the Adapter object i.e im.notifyDataSetChanged();

public class MainActivity extends Activity {
/** Called when the activity is first created. */
int i=0;
int firstClick,secondClick;
GridView gridView;
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    gridView = (GridView)findViewById(R.id.gridviewmy);
    gridView.setAdapter(new ImageAdapter(this));
    final ImageAdapter im = new ImageAdapter(this);
    gridView.setOnItemClickListener(new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3) {
            // TODO Auto-generated method stub
            i++;
            if( i %2!=0){
                firstClick=arg2;
            }else{
                secondClick=arg2;
                Integer help=new Interger(mThumbIds[firstClick]);
                mThumbIds[firstClick]=mThumbIds[secondClick];
                mThumbIds[secondClick]=help;
                notifyDataSetChanged();
                System.out.println("Second Click "+i);
            }

        }
    });
}

}

class ImageAdapter extends BaseAdapter{
private Context mContext;
ImageView iView;
public ImageAdapter(Context c){
    this.mContext = c;
}
@Override
public int getCount() {
    // TODO Auto-generated method stub
    return mThumbIds.length;
}

@Override
public Object getItem(int position) {
    // TODO Auto-generated method stub
    System.out.println("Item Is :-"+mThumbIds[position].toString());
    return position;
}

@Override
public long getItemId(int position) {
    // TODO Auto-generated method stub
    System.out.println("Geting Id of Item "+mThumbIds[position]);
    if(iView != null){
    iView.setImageResource(mThumbIds[0]);
    Toast.makeText(mContext, "Call", Toast.LENGTH_SHORT).show();
    }
    return 0;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub

    if( convertView == null){
        iView = new ImageView(mContext);
        iView.setLayoutParams(new GridView.LayoutParams(85, 85));
        iView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        iView.setPadding(8,8,8,8);
    }else{
        iView = (ImageView)convertView;
    }

        iView.setImageResource(mThumbIds[position]);
        return iView;
}
private Integer[] mThumbIds = {
        R.drawable.a_bhaibij,   R.drawable.a_dashera,       R.drawable.a_dipawali,
        R.drawable.a_gandhi,    R.drawable.a_holi,          R.drawable.a_indepe,
        R.drawable.a_janmastmi, R.drawable.a_kite,          R.drawable.a_newyear
        };

}

I think this may solve you problem.

All the best.

Answer 3

notifyDataSetChanged(); did not work for me. eclipse gave an error. so instead of searching for the real solution, if there is one, I just reloaded the java page. Of course I am saving the state of the images in the gridview (adapter) in internal storage in a file named graphics. So on reload of the java page it repaints with correct images. It works.