Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create Zoom-In & Zoom-Out function in android

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.42k
    Comment on it

    If you want to create Zoom-In and Zoom-out of an image using Touch events function check my below example. In below example First I have created a main layout named xml.layout then in xml.layout I have added 2 attributes, first is FrameLayout attribute and 2nd is ImageView attribute. In MainActivity I have used TouchListner, MotionEvent, Matrix method.
    See the below example code it will clearly described you how to create Zoom-In & Zoom-Out function.

    Step(1)MainActivity-

    public class MainActivity extends Activity implements View.OnTouchListener {
    
            private static final String TAG = "Touch";
            @SuppressWarnings("unused")
            private static final float MIN_ZOOM = 1f, MAX_ZOOM = 1f;
    
            Matrix matrix = new Matrix();
            Matrix savedMatrix = new Matrix();
    
            // The 3 states (events) which the user is trying to perform
            static final int NONE = 0;
            static final int DRAG = 1;
            static final int ZOOM = 2;
            int mode = NONE;
    
            // these PointF objects are used to record the point(s) the user is touching
            PointF start = new PointF();
            PointF mid = new PointF();
            float oldDist = 1f;
    
            @Override
            protected void onCreate(Bundle savedInstanceState) {
                // TODO Auto-generated method stub
                super.onCreate(savedInstanceState);
                setContentView(R.layout.Train_map);
                ImageView view = (ImageView) findViewById(R.id.imageView1);
                view.setOnTouchListener(this);
            }
    
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                ImageView view = (ImageView) v;
                view.setScaleType(ImageView.ScaleType.MATRIX);
                float scale;
    
                dumpEvent(event);
                // Handle touch events here...
    
                switch (event.getAction() & MotionEvent.ACTION_MASK) {
                    case MotionEvent.ACTION_DOWN: // first finger down only
                        savedMatrix.set(matrix);
                        start.set(event.getX(), event.getY());
                        Log.d(TAG, "mode=DRAG"); // write to LogCat
                        mode = DRAG;
                        break;
    
                    case MotionEvent.ACTION_UP:
                    case MotionEvent.ACTION_POINTER_UP:
    
                        mode = NONE;
                        Log.d(TAG, "mode=NONE");
                        break;
    
                    case MotionEvent.ACTION_POINTER_DOWN:
                        oldDist = spacing(event);
                        Log.d(TAG, "oldDist=" + oldDist);
                        if (oldDist > 5f) {
                            savedMatrix.set(matrix);
                            midPoint(mid, event);
                            mode = ZOOM;
                            Log.d(TAG, "mode=ZOOM");
                        }
                        break;
    
                    case MotionEvent.ACTION_MOVE:
    
                        if (mode == DRAG) {
                            matrix.set(savedMatrix);
                            matrix.postTranslate(event.getX() - start.x, event.getY()
                                    - start.y); /*
                                         * create the transformation in the matrix
                                         * of points
                                         */
                        } else if (mode == ZOOM) {
                            // pinch zooming
                            float newDist = spacing(event);
                            Log.d(TAG, "newDist=" + newDist);
                            if (newDist > 5f) {
                                matrix.set(savedMatrix);
                                scale = newDist / oldDist;
                        /*
                         * setting the scaling of the matrix...if scale > 1 means
                         * zoom in...if scale < 1 means zoom out
                         */
                                matrix.postScale(scale, scale, mid.x, mid.y);
                            }
                        }
                        break;
                }
    
                view.setImageMatrix(matrix); // display the transformation on screen
    
                return true;
            }
            private float spacing(MotionEvent event) {
                float x = event.getX(0) - event.getX(1);
                float y = event.getY(0) - event.getY(1);
                return FloatMath.sqrt(x * x + y * y);
            }
    
    
            private void midPoint(PointF point, MotionEvent event) {
                float x = event.getX(0) + event.getX(1);
                float y = event.getY(0) + event.getY(1);
                point.set(x / 2, y / 2);
            }
    
            private void dumpEvent(MotionEvent event) {
                String names[] = { "DOWN", "UP", "MOVE", "CANCEL", "OUTSIDE",
                        "POINTER_DOWN", "POINTER_UP", "7?", "8?", "9?" };
                StringBuilder sb = new StringBuilder();
                int action = event.getAction();
                int actionCode = action & MotionEvent.ACTION_MASK;
                sb.append("event ACTION_").append(names[actionCode]);
    
                if (actionCode == MotionEvent.ACTION_POINTER_DOWN
                        || actionCode == MotionEvent.ACTION_POINTER_UP) {
                    sb.append("(pid ").append(
                            action >> MotionEvent.ACTION_POINTER_ID_SHIFT);
                    sb.append(")");
                }
    
                sb.append("[");
                for (int i = 0; i < event.getPointerCount(); i++) {
                    sb.append("#").append(i);
                    sb.append("(pid ").append(event.getPointerId(i));
                    sb.append(")=").append((int) event.getX(i));
                    sb.append(",").append((int) event.getY(i));
                    if (i + 1 < event.getPointerCount())
                        sb.append(";");
                }
    
                sb.append("]");
                Log.d("Touch Event", sb.toString());
            }
        }
    
    
    
    
    Step(2)-main.xml layout-
    
    
       <?xml version="1.0" encoding="utf-8"?>
     <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    
        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/img" />
    
    </FrameLayout>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: