How to add a drag/pan gesture to a RelativeLayout?

Question

Coming from an iOS background, I'm trying to understand how to add a pan gesture to a RelativeLayout in my app.

I first came up with this:

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnTouchListener {

    RelativeLayout draggableLayout = null;
    private int _xDelta;
    private int _yDelta;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        draggableLayout = findViewById(R.id.draggable_layout);
        draggableLayout.setOnTouchListener(this);
    }

    public boolean onTouch(View view, MotionEvent event) {
        final int X = (int) event.getRawX();
        final int Y = (int) event.getRawY();
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) view.getLayoutParams();
                _xDelta = X - lParams.leftMargin;
                _yDelta = Y - lParams.topMargin;
                break;
            case MotionEvent.ACTION_UP:
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                break;
            case MotionEvent.ACTION_POINTER_UP:
                break;
            case MotionEvent.ACTION_MOVE:
                RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) view
                        .getLayoutParams();
                layoutParams.leftMargin = X - _xDelta;
                layoutParams.topMargin = Y - _yDelta;
                layoutParams.rightMargin = -250;
                layoutParams.bottomMargin = -250;
                view.setLayoutParams(layoutParams);
                break;
        }
        draggableLayout.invalidate();
        return true;
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

</android.support.design.widget.CoordinatorLayout>

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main"
    android:background="@android:color/holo_blue_dark">

    <RelativeLayout
        android:id="@+id/draggable_layout"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="100dp"
        android:layout_marginStart="24dp"
        android:background="@android:color/white" />

</RelativeLayout>

This works fine, but now I want to put this relative layout at the bottom of the view and horizontally centered, so I replaced :

android:layout_marginTop="100dp"
android:layout_marginStart="24dp"

By :

android:layout_alignParentBottom="true"
android:layout_marginBottom="32dp"
android:layout_centerHorizontal="true"

With this rule the layout is first well-located on the screen, but now I can't drag my layout anymore. So I tried to remove the rule programmatically when moving it:

// Added under case MotionEvent.ACTION_MOVE:
layoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, 0);
layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL, 0);

Although dragging the view works again, removing the rules resets the layout on the top-left corner of the view on first drag.

I have no idea of what to do then.

Niza Siwale · Answer 1 · 2017-12-31T18:00:29.250

To Drag and Drop

Dragging and dropping on android is a simple task. All you need to have is a drag-item(the view which will be dragged) and a drop-target (the view which will receive the drag-item when dropped) For example

drop_target.setOnDragListener(new View.OnDragListener() {
            @Override
            public boolean onDrag(View view, DragEvent dragEvent) {
                int action = dragEvent.getAction();
                View viewdrag = (View) dragEvent.getLocalState();
                return true;
            }
        });

                    ClipData mClipdata = ClipData.newPlainText("","");
                    drag_item.DragShadowBuilder shadowBuilder = new 
                    View.DragShadowBuilder(drag_item);
                   drag_item.startDrag(mClipdata,shadowBuilder,drag_item,0);

drag_item is the view which will be dragged into the drop_target view

To pinch and zoom You need to implement the ScaleGestureDetector

private ScaleGestureDetector mScaleDetector;
mScaleDetector = new ScaleGestureDetector(context, new OnScaleGestureListener() {
    @Override
    public void onScaleEnd(ScaleGestureDetector detector) {
    }
    @Override
    public boolean onScaleBegin(ScaleGestureDetector detector) {
        return true;
    }
    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        Log.d(LOG_KEY, "zoom ongoing, scale: " + detector.getScaleFactor());
        return false;
    }
});

On your on touch listener

public boolean onTouchEvent(MotionEvent event) {
    mScaleDetector.onTouchEvent(event);
    return true;
}

Your content_main should be like this

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main"
    android:background="@android:color/holo_blue_dark">

    <RelativeLayout
        android:id="@+id/draggable_layout"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@android:color/white"
        android:layout_gravity="bottom|center" />

</FrameLayout>

You do not need the outer RelativeLayout

What's your issue?Do you want to pinch and zoom or drag and drop? — Niza Siwale, Dec 31 '17 at 17:49
I've updated my answer. PS you do not need to add those relativeLayout rules — Niza Siwale, Dec 31 '17 at 18:01

How to add a drag/pan gesture to a RelativeLayout?

1 Answers1