Android: Replacing images in GridView array after

Question

I have a grid view that looks roughly like this (each image will be a different in the end):

When the user clicks any image in the array, I want that image to change to this:

If they click again it changes to this:

And then clicking again reverts back to:

Here's my code so far, just creating a GridView with Imageadapter:

public class GridScroll extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    GridView gridview = (GridView) findViewById(R.id.gridview);
    gridview.setAdapter(new ImageAdapter(this));
    gridview.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
            // CHANGE IMAGE HERE
            Toast.makeText(GridScroll.this, "" + position, Toast.LENGTH_SHORT).show();


        }
    });
}

}

And:

    public View getView(int position, View convertView, ViewGroup parent) {
    ImageView imageView;
    if (convertView == null) {  // if it's not recycled, initialize some attributes
        imageView = new ImageView(mContext);
        imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setPadding(8, 8, 8, 8);
    } else {
        imageView = (ImageView) convertView;
    }

    imageView.setImageResource(mThumbIds[position]);
    return imageView;
}

// references to our images
private Integer[] mThumbIds = {
        R.drawable.lifestyle_5,R.drawable.lifestyle_6,
        R.drawable.lifestyle_7,R.drawable.lifestyle_8,
        R.drawable.icon_4, R.drawable.icon_4, 
        R.drawable.icon_4, R.drawable.icon_4, 
        R.drawable.icon_4, R.drawable.icon_4, 
        R.drawable.icon_4, R.drawable.icon_4, 
        R.drawable.lifestyle_1,R.drawable.lifestyle_2,
        R.drawable.lifestyle_3,R.drawable.lifestyle_4,
        R.drawable.icon_4, R.drawable.icon_4, 
        R.drawable.icon_4, R.drawable.icon_4,
        R.drawable.icon_4, R.drawable.icon_4, 
        R.drawable.icon_4, R.drawable.icon_4, 
        R.drawable.lifestyle_1,R.drawable.lifestyle_2,
        R.drawable.lifestyle_3,R.drawable.lifestyle_4,
        R.drawable.icon_4, R.drawable.icon_4, 
        R.drawable.icon_4, R.drawable.icon_4, 
        R.drawable.icon_4, R.drawable.icon_4, 
        R.drawable.icon_4, R.drawable.icon_4, 
        R.drawable.lifestyle_1,R.drawable.lifestyle_2,
        R.drawable.lifestyle_3,R.drawable.lifestyle_4,
        R.drawable.icon_4, R.drawable.icon_4, 
        R.drawable.icon_4, R.drawable.icon_4,
        R.drawable.icon_4, R.drawable.icon_4, 
        R.drawable.icon_4, R.drawable.icon_4, 

};

Answer 1

To do this, we need to do two things:

1. Change the drawable of the item when it is clicked. In onItemClick(...), change the drawable for the View that is passed to you. This View will be the same one that you created in getView(...) of your adapter.

2. Make sure that the item is shown with the correct drawable the next time it comes on screen. To do this, keep track of the state of each item. Every time you make a view for the item in getView(...), assign it the correct drawable for its state.

---

Here is an example. I am assuming ImageAdapter is a subclass of ArrayAdapter. If not, then you will need to modify this code to work with what you are doing.

Put these somewhere:

private static final int WHITE = 0;
private static final int TEAL = 1;
private static final int MAROON = 2;
private List<Integer> mStates = new ArrayList<Integer>();

This goes in your ImageAdapter:

// Map each state to its graphics.
private Map<Integer, Integer> mStateResources = new HashMap<Integer, Integer>();
mStateResources.put(WHITE, R.drawable.white);

public void add(...) {
    super.add(...);

    // The new item will start as white.
    mStates.add(WHITE);
}

public View getView(int position, View convertView, ViewGroup parent) {
    //ImageView image = ...

    // Set the correct image for the state of this item.
    int state = mStates.get(position);
    int resId = mStateResources.get(state);
    image.setImageResource(resId);
}

In your OnItemClickListener:

public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
    // Change the image and state for this item.
    int nextState;
    switch(mStates.get(position)) {
    case WHITE:
        nextState = TEAL;
        break;
    case TEAL:
        nextState = MAROON;
        break;
    case MAROON:
        nextState = WHITE;
        break;
    }

    // Set the new state and image for this item.
    mStates.put(position, nextState);
    int resId = mStateResources.get(nextState);
    image.setImageResource(resId);
}