Android: Inflate a Movable button at center of a RelativeLayout

Question

I would like to inflate a moveable button in the center of a relativelayout (Container), such that when touching it, it can be moved within Container, i.e. the screen.

Code is as follows:

public void inflate_floating_btn(int k)
    {
        floatButton = new Button(this);
        floatButton.setId(k);
        floatButton.setTag(k);
        final int id_ = floatButton.getId();
        floatButton.setEnabled(true);
        floatButton.setText("hello");   
        floatButton.setTextColor(Color.BLACK);
        floatButton.setBackgroundResource(R.drawable.transparent_btn);

        RelativeLayout.LayoutParams testLP = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        testLP.addRule(RelativeLayout.CENTER_IN_PARENT);
        floatButton.setLayoutParams(testLP);

        Container.addView(floatButton);

        floatButton.setOnTouchListener(new View.OnTouchListener()
        {
          public boolean onTouch(View v, MotionEvent e)
          {
            final int X = (int) e.getRawX();
            final int Y = (int) e.getRawY();
              switch(e.getAction() & MotionEvent.ACTION_MASK)
              {
                    case MotionEvent.ACTION_DOWN:
                        RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) v.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) v.getLayoutParams();
                        layoutParams.leftMargin = Math.max((X - _xDelta), 0);
                        layoutParams.topMargin = Math.max((Y - _yDelta),0);
                        layoutParams.rightMargin = 0;
                        layoutParams.bottomMargin = 0;
                        v.setLayoutParams(layoutParams);
                        break;
              }

              Container.invalidate();
              return false;
          }
        });
    }

The button can be inflated at the center of the screen. But it cannot be moved when being touched.

If replacing

    RelativeLayout.LayoutParams testLP = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    testLP.addRule(RelativeLayout.CENTER_IN_PARENT);
    floatButton.setLayoutParams(testLP);

by

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.setMargins(1, 1, 1, 1);

the button now can be moved on touch but was inflated at left top corner of the relativelayout.

Question:

How could the code be improved such that the moving button can be inflated at center of screen and movable when being touched?

Thanks!

Answer 1

Instead of changing the view margins on move, just set the absolute coordinates of the view.

drag_button_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

DragButtonFragment.java

public class DragButtonFragment extends Fragment {

    View root;
    float lastX, lastY;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        root = inflater.inflate(R.layout.drag_button_fragment, container, false);
        return root;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        addDragButton();
    }

    private void addDragButton() {
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(
                RelativeLayout.LayoutParams.WRAP_CONTENT,
                RelativeLayout.LayoutParams.WRAP_CONTENT);
        layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
        Button dragButton = new Button(getActivity());
        dragButton.setLayoutParams(layoutParams);
        dragButton.setText("Drag Me!");
        dragButton.setOnTouchListener(new View.OnTouchListener() {
            public boolean onTouch(View v, MotionEvent ev) {
                final int action = MotionEventCompat.getActionMasked(ev);
                if (action == MotionEvent.ACTION_DOWN) {
                    lastX = ev.getRawX();
                    lastY = ev.getRawY();
                } else if (action == MotionEvent.ACTION_MOVE) {
                    float thisX = ev.getRawX();
                    float thisY = ev.getRawY();
                    v.setX(v.getX() + (thisX - lastX));
                    v.setY(v.getY() + (thisY - lastY));
                    v.invalidate();
                    lastX = thisX;
                    lastY = thisY;
                }
                return false;
            }
        });

        ((ViewGroup) root).addView(dragButton);
    }
}

The only missing part from what you are looking for is keeping the dragged view within the screen, which should just be some simple math using getX(), getWidth(), getY() and getHeight() of root and v.