Android : Update Image in GridView on touch event in Adapter

Question

I have a GridView and attached adapter to it. Adapter populates images in the grid. I have set setOnTouchLister to GridView in my Activity and implemented in the adapter only. In adapter I have an Integer[] imageIDs that contains resource ids of all images that are added & an ArrayList<ImageSourceObject> imgObjsArr that extends ImageView & has other properties set.

Now onTouch(), I want to change the image of the selected image to other one. Here's my code : SEtting adapter of grid in Activity in onCreate :

        // Set Objects in Game View
    gameView = (GridView) this.findViewById(R.id.game_gridView);
    gameObjAdapter = new GameObjectsAdapter(this, R.id.game_gridView, null);
    gameView.setAdapter(gameObjAdapter);

ADAPTER :

public class GameObjectsAdapter extends BaseAdapter implements OnTouchListener {
    super();
    mContext = c;
    this.layoutResourceId = layoutResourceId;
    objects = data;
    gridViewResAdap = (GridView) mContext.findViewById(this.layoutResourceId);
    createObjectsArray();
    Log.d("GOA", "Created Objects Array");
}

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

    ImageSourceObject imgView;

    if (convertView == null) {
        imgView = new ImageSourceObject(mContext);
        imgView.setLayoutParams(new GridView.LayoutParams(20, 20));
        imgView.getScaleType();
        imgView.setScaleType(ScaleType.FIT_XY);
        imgView.setPadding(0, 0, 0, 0);
    } else {
        imgView = (ImageSourceObject) convertView;
    }

    // Chk status of touched of imgView & set image accordingly
    if (imgView.isTouched())
        imgView.setImage(R.drawable.droid_touched2);
    else 
        imgView.setImage(imageIds[position]);

    return imgView;
}   

@Override
public boolean onTouch(View v, MotionEvent event) {
    // TODO Auto-generated method stub

    int action = event.getActionMasked();
    float currentXPos = event.getX();
    float currentYPos = event.getY();
    int position = gridViewResAdap.pointToPosition((int)currentXPos, (int) currentYPos);

    // Key was Pressed Here
    if (action == MotionEvent.ACTION_UP) {
        if (position > 0) {
            // Get the object which is clicked
            ImageSourceObject isb = this.imgObjsArr.get(position);
            Log.d("GA", " Postion ID " + isb.getId() + " [] ID : " + imageIds[position]);

            // Change the status of touched & set image
            isb.setTouched(true);
            isb.setImage(R.drawable.droid_touched2); 

            // Update the ArrayList & Integer[] with this updated obj 
            this.imgObjsArr.set(position, isb);
            imageIds[position] = R.drawable.droid_touched2;
            Log.d("ISB", "++++ Object ID : " + isb.getId() + " [] ID : " + imageIds[position] + " ISB Touched :" + isb.isTouched());

            Toast.makeText(mContext, "Postion Pressed : " + (position+1), 
                Toast.LENGTH_SHORT).show();

            //this.gridViewResAdap.invalidate();
        }

        return true;
    }

    return false;
}

Logs :

02-19 15:19:11.615: D/GA(2046):  Postion ID 2130837556 [] ID : 2130837556
02-19 15:19:11.617: D/ISB(2046): ++++ Object ID : 2130837559 [] ID : 2130837559 ISB Touched :true

The logs say that the object in Integer[] & ArrayList both are updated & have right values. After all this also the image is not updated on the screen. The gridViewResAdap is also the object of grid that is passed from the activity. I tried calling invalidate() on it also, but yet no results. As in my getView(), I am using imageIDs, so I have kept that also updated.

ImageSourceObject :

public class ImageSourceObject extends ImageView {

public void setImage(int resourceId) {
    super.setImageResource(resourceId);
    this.setId(resourceId);
}

Also, onTouch() gives error to call onPerformClick(), I am not sure where to call & why to call. I have alos not implemented onClickListener in the adapter. What can be done in this case & what to write in onClickListener when things are manged in onTouch().

Can you help me know why the image object is not updating and where am I going wrong ? I thought I have to refresh the grid, so have also called invalidate(), but no results.

Any help is highly appreciated.

Thanks

Answer 1

After your ImageView begins handling the TouchEvent, it is the only view allowed to do anything with that touch gesture. You want your GridView to intercept the TouchEvent, check the X and Y coordinates of the TouchEvent (event.getX(); event.getY()) and see if those coordinates fall within the bounds of one of your ImageView objects. If yes, set a flag on the ImageView or something that can trigger your setImageDrawable() method. I was able to achieve a similar effect in one of my projects but I had to create a custom GridView class (public class yourGridView extends GridView), then override the following:

@Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        int action = event.getAction();
        switch(action) {
            case MotionEvent.ACTION_DOWN:
                Log.i(AGL, "InterceptAction = DOWN");
                break;
            case MotionEvent.ACTION_MOVE:
                Log.i(AGL, "InterceptAction = MOVE");
                break;
            case MotionEvent.ACTION_CANCEL:
                Log.i(AGL, "InterceptAction = CANCEL");
                return false;
        }
        return true;  //returning true tells your main Activity that you want the custom GridView to handle this TouchEvent; It will then send the TouchEvent to your GridView's onTouchEvent() method for handling.
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        switch(action) {
            case MotionEvent.ACTION_MOVE:
                int xCoord = (int) event.getX();
                int yCoord = (int) event.getY();
                Log.i(AGL, "MOVE EVENT;" + "\n" +  "Touch X = " + Integer.toString(xCoord) + "\n" +
                "Touch Y = " + Integer.toString(yCoord));
                for(int i = 0; i < this.getChildCount(); i++) {
                    ImageView suspect = (ImageView) this.getChildAt(i);
                    if(suspect.getBounds().contains(xCoord, yCoord)) {
                        suspect.CHANGE_YOUR_IMAGE_HERE();
                        suspect.invalidate();
                    }
                }
                break;
        }

        return true;
    }

PLEASE NOTE: getBounds() is a method I wrote in my custom ImageView class. This method returns a Rect object that represents the bounding box of the ImageView object. You will have to use your own logic for fetching the bounds of your ImageView.

ALSO NOTE: When I run this logic in my project, my ImageViews change images rapidly during the touch gesture. I haven't figured out yet how to limit it to one image change per MotionEvent.ACTION_MOVE.

I hope this helps.

Answer 2

You can simply do:

@Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub

int action = event.getActionMasked();
float currentXPos = event.getX();
float currentYPos = event.getY();
int position = gridViewResAdap.pointToPosition((int)currentXPos, (int) currentYPos);

// Key was Pressed Here
if (action == MotionEvent.ACTION_UP) {
    if (position > 0) {
       ((ImageView)v).setImageDrawable(ctx.getResources().getDrawable(R.drawable.droid_touched2));
    }

    return true;
}

return false;

}