Pinch Zoom and Pan

Question

I have an activity with LinearLayout as its main Layout. In that layout, there is a button that adds a View (R.layout.motor_block) to the main layout (R.id.layout):

    LayoutInflater inflater =
    (LayoutInflater)this.getSystemService( Context.LAYOUT_INFLATER_SERVICE );
    View iv = inflater.inflate( R.layout.motor_block, null );
    RelativeLayout rl = (RelativeLayout) findViewById(R.id.layout);
    rl.addView(iv);

This works fine, but when I add more Views, the screen gets filled up with them so I need a way to "extend" the size by adding pan so I can go through all the views. I also want to add zoom.

I tried to use a WebView:

       RelativeLayout rl = (RelativeLayout) findViewById(R.id.layout);
   WebView wv = (WebView) findViewById(R.id.webView1);
   wv.getSettings().setSupportZoom(true);  
   wv.getSettings().setBuiltInZoomControls(true);
   wv.getSettings().setUseWideViewPort(true);
   wv.getSettings().setLoadWithOverviewMode(true);
   wv.getSettings().setDisplayZoomControls(false);
   wv.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
   wv.addView(iv);

The Views get added to it, and pan works. The problem is that when I zoom, the webView zooms the background, and the Views don't change size.

I also tried some custom views but they didn't support views with child views.

What is the best way to accomplish this?

Answer 1

Just an example. Use setTranslationX/Y and setScaleX/Y on the main container view. Its children will scale and translate with it.

public class MainActivity extends Activity {

    private RelativeLayout mainLayout;
    private ScaleGestureDetector scaleGestureDetector;
    private float scale = 1;
    private PointF touchPoint;
    private PointF pan;

    private boolean isScaling;
    private boolean endScalingNextUp;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mainLayout = (RelativeLayout) findViewById(id.main_layout);
        scaleGestureDetector = new ScaleGestureDetector(this, new ExampleScaleGestureListener());
        Button b = ((Button) findViewById(id.btn_reset));
        b.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                reset();
            }
        });
        reset();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        scaleGestureDetector.onTouchEvent(event);

        if (scale != 1 && !isScaling) {
            float x = event.getRawX();
            float y = event.getRawY();
            if (event.getAction() == MotionEvent.ACTION_DOWN) {
                touchPoint = new PointF(x, y);
            } else if (event.getAction() == MotionEvent.ACTION_MOVE && touchPoint != null) {
                pan.x = x - touchPoint.x;
                pan.y = y - touchPoint.y;
                panView();
            }
        }
        if (isScaling && endScalingNextUp) {
            if (event.getAction() == MotionEvent.ACTION_POINTER_UP) {
                endScalingNextUp = false;
                isScaling = false;
            }
        }

        return true;
    }

    private void setPivot(float focusX, float focusY) {
        mainLayout.setPivotX(focusX);
        mainLayout.setPivotY(focusY);
    }

    private void scaleView() {
        mainLayout.setScaleX(scale);
        mainLayout.setScaleY(scale);
    }

    private void panView() {
        mainLayout.setTranslationX(pan.x);
        mainLayout.setTranslationY(pan.y);
    }

    private void reset() {
        setPivot(0, 0);
        scale = 1;
        scaleView();
        pan = new PointF(0, 0);
        panView();
        isScaling = false;
    }

    private class ExampleScaleGestureListener implements OnScaleGestureListener {

        private static final float SCALE_SPEED = .02f;

        @Override
        public void onScaleEnd(ScaleGestureDetector detector) {
            endScalingNextUp = true;
        }

        @Override
        public boolean onScaleBegin(ScaleGestureDetector detector) {
            float focusX = detector.getFocusX();
            float focusY = detector.getFocusY();
            setPivot(focusX, focusY);
            isScaling = true;
            endScalingNextUp = false;
            return true;
        }

        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            isScaling = true;
            endScalingNextUp = false;
            if (detector.getScaleFactor() < 1) {
                scale -= SCALE_SPEED;
            } else if (detector.getScaleFactor() > 1) {
                scale += SCALE_SPEED;
            }
            scaleView();
            return true;
        }
    }
}


    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:id="@+id/main_layout"
        tools:context=".MainActivity" >

        <TextView
            android:id="@+id/tv"
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world" />

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/tv"
            android:layout_marginBottom="69dp"
            android:layout_marginRight="29dp"
            android:layout_toLeftOf="@+id/tv"
            android:src="@drawable/ic_launcher" />

        <Button
            android:id="@+id/btn_reset"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="22dp"
            android:text="Reset" />

    </RelativeLayout>

Answer 2

The most easy way is to add all these views in a ScrollView. You can then add the ScrollView into a HorizontalScrollView to have scroll in both direction. Have a Gesture for pinch and zoom gestures and call listeners for them. For zoom you can increase the size of each view via running a loop or probably use ScaleGestureDetector.
This method is a little choppy, but works. Check the following answer for more info - Implementing Pan and Zoom

Update:-

Here're some more SO answers -
How to implement zoom effect for image view in android?
android pinch zoom