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

Question

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;
    }

Robust · Accepted Answer · 2015-04-12T16:03:41.833

11

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;
     }
 });

edited Apr 12 '15 at 16:03

answered Apr 11 '15 at 08:25

Robust

2,415
2
22
37

Thank you! Let me have a try! :) – Alex Apr 11 '15 at 08:37
Hi, @vandaics i have implemented pxFromDp into my code, and sub in my calculated width into the method and setLayoutParams, but it is still not working. I guess the problem is the way i respond to user touch event, i have added log into the code when user touches the left edge but the log doesn't show up as i touches the left edge. I want to resize the width as user touches and drags the left edge. – Alex Apr 12 '15 at 09:42
Thank you, but it's still not working. When i pressed on the edges, the log is also not showed. What is your idea using x-width<=20 as condition? – Alex Apr 14 '15 at 07:18
Hi, it's hard for user to touch on the edge of your view. So, I expand the range to 40px for easier touch. – Robust Apr 14 '15 at 07:23
Oh bro thanks man! It worked!!:D Cause i also implement drag action, din handle the condition well so it din work out at 1st. Thanks man!! Totally appreciate ur help! Thanks! @vandaics – Alex Apr 16 '15 at 04:23
Btw, may I know why width is equal to x and height is equal to y? What is the logic behind? @vandaics – Alex Apr 16 '15 at 12:49
sorry, I don't remember exactly. What I can explain is: "I get touch even on edittext view, so MotionEvent event has (0,0) value at top-left of this view is and bottom-right is (widh,height). – Robust Apr 16 '15 at 13:06
Ohh i see! So if I wana implement for the left edge then the condition will be x<=20? As the top left point is (0,0)? @vandaics – Alex Apr 16 '15 at 14:09
yes, but if your view does not set at left edge of screen, you can set below condition -20 < x for user to easier touch. – Robust Apr 16 '15 at 14:56
Alright thx! Does the above approach work on image view too? I tried to apply it on image view but the view doesn't resize @vandaics – Alex Apr 17 '15 at 11:18
I don't know, I don't do it ever – Robust Apr 17 '15 at 12:54
Is it possible to add border 4 dot edges to the view? @Robust – Shivam Apr 11 '19 at 09:29

score 0 · Answer 2 · edited Apr 11 '15 at 08:36

0

((EditText)getActivity().findViewById(R.id.EditText1)).getLayoutParams().height = y;
((EditText)getActivity().findViewById(R.id.EditText1)).getLayoutParams().width = x;

This should do it if you have not used parameters WRAP_CONTENT, FILL_PARENT and MATCH_PARENT.

edited Apr 11 '15 at 08:36

CAS

535
1
8
15

answered Apr 11 '15 at 07:56

djanoti

303
2
8

Thank you! Which part do you mean to add in the code? I added log on ACTION_DOWN event, but when i clicked on the left edge, the log doesn't show up, which means my program is not even reacting to the touch event on the edge? So i guess the prob is not how i get the params yet – Alex Apr 11 '15 at 08:43

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

2 Answers2

Linked