Search code examples
androidviewresizelayoutparamsontouch

Allow user to control height and width of a view by onTouch


I am trying to implement a user resizable edittext view. It can be resized when user drags the edges of the view.

Here is my onTouchListener for edittext. I have only implemented resizing for left edge. My idea is as the user's touch event x equals the left margin of the view(which means user is touching the left edge), the width and left margin of the view will be varied.

  protected View.OnTouchListener etTouchListener=new View.OnTouchListener() {
           @Override
           public boolean onTouch(View view, MotionEvent event) {
               float x=event.getX();
               float y=event.getY();
               ViewGroup.MarginLayoutParams params=(ViewGroup.MarginLayoutParams)view.getLayoutParams();
               int top=params.topMargin;
               int bottom=params.bottomMargin;
               int left=params.leftMargin;
               int right=params.rightMargin;
               if(x==left){
                   switch (event.getAction()){
                       case MotionEvent.ACTION_DOWN:
                           resize_start(x,y);
                           Log.e("left edge","clicked");
                           break;
                       case MotionEvent.ACTION_MOVE:
                           resize_move(x,y);
                           params.leftMargin=(int)nX;
                           params.width=(int)(editNoteViewParent.getWidth()-nX-params.rightMargin);
                           view.setLayoutParams(params);
                           Log.e("left edge","dragged");
                           break;
                       case MotionEvent.ACTION_UP:
                           break;
                   }
               }  

Here is my resizeStart():

private void resize_start(float x,float y){
        nX = x;
        nY = y;
    }

And my resizeMove():(when user drags the edge)

private void resize_move(float x, float y){
        float dx = Math.abs(x - nX);
        float dy = Math.abs(y - nY);
        if(dx >=TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE){
          nX = x;
          nY = y;
        }
    }

Please help me! Suggestion of relevant tutorials on resizing layoutparams on user touch is super welcomed to! Thank you so much!!

EDIT: My edit text view is created programmatically.

  private void addEditText(float x,float y){
        RelativeLayout.LayoutParams editTextParams= new RelativeLayout.LayoutParams(200, 200);
        editTextParams.leftMargin=(int)x-(editTextParams.width/2);
        editTextParams.topMargin=(int)y-(editTextParams.height/2);

        mEditText=new EditText(this);
        mEditText.setHint("Enter note");
        mEditText.setBackgroundResource(R.drawable.edittext_shape);
        editNoteViewParent.addView(mEditText, editTextParams);
        mEditText.setOnTouchListener(etTouchListener);
        editNoteViewParent.setOnDragListener(etDragListener);
        editTextCreated=true;
    }

Solution

  • UPDATE:

    Ok, I forgot to see your handle. It's too hard for user to touch on the edge of your view. Let try it:

    layout:

    <EditText
            android:id="@+id/ed_myEdittext"
            android:layout_width="150dp"
            android:layout_height="50dp" />
    

    and code:

    EditText ed_myEdittext = (EditText) findViewById(R.id.ed_myEdittext);
    ed_myEdittext.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            int x=(int)event.getX();
            int y=(int)event.getY();
            int width= v.getLayoutParams().width;
            int height = v.getLayoutParams().height;
    
    
            if((x - width <= 20 && x - width > 0) ||(width - x <= 20 && width - x > 0)){
                switch (event.getAction()){
                    case MotionEvent.ACTION_DOWN:
                        break;
                    case MotionEvent.ACTION_MOVE:
                        Log.e(">>","width:"+width+" height:"+height+" x:"+x+" y:"+y);
                        v.getLayoutParams().width = x;
                        v.getLayoutParams().height = y;
                        v.requestLayout();
                        break;
                    case MotionEvent.ACTION_UP:
                        break;
                }
            }
            return false;
         }
     });