Android - Zoom In/Out Relativelayout with Spread/Pinch

Android - zoom in/out RelativeLayout with spread/pinch

So I created a subclass of RelativeLayout as described in the above mentioned topics. It looks like this:

public class ZoomableRelativeLayout extends RelativeLayout {
float mScaleFactor = 1;
float mPivotX;
float mPivotY;

public ZoomableRelativeLayout(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
}

public ZoomableRelativeLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
    // TODO Auto-generated constructor stub
}

public ZoomableRelativeLayout(Context context, AttributeSet attrs,
        int defStyle) {
    super(context, attrs, defStyle);
    // TODO Auto-generated constructor stub
}

protected void dispatchDraw(Canvas canvas) {
    canvas.save(Canvas.MATRIX_SAVE_FLAG);
    canvas.scale(mScaleFactor, mScaleFactor, mPivotX, mPivotY);
    super.dispatchDraw(canvas);
    canvas.restore();
}

public void scale(float scaleFactor, float pivotX, float pivotY) {
    mScaleFactor = scaleFactor;
    mPivotX = pivotX;
    mPivotY = pivotY;
    this.invalidate();
}

public void restore() {
    mScaleFactor = 1;
    this.invalidate();
}

}

My implementation of the SimpleOnScaleGestureListener looks like this:

private class OnPinchListener extends SimpleOnScaleGestureListener {

    float startingSpan; 
    float endSpan;
    float startFocusX;
    float startFocusY;


    public boolean onScaleBegin(ScaleGestureDetector detector) {
        startingSpan = detector.getCurrentSpan();
        startFocusX = detector.getFocusX();
        startFocusY = detector.getFocusY();
        return true;
    }


    public boolean onScale(ScaleGestureDetector detector) {
        mZoomableRelativeLayout.scale(detector.getCurrentSpan()/startingSpan, startFocusX, startFocusY);
        return true;
    }

    public void onScaleEnd(ScaleGestureDetector detector) {
        mZoomableRelativeLayout.restore();
    }
}

Hope this helps!

Update:

You can integrate OnPinchListener for your ZoomableRelativelayout by using ScaleGestureDetector:

ScaleGestureDetector scaleGestureDetector = new ScaleGestureDetector(this, new OnPinchListener());

And you are required to bind touch listener of Zoomable layout with the touch listener of ScaleGestureDetector:

mZoomableLayout.setOnTouchListener(new OnTouchListener() {

                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    // TODO Auto-generated method stub
                    scaleGestureDetector.onTouchEvent(event);
                    return true;
                }
            });

Zooming a layout (Relative Layout) in android

Since no one came up with solution, I kind of sort it out myself and thought it might be helpful for some one else who is stuck in this problem. The basic guidance came from here, where author implemented the zoom in and out for a single image, we just have to add images and handle other initialization as described in that tutorial.

ImageViewWithZoomClass:

private Drawable imageOne, imageTwo;
imageOne = context.getResources().getDrawable(R.drawable.icon1); 
imageTwo = context.getResources().getDrawable(R.drawable.icon2);
.
.
imageOne.setBounds(0, 0, imageOne.getIntrinsicWidth(), imageOne.getIntrinsicHeight());
imageTwo.setBounds(0, 0, imageTwo.getIntrinsicWidth(), imageTwo.getIntrinsicHeight());
.
.
imageOne.draw(canvas);
imageTwo.draw(canvas);

and since I am using relative layout, I just used onClickListener in my MainActivity like this

relativeLayout.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            setContentView(new ImageViewWithZoom(getApplicationContext()));
        }
    });

and XML for the relative layout looks like this:

<RelativeLayout
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="130dp"
    android:layout_marginRight="130dp"
    android:background="@drawable/abc"
    android:clickable="true"
    android:focusable="true"
    android:focusableInTouchMode="true"
    >

    <ImageView
        android:id="@+id/img_1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/roadandrailways"
        android:visibility="invisible"/>

    <ImageView
        android:id="@+id/img_2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/capital"
        android:visibility="invisible"/>
</RelativeLayout>

You can add multiple images in layout.
Thats it, hope it helps.

Android/Java How to Pinch To Zoom/Scroll an entire activity? (NOT an ImageView)

Solved: @MoQ gave me an easy library solution using GestureFrameLayout from this library!

How to zoom relative layout (contains images) in android?

Well in my openion its not a good practice to zoom the parent layout as it might create complications but you can find the possible solutions zoom in/out RelativeLayout and this Github Gist might help you in this regard.

Othere better solution to your problem can be you can create an ImageView with match_parent attributes and use PhotoView to zoom the images, its amazing library for zooming the images, I am personally using it in my multiple projects.

This is the ImageView with match_parent attributes using PhotoView.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <uk.co.senab.photoview.PhotoView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"/>

</RelativeLayout>

You can find all the information about implementing the library here.

Hope it helps

---

Related Topics