How to keep X and Y within layout's view ?

Question

I have a FrameLayout which has a thumb image which the user can drag around.

The thumb width is 10dp and height is 10dp.

    f = (FrameLayout) findViewById(R.id.fl);
    f.setOnTouchListener(flt);

    f.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
    width = f.getMeasuredWidth();
    height = f.getMeasuredHeight();

@Override
        public boolean onTouch(View v, MotionEvent event) {

            float x = event.getX();
            float y = event.getY();

            switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (x<0) {
                    x = x + 10;
                    iv.setX(x);
                    iv.setY(y);
                }
                if (x>f.getWidth()) {
                    x = x - 10;
                    iv.setX(x);
                    iv.setY(y);
                }
                else {
                    iv.setX(x);
                    iv.setY(y);
                }
                // Write your code to perform an action on down
                break;
            case MotionEvent.ACTION_MOVE:
                if (x<0) {
                    x = x + 10;
                    iv.setX(x);
                    iv.setY(y);
                }
                if (x>f.getWidth()) {
                    x = x - 10;
                    iv.setX(x);
                    iv.setY(y);
                }
                else {
                    iv.setX(x);
                    iv.setY(y);
                }
                // Write your code to perform an action on contineus touch move
                break;
            case MotionEvent.ACTION_UP:
                // Write your code to perform an action on touch up
                break;
        }
            // TODO Auto-generated method stub
            return true;
        }

My goal is, if the use drags the box outside of the view on the left give the thumb a x+10 to keep with in view and if the user drags to the right outside the view give the thumb a x-10 to keep within view. But the thumb just disappears if I drag left and right outside of the FrameLayout.

Here is my XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="20dp"
    android:id="@+id/ll"
    android:background="#000000" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/palette2"
        android:id="@+id/fl" >

        <ImageView
            android:id="@+id/iv"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:src="@drawable/esquare" />

    </FrameLayout>
</LinearLayout>

How can I modify the code so I can achieve the result ?

Melbamelborn

Answer 1

Have you tried the code from https://mcmap.net/q/1808450/-how-to-keep-an-image-inside-the-screen-limits-while-using-pinch-zoom-and-drag-gestures?

You're letting the image go out of the boundary and then trying to correct for that. Simply don't let it go outside the boundary in the first place. Check the coordinates are valid before processing the event, otherwise just break.

f = (FrameLayout) findViewById(R.id.fl);
f.setOnTouchListener(flt);

f.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
width = f.getMeasuredWidth();
height = f.getMeasuredHeight();

@Override
public boolean onTouch(View v, MotionEvent event) {

    float x = event.getX();
    float y = event.getY();

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // Write your code to perform an action on down
            break;
        case MotionEvent.ACTION_MOVE:
            if ( (x <= 0 || x >= width) || (y <= 0 || y >= height) )
                break;
            iv.setX(x);
            iv.setY(y);
            break;
        case MotionEvent.ACTION_UP:
            // Write your code to perform an action on touch up
            break;
    }
    // TODO Auto-generated method stub
    return true;
}

Disarrange

I haven't incorporated your code into mine but How would you recommend the modification? Thanks – Melbamelborn

@SiKni8 Updated my answer with an example, haven't tested it so let me know if it helps – Disarrange

I will update my code to match yours and see what happens. I was wondering since the square itself needs to be seen, if the user drags outside the layout, I should make it for X, iv.setX(x-image-width) which will keep the image within view and for Y, iv.setY(y-image-height). Please let me know your thoughts on that. Thanks – Melbamelborn