Question

I try to make an imageview clickable.
Actually it is clickable, so that I can call an Intent after the user touches the imageview.
But I am struggeling to change the image on touch.

I want the following:

• Default (no touch) : Image1
• User touches the imageview: change to image2
• User moves with finger out of imageview : change back to Image1
  (without calling Intent)
• User untouches imageview: call Intent and switch back to Image1

Some of these things are working with the following code:

final ImageView v = (ImageView) findViewById(R.id.profileImage);

    v.setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(View arg0, MotionEvent arg1) {
            switch (arg1.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                   v.setImageResource(R.drawable.ic_contact_picture_down);

                break;
            }


            case MotionEvent.ACTION_CANCEL:{

                v.setImageResource(R.drawable.ic_contact_picture);
                break;

            }

            case MotionEvent.ACTION_UP: {

                takePhoto();

                v.setImageResource(R.drawable.ic_contact_picture);
                break;
            }

            }
            return true;
        }
    });

The image changes on touch correctly to image2. So the ACTION_DOWN is working.
ACTION_UP is called if the user untouches the imageview. But it is also called if the untouch is done outside of the imageview. If this occurs I want to switch to image1 back but not call takePhoto() function.
ACTION_CANCEL is never called, which I considered to be the candidate for the above case.

Answer 1

You can try use a Rect to hold the bounds of the ImageView and then use ACTION_MOVE

For example, declare a Rect object,

private Rect rect;

Then in your setOnTouchListener(), initialize the Rect and check using ACTION_MOVE,

v.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View arg0, MotionEvent arg1) {
        switch (arg1.getAction()) {
          case MotionEvent.ACTION_DOWN: {
            // Declare the bounds of the rect
            rect = new Rect(v.getLeft(), v.getTop(), v.getRight(), v.getBottom());   
            v.setImageResource(R.drawable.ic_contact_picture_down);

            break;
          }

          case MotionEvent.ACTION_MOVE:{
            if(!rect.contains((int)arg1.getX(), (int)arg1.getY())) {
                // Outside the bounds
                v.setImageResource(R.drawable.ic_contact_picture);
            }
            break;        
          }

          case MotionEvent.ACTION_UP: {

            takePhoto();

            v.setImageResource(R.drawable.ic_contact_picture);
            break;
          }
        }
        return true;
    }
});

Sorry I haven’t tested this but I think you can get the idea 🙂