#ontouch

Adding Text and Stickers

A custom CanvasLayout subclassing FrameLayout was the main drawing board. I added buttons in activity layout with click with the CanvasLayout through CanvasLayout.changeBackgroundTapped(), CanvasLayout.stickerTapped() or CanvasLayout.addTextTapped(). When the user taps the add-text button, CanvasLayout dynamically adds a TextView to the layout.

public void addTextItem() { TextView textView = new TextView(); textView.color = ...; textView.properties = ...; textView.setFocusable(true); }

And similar for stickers, except adding ImageViews with selected drawables to the CanvasLayout view.

Dealing with Touches

Unfortunately, there's no simple way to scale or rotate views on Android. I created a custom AFTextView subclassing TextView and a custom AFStickerView subclassing ImageView. These views intercept touch events and figure out what the user is trying to do. A simple overview of what the logic in onTouch() looked like:

@Override public onTouch(MotionEvent ev) { if (ev == TOUCH_DOWN) { // save the x & y position of the user's touch down! } elseif (ev == TOUCH_UP) { // reset the variables, the user just lifted their finger and doesn't want to do anything } elseif (ev == TOUCH_MOVE) { // we're either dragging, scaling or rotating, figure out which one! } } (For information on each event type, refer to MotionEvent reference docs)

As you can probably tell, the most difficult part is figuring out what to do on ACTION_MOVE. I started off with scaling and dragging. The biggest difference between the two is: you need two fingers for scaling, you need one finger for dragging. So let's keep track of each finger with an ID, mPointer1, mPointer2 and initialize them to -1. Then I checked whether we have one or two fingers down when I received a ACTION_MOVE event. Our onTouch() logic now is as follows:

@Override public onTouch(MotionEvent ev) { if (ev == ACTION_DOWN) { mPointer1 = ev.getPointerId(); // ... save the x & y position of first finger's touch down point } else if (ev == ACTION_UP) { // reset the variables, the user just lifted their finger and doesn't want to do anything mPointer1 = -1; mPointer2 = -1; } else if (ev == ACTION_MOVE) { if (mPointer2 == -1) { // only one finger down, we are dragging } else { // we're either scaling or rotating! } } else if (ev == ACTION_POINTER_DOWN) { mPointer2 = ev.getPointerId(); // ... save x & y of second finger's touch down point } }

We have a new event we are intercepting, ACTION_POINTER_DOWN. This event occurs when a second finger touches down on the view. We now know whether we are dragging or doing something else.

Unfortunately, there is another problem. I want to be able to scale in the X direction (horizontally) and the Y direction (vertically) without caring about the aspect ratio.

It becomes impossible to figure out what the user is trying to do now. I decided the to intercept the touch events on the main CanvasLayout. On the CanvasLayout, if a rotation action is detected, a rotation is applied to the selected view. This brought us to the final onTouch() logic on the AFTextView and CanvasLayout:

AFTextView.java

@Override public onTouch(MotionEvent ev) { if (ev == ACTION_DOWN) { mPointer1 = ev.getPointerId(); ... } else if (ev == ACTION_UP) { mPointer1 = -1; mPointer2 = -1; ... } else if (ev == ACTION_MOVE) { if (mPointer2 == -1) { // only one finger down, we are dragging! } else { // two fingers down, we're scaling! } } else if (ev == ACTION_POINTER_DOWN) { mPointer2 = ev.getPointerId(); ... } }

CanvasLayout.java

@Override public onTouch(MotionEvent ev) { if (ev == ACTION_DOWN) { mPointer1 = ev.getPointerId(); ... } else if (ev == ACTION_POINTER_DOWN) { mPointer2 = ev.getPointerId(); ... } else if (ev == ACTION_MOVE) { // user is moving their first finger in the rotation gesture! // calculate the angle between the second finger and this finger before & after this move } else if (ev == ACTION_UP) { // rotation is finished } return true; }

Great, now we have all the logic in place to know when we need to scale, drag, and rotate our views. The details of how to manipulate the view accordingly warrants another post all together. Rotation in particular had me brushing up on my linear algebra to calculate the angle of change using 4 coordinates (2 coordinates for the position of the fingers before the rotation, 2 coordinates for the position of the fingers after rotation):

Another interesting (read: annoying) thing to deal with was the fact that what would be considered rotating +X degrees in the regular cartesian plane (counter-clockwise) is considered rotating -X degrees in Android views rotation. Sigh...

Anyway, after ironing out some bugs and use some touchSlops to make touches more realistic, the interaction with elements was looking great.

At the end of April Fools day, there had been tens of thousands of campaign posters created on Mobile. I think it's safe to say users had a good time adding, dragging, scaling and rotating views for their favorite lizards.