{"id":1416,"date":"2013-04-09T11:16:15","date_gmt":"2013-04-09T05:46:15","guid":{"rendered":"http:\/\/judepereira.com\/blog\/?p=1416"},"modified":"2013-07-30T21:37:29","modified_gmt":"2013-07-30T16:07:29","slug":"multi-touch-in-android-translate-scale-and-rotate","status":"publish","type":"post","link":"https:\/\/judepereira.com\/blog\/multi-touch-in-android-translate-scale-and-rotate\/","title":{"rendered":"Multi Touch in Android – Translate, Scale, and Rotate"},"content":{"rendered":"

Here’s a quick and easy implementation of Android’s multi touch feature – one finger to move, two to zoom, and three to rotate the image.<\/p>\n

Assuming you have a basic understanding of 2D matrix transformations, the Matrix<\/a> class in Android uses a 3×3 matrix to achieve all of the 2D transformations.<\/p>\n

The source code and pre -built APK is available. See the end of this post.<\/p>\n

Main activity – MultiTouch.java
\n[code language=”java”]
\npackage com.multitouch.example;<\/p>\n

import android.app.Activity;
\nimport android.graphics.Matrix;
\nimport android.graphics.PointF;
\nimport android.os.Bundle;
\nimport android.util.FloatMath;
\nimport android.view.MotionEvent;
\nimport android.view.View;
\nimport android.view.View.OnTouchListener;
\nimport android.widget.ImageView;<\/p>\n

public class MultiTouch extends Activity implements OnTouchListener {<\/p>\n

\/\/ these matrices will be used to move and zoom image
\n private Matrix matrix = new Matrix();
\n private Matrix savedMatrix = new Matrix();
\n \/\/ we can be in one of these 3 states
\n private static final int NONE = 0;
\n private static final int DRAG = 1;
\n private static final int ZOOM = 2;
\n private int mode = NONE;
\n \/\/ remember some things for zooming
\n private PointF start = new PointF();
\n private PointF mid = new PointF();
\n private float oldDist = 1f;
\n private float d = 0f;
\n private float newRot = 0f;
\n private float[] lastEvent = null;<\/p>\n

@Override
\n public void onCreate(Bundle savedInstanceState) {
\n super.onCreate(savedInstanceState);
\n setContentView(R.layout.main);
\n ImageView view = (ImageView) findViewById(R.id.imageView);
\n view.setOnTouchListener(this);
\n }<\/p>\n

public boolean onTouch(View v, MotionEvent event) {
\n \/\/ handle touch events here
\n ImageView view = (ImageView) v;
\n switch (event.getAction() & MotionEvent.ACTION_MASK) {
\n case MotionEvent.ACTION_DOWN:
\n savedMatrix.set(matrix);
\n start.set(event.getX(), event.getY());
\n mode = DRAG;
\n lastEvent = null;
\n break;
\n case MotionEvent.ACTION_POINTER_DOWN:
\n oldDist = spacing(event);
\n if (oldDist > 10f) {
\n savedMatrix.set(matrix);
\n midPoint(mid, event);
\n mode = ZOOM;
\n }
\n lastEvent = new float[4];
\n lastEvent[0] = event.getX(0);
\n lastEvent[1] = event.getX(1);
\n lastEvent[2] = event.getY(0);
\n lastEvent[3] = event.getY(1);
\n d = rotation(event);
\n break;
\n case MotionEvent.ACTION_UP:
\n case MotionEvent.ACTION_POINTER_UP:
\n mode = NONE;
\n lastEvent = null;
\n break;
\n case MotionEvent.ACTION_MOVE:
\n if (mode == DRAG) {
\n matrix.set(savedMatrix);
\n float dx = event.getX() – start.x;
\n float dy = event.getY() – start.y;
\n matrix.postTranslate(dx, dy);
\n } else if (mode == ZOOM) {
\n float newDist = spacing(event);
\n if (newDist > 10f) {
\n matrix.set(savedMatrix);
\n float scale = (newDist \/ oldDist);
\n matrix.postScale(scale, scale, mid.x, mid.y);
\n }
\n if (lastEvent != null && event.getPointerCount() == 3) {
\n newRot = rotation(event);
\n float r = newRot – d;
\n float[] values = new float[9];
\n matrix.getValues(values);
\n float tx = values[2];
\n float ty = values[5];
\n float sx = values[0];
\n float xc = (view.getWidth() \/ 2) * sx;
\n float yc = (view.getHeight() \/ 2) * sx;
\n matrix.postRotate(r, tx + xc, ty + yc);
\n }
\n }
\n break;
\n }<\/p>\n

view.setImageMatrix(matrix);
\n return true;
\n }<\/p>\n

\/**
\n * Determine the space between the first two fingers
\n *\/
\n private float spacing(MotionEvent event) {
\n float x = event.getX(0) – event.getX(1);
\n float y = event.getY(0) – event.getY(1);
\n return FloatMath.sqrt(x * x + y * y);
\n }<\/p>\n

\/**
\n * Calculate the mid point of the first two fingers
\n *\/
\n private void midPoint(PointF point, MotionEvent event) {
\n float x = event.getX(0) + event.getX(1);
\n float y = event.getY(0) + event.getY(1);
\n point.set(x \/ 2, y \/ 2);
\n }<\/p>\n

\/**
\n * Calculate the degree to be rotated by.
\n *
\n * @param event
\n * @return Degrees
\n *\/
\n private float rotation(MotionEvent event) {
\n double delta_x = (event.getX(0) – event.getX(1));
\n double delta_y = (event.getY(0) – event.getY(1));
\n double radians = Math.atan2(delta_y, delta_x);
\n return (float) Math.toDegrees(radians);
\n }
\n}
\n[\/code]
\nAn important function that is always used is postXx(). This function concats a new matrix of the type Xx to the existing matrix object. Using setXx() will reset the matrix’s Xx property.
\nMain layout – main.xml
\n[code language=”xml”]
\n<\/p>\n

<\/p>\n

<\/p>\n

<\/FrameLayout>
\n[\/code]<\/p>\n

Browse and download the source code on GitHub.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Here’s a quick and easy implementation of Android’s multi touch feature – one finger to move, two to zoom, and three to rotate the image. Assuming you have a basic understanding of 2D matrix transformations, the Matrix class in Android uses a 3×3 matrix to achieve all of the 2D transformations. The source code and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[401],"tags":[446,556,445,447,75,442,443,444,435,437,440,438,436,439,441],"class_list":["post-1416","post","type-post","status-publish","format-standard","hentry","category-android","tag-2d-transformation","tag-android","tag-biitmap","tag-example","tag-image","tag-image-view","tag-imageview","tag-matrix","tag-multi","tag-multi-touch","tag-rotate","tag-scale","tag-touch","tag-translate","tag-view"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pqtyx-mQ","jetpack-related-posts":[{"id":1713,"url":"https:\/\/judepereira.com\/blog\/a-letter-to-tim-cook-regarding-ios-10-with-love-for-apple\/","url_meta":{"origin":1416,"position":0},"title":"A letter to Tim Cook regarding iOS 10, with love for Apple","author":"Jude Pereira","date":"June 17, 2016","format":false,"excerpt":"Tim, iOS has always been known for it's user interface, until recently. Your new take on notifications have not only made them very loud, and unsettling, but do not flow with the entire look and feel of Apple: No Mr. Tim, no. My notifications aren't waiting for me. They're crying\u2026","rel":"","context":"In "life!"","block_context":{"text":"life!","link":"https:\/\/judepereira.com\/blog\/category\/living-a-wonder\/"},"img":{"alt_text":"No Mr. Tim, no. My notifications will not be waiting for me. They're crying out for my attention.","src":"https:\/\/i0.wp.com\/judepereira.com\/blog\/wp-content\/uploads\/Screen-Shot-2016-06-17-at-08.49.59-614x1024.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/judepereira.com\/blog\/wp-content\/uploads\/Screen-Shot-2016-06-17-at-08.49.59-614x1024.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/judepereira.com\/blog\/wp-content\/uploads\/Screen-Shot-2016-06-17-at-08.49.59-614x1024.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":1778,"url":"https:\/\/judepereira.com\/blog\/letstuneup-a-music-chart-with-arjit-singh-in-the-lead\/","url_meta":{"origin":1416,"position":1},"title":"LetsTuneup: A music chart with Arjit Singh in the lead","author":"Jude Pereira","date":"April 28, 2017","format":false,"excerpt":"LetsTuneup has grown tremendously, and with it, we've introduced new features too. We identified that a few of our users couldn't use the app to it's full extent because they didn't have music on their devices. We've solved that. Users can now pick their favourite artists, powered by a location\u2026","rel":"","context":"In "android"","block_context":{"text":"android","link":"https:\/\/judepereira.com\/blog\/category\/code\/android\/"},"img":{"alt_text":"Arjit Singh in the lead, with Eminem, Linking Park, Coldplay and Pink Floyd following close","src":"https:\/\/i0.wp.com\/judepereira.com\/blog\/wp-content\/uploads\/artists.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1734,"url":"https:\/\/judepereira.com\/blog\/why-matchbox-and-how-it-connects-people-through-music\/","url_meta":{"origin":1416,"position":2},"title":"Why Matchbox, and how it connects people through music","author":"Jude Pereira","date":"January 21, 2017","format":false,"excerpt":"There's no doubt that music defines us. It influences our moods, for example, making us happy by releasing a chemical named dopamine. It can affect what we wear, what we eat, and perhaps even who we enjoy being together with. It affects\u00a0our thought process too (it's well known that ambient\u2026","rel":"","context":"In "android"","block_context":{"text":"android","link":"https:\/\/judepereira.com\/blog\/category\/code\/android\/"},"img":{"alt_text":"Matchbox showing the top 10 artists","src":"https:\/\/i0.wp.com\/judepereira.com\/blog\/wp-content\/uploads\/IMG_7195-300x210.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":893,"url":"https:\/\/judepereira.com\/blog\/coloured-varlogmessages-at-tty12\/","url_meta":{"origin":1416,"position":3},"title":"Coloured \/var\/log\/messages at tty12","author":"Jude Pereira","date":"April 26, 2011","format":false,"excerpt":"Reading logs could never become any more easier, at just a keystroke, you have your logs displayed where you want, in some fancy colour. They look great too. TTY's can be accessed by pressing Alt + Ctrl + F[1 - 12] simultaneously. In the following, you'll get a decent, colourized\u2026","rel":"","context":"In "another snippet | code"","block_context":{"text":"another snippet | code","link":"https:\/\/judepereira.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/posts\/1416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/comments?post=1416"}],"version-history":[{"count":9,"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/posts\/1416\/revisions"}],"predecessor-version":[{"id":1505,"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/posts\/1416\/revisions\/1505"}],"wp:attachment":[{"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/media?parent=1416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/categories?post=1416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/tags?post=1416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}