Moving imageview with touch event

Question

I just want a simple thing. I have a imageview and I can move it with touch

This is my code, I'm sorry if this wrong because I just tried it myself

img.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View arg0, MotionEvent arg1) {
        // TODO Auto-generated method stub
        if (arg1.getAction() == MotionEvent.ACTION_DOWN) {
            status = StartDrag;
        } else if (arg1.getAction() == MotionEvent.ACTION_UP) {
            status = StopDrag;
        }
        return false;
    }
});

@Override
public boolean onTouchEvent(MotionEvent event) {
    // TODO Auto-generated method stub

    if (status == StartDrag) {
        params.leftMargin = (int) event.getX();
        params.topMargin = (int) event.getY();
        img.setLayoutParams(params);
    }
    return super.onTouchEvent(event);
}

Can you show me the right way please?

Solution 1

I have done this way:

private float xCoOrdinate, yCoOrdinate;

onCreate():

ImageView imageView = (ImageView)findViewById(R.id.imageView);
imageView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent event) {
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                xCoOrdinate = view.getX() - event.getRawX();
                yCoOrdinate = view.getY() - event.getRawY();
                break;
            case MotionEvent.ACTION_MOVE:
                view.animate().x(event.getRawX() + xCoOrdinate).y(event.getRawY() + yCoOrdinate).setDuration(0).start();
                break;
            default:
                return false;
            }
       return true;
    }
});

Done

Solution 2

onTouch events for dragging views works perfect for child views of RelativeLayout and FrameLayout.

Here is an example:

@Override
public boolean onTouch(View v, MotionEvent event){
        switch(event.getAction())
        {
            case MotionEvent.ACTION_DOWN :
            {
                x = event.getX();
                                    y = event.getY();
                dx = x-myView.getX();
                dy = y-myView.getY();
            }
            break;
            case MotionEvent.ACTION_MOVE :
            {
                myView.setX(event.getX()-dx);
                myView.setY(event.getY()-dy);
            }
            break;
            case MotionEvent.ACTION_UP :
            {
                //your stuff
            }
        return true;
}

Now what dx and dy does is, on ACTION_DOWN it records where you have touched on the view, and gets difference from left (x) and top (y) of the view, to maintain those margins during ACTION_MOVE.

Return of touch event has to be true if you are attending it.

Update : For API 8

In case of API 8, The getX() and getY() methods are not giving correct results, so what you can use is getRawX() and getRawY() methods.

Example :

RelativeLayout.LayoutParams parms;
LinearLayout.LayoutParams par;
float dx=0,dy=0,x=0,y=0;

@Override
public boolean onTouch(View v, MotionEvent event) {
    switch(event.getAction())
    {
        case MotionEvent.ACTION_DOWN :
        {
            parms = (LayoutParams) myView.getLayoutParams();
            par = (LinearLayout.LayoutParams) getWindow().findViewById(Window.ID_ANDROID_CONTENT).getLayoutParams();
            dx = event.getRawX() - parms.leftMargin;
            dy = event.getRawY() - parms.topMargin;
        }
        break;
        case MotionEvent.ACTION_MOVE :
        {
            x = event.getRawX();
            y = event.getRawY();
            parms.leftMargin = (int) (x-dx);
            parms.topMargin = (int) (y - dy);
            myView.setLayoutParams(parms);
        }
        break;
        case MotionEvent.ACTION_UP :
        {

        }
        break;
    }
    return true;
}

Solution 3

I had the same issue and managed to solve the problem. That is, drag the image on screen, besides zoom in and out and rotate the image on framelayout in android programmatically. Just try this source code from this blog post

Android rotate zoom drag image in imageview on touch example ...

Comments

[Apurv Kiri]

Yes, so you have to do it different way on older APIs, check updated example.

[Alvin Christian]

btw i have a quetion, what is the different on touch and ontouchevent?

[Apurv Kiri]

onTouchEvent is method of View class, you can implement it if you are creating custom view, wheres onTouch is method of listener to handle touch events elsewhere, its like onTouchEvent's MotionEvent is passed to onTouch method if listener is set. You can also use it for passing events from one view to another, like if a MotionEvent recorded from myView1 can be forwarded to myView2.onTouchEvent(event).

[Lisitso]

I tested this code. The ImageView flickers during moving and has very inaccurate position

[Sudarshan Bhat]

This method makes the image flicker while moving. Any other solution to this?

[Apurv Kiri]

@Enigma which method are you using for getting touch coordinates ? getX() or getRawX() ? Use getRawX() if its flickering in getX() ( same applies for Y ).

[Sudarshan Bhat]

Thanks Apurv. Let me try. I also found this answer very helpful. It ideally handles almost everything - stackoverflow.com/questions/29624671/…

[Hamza]

how to move only inside bounds that the view doesn't get out of bounds

[Anjani Mittal]

@AmeerHamza did you find any solution for this?

[Hamza]

Let me Answer down.

[Dnyaneshwar Patil]

Dragging view going out of the screen. Any solution pls let me know. Thanks in advance.