Skip to content

Instantly share code, notes, and snippets.

@anorth

anorth/ZoomLayout.java

Created March 29, 2014 00:06
Show Gist options
  • Save anorth/9845602 to your computer and use it in GitHub Desktop.
Save anorth/9845602 to your computer and use it in GitHub Desktop.
Download ZIP
Pinch-zoomable Android frame layout
Raw
ZoomLayout.java
package au.id.alexn;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.View;
import android.widget.FrameLayout;
/**
* Layout that provides pinch-zooming of content. This view should have exactly one child
* view containing the content.
*/
public class ZoomLayout extends FrameLayout implements ScaleGestureDetector.OnScaleGestureListener {
private enum Mode {
NONE,
DRAG,
ZOOM
}
private static final String TAG = "ZoomLayout";
private static final float MIN_ZOOM = 1.0f;
private static final float MAX_ZOOM = 4.0f;
private Mode mode = Mode.NONE;
private float scale = 1.0f;
private float lastScaleFactor = 0f;
// Where the finger first touches the screen
private float startX = 0f;
private float startY = 0f;
// How much to translate the canvas
private float dx = 0f;
private float dy = 0f;
private float prevDx = 0f;
private float prevDy = 0f;
public ZoomLayout(Context context) {
super(context);
init(context);
}
public ZoomLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public ZoomLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
private void init(Context context) {
final ScaleGestureDetector scaleDetector = new ScaleGestureDetector(context, this);
this.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
switch (motionEvent.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
Log.i(TAG, "DOWN");
if (scale > MIN_ZOOM) {
mode = Mode.DRAG;
startX = motionEvent.getX() - prevDx;
startY = motionEvent.getY() - prevDy;
}
break;
case MotionEvent.ACTION_MOVE:
if (mode == Mode.DRAG) {
dx = motionEvent.getX() - startX;
dy = motionEvent.getY() - startY;
}
break;
case MotionEvent.ACTION_POINTER_DOWN:
mode = Mode.ZOOM;
break;
case MotionEvent.ACTION_POINTER_UP:
mode = Mode.DRAG;
break;
case MotionEvent.ACTION_UP:
Log.i(TAG, "UP");
mode = Mode.NONE;
prevDx = dx;
prevDy = dy;
break;
}
scaleDetector.onTouchEvent(motionEvent);
if ((mode == Mode.DRAG && scale >= MIN_ZOOM) || mode == Mode.ZOOM) {
getParent().requestDisallowInterceptTouchEvent(true);
float maxDx = (child().getWidth() - (child().getWidth() / scale)) / 2 * scale;
float maxDy = (child().getHeight() - (child().getHeight() / scale))/ 2 * scale;
dx = Math.min(Math.max(dx, -maxDx), maxDx);
dy = Math.min(Math.max(dy, -maxDy), maxDy);
Log.i(TAG, "Width: " + child().getWidth() + ", scale " + scale + ", dx " + dx
+ ", max " + maxDx);
applyScaleAndTranslation();
}
return true;
}
});
}
// ScaleGestureDetector
@Override
public boolean onScaleBegin(ScaleGestureDetector scaleDetector) {
Log.i(TAG, "onScaleBegin");
return true;
}
@Override
public boolean onScale(ScaleGestureDetector scaleDetector) {
float scaleFactor = scaleDetector.getScaleFactor();
Log.i(TAG, "onScale" + scaleFactor);
if (lastScaleFactor == 0 || (Math.signum(scaleFactor) == Math.signum(lastScaleFactor))) {
scale *= scaleFactor;
scale = Math.max(MIN_ZOOM, Math.min(scale, MAX_ZOOM));
lastScaleFactor = scaleFactor;
} else {
lastScaleFactor = 0;
}
return true;
}
@Override
public void onScaleEnd(ScaleGestureDetector scaleDetector) {
Log.i(TAG, "onScaleEnd");
}
private void applyScaleAndTranslation() {
child().setScaleX(scale);
child().setScaleY(scale);
child().setTranslationX(dx);
child().setTranslationY(dy);
}
private View child() {
return getChildAt(0);
}
}
@ashutoshsrivastavaroot
Copy link

Hello ,
Do you have some example? how use your class?
Does it work with all layout? When you pinch the screen all objects get zoom ( images) ?
Thanks for your attention.

@erichm82
Copy link

erichm82 commented Jun 19, 2017 •
edited

It worked PERFECTLY for my app (zooms and pans!!).

I simply pulled this class into my project and linked to it via xml (no other code required - a simple xml tag change is all that was needed)...and it worked like a charm.

NOTE: when using it via xml (as I did) only the first child within the ZoomLayout is affected by the "zoom" and "pan" functionality - as is defined by the "getChildAt(0)" method in the "View child()" object at the end of the ZoomLayout class. All child views AFTER the 1st view are not zoomed or panned. I found this to be true at the time when I initially applied it to my project [i.e. 19 June 2017].

<my.app.path.ZoomLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent">
</my.app.path.ZoomLayout>

I will recommend this to anybody needing this fix in an Android project. This is a single class (ONE!!) that does exactly the same thing as other similar libraries (that have tens of classes and files) here on GitHub do.

Thanks for this plug-&-play solution, anorth.

@vipulyaara
Copy link

It works great. This is the only layout I have found that also works in a scrollView. But if you put the layout in a scrollView and zoom and move/pan the layout, it only pans to the height of screen and not beyond that (however layout's height is more than screen's height as it is in a scrollView).
So you can not pan it to the bottom of content.

Anyone found a solution to that?

@akshay-shah
Copy link

@vipulyaara did u find any solution to this ?

@ghamoron
Copy link

ghamoron commented Aug 2, 2017 •
edited

Hi,

i would like to give initial zoom for my layout. how can i do that? please help. thanks

@lakshparnami
Copy link

lakshparnami commented Aug 11, 2017 •
edited

CHANGE

case MotionEvent.ACTION_POINTER_UP: mode = Mode.DRAG;
break;

TO
case MotionEvent.ACTION_POINTER_UP: mode = Mode.NONE;

remove auto repositioning.

@HungTDO
Copy link

HungTDO commented Aug 16, 2017

@alexGrebennikov10 Thanks! It's worked perfectly!

@cami7ord
Copy link

cami7ord commented Sep 20, 2017 •
edited

I made a modification of the class to support double tap to zoom in and out, and removed the auto repositioning on the ACTION_POINTER_UP event.

Hope it would help someone: https://gist.github.com/cami7ord/0ce6f36a28d36bf17d96284f2cf75ae9

@Naresh22
@aprabhakar-eoxys

@monowar1993
Copy link

Hello, need some help. I want zoom the view like in which portion of the layout I put my fingers and zoom that portion will be in center of the layout.

@mbahgojol
Copy link

To drag without having to zoom

You have to change

 case MotionEvent.ACTION_DOWN:
                        Log.i(TAG, "DOWN");
                        if (scale > MIN_ZOOM) {
                            Log.e("DOWN","Drag");
                            mode = Mode.DRAG;
                            startX = motionEvent.getX() - prevDx;
                            startY = motionEvent.getY() - prevDy;
                        }
                        break;

To

                        Log.i(TAG, "DOWN");
                        // TODO ORGINAL CODE UNCOMMENT BELOW CODE
                        /*if (scale > MIN_ZOOM) {*/
                            Log.e("DOWN","Drag");
                            mode = Mode.DRAG;
                            startX = motionEvent.getX() - prevDx;
                            startY = motionEvent.getY() - prevDy;
                        /*}*/
                        break;

And

                    getParent().requestDisallowInterceptTouchEvent(true);
                    float maxDx = (child().getWidth() - (child().getWidth() / scale)) / 2 * scale;
                    float maxDy = (child().getHeight() - (child().getHeight() / scale))/ 2 * scale;
                    dx = Math.min(Math.max(dx, -maxDx), maxDx);
                    dy = Math.min(Math.max(dy, -maxDy), maxDy);
                    Log.i(TAG, "Width: " + child().getWidth() + ", scale " + scale + ", dx " + dx
                            + ", max " + maxDx);
                    applyScaleAndTranslation();
                }

To

if ((mode == Mode.DRAG && scale >= MIN_ZOOM) || mode == Mode.ZOOM) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                    float maxDx = (child().getWidth() - (child().getWidth() / scale)) / 2 * scale;
                    float maxDy = (child().getHeight() - (child().getHeight() / scale))/ 2 * scale;
                    /*dx = Math.min(Math.max(dx, -maxDx), maxDx);
                    dy = Math.min(Math.max(dy, -maxDy), maxDy);*/
                    Log.i(TAG, "Width: " + child().getWidth() + ", scale " + scale + ", dx " + dx
                            + ", max " + maxDx);
                    applyScaleAndTranslation();
                }

Full Code

public boolean onTouch(View view, MotionEvent motionEvent) {
                switch (motionEvent.getAction() & MotionEvent.ACTION_MASK) {
                    case MotionEvent.ACTION_DOWN:
                        Log.i(TAG, "DOWN");
                        // TODO ORGINAL CODE UNCOMMENT BELOW CODE
                        /*if (scale > MIN_ZOOM) {*/
                            Log.e("DOWN","Drag");
                            mode = Mode.DRAG;
                            startX = motionEvent.getX() - prevDx;
                            startY = motionEvent.getY() - prevDy;
                        /*}*/
                        break;
                    case MotionEvent.ACTION_MOVE:
                        if (mode == Mode.DRAG) {
                            Log.e("MOVE","Drag");
                            dx = motionEvent.getX() - startX;
                            dy = motionEvent.getY() - startY;
                        }
                        break;
                    case MotionEvent.ACTION_POINTER_DOWN:
                        mode = Mode.ZOOM;
                        break;
                    // TODO ORGINAL CODE UNCOMMENT BELOW CODE
                    /*case MotionEvent.ACTION_POINTER_UP:mode = Mode.DRAG;*/
                    case MotionEvent.ACTION_POINTER_UP: mode = Mode.NONE;
                        Log.e("ACTION_POINTER_UP","Drag");
                        break;

                    case MotionEvent.ACTION_UP:
                        Log.i(TAG, "UP");
                        Log.e("ACTION_UP","None");
                        mode = Mode.NONE;
                        prevDx = dx;
                        prevDy = dy;
                        break;
                }
                scaleDetector.onTouchEvent(motionEvent);

                if ((mode == Mode.DRAG && scale >= MIN_ZOOM) || mode == Mode.ZOOM) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                    float maxDx = (child().getWidth() - (child().getWidth() / scale)) / 2 * scale;
                    float maxDy = (child().getHeight() - (child().getHeight() / scale))/ 2 * scale;
                    // TODO ORGINAL CODE UNCOMMENT BELOW CODE
                    /*dx = Math.min(Math.max(dx, -maxDx), maxDx);
                    dy = Math.min(Math.max(dy, -maxDy), maxDy);*/
                    Log.i(TAG, "Width: " + child().getWidth() + ", scale " + scale + ", dx " + dx
                            + ", max " + maxDx);
                    applyScaleAndTranslation();
                }

                return true;
            }

@gnarbaiz
Copy link

gnarbaiz commented Mar 6, 2018

Hi, I would like to know if anyone else had this issue, when I make the first gesture to zoom, the relative that is contained by ZoomLayout moves to left and up. Why could it be?

@siddhi212
Copy link

Hi can anyone tell me how to zoomout when double tap on screen using above code

@amitaggrawal
Copy link

amitaggrawal commented Apr 3, 2018 •
edited

Thank you very much. It is working like a charm.

For all those who are still facing problem in using above code please try this. (It worked for me this way):

After keeping the code in your project (I kept it in separate java file), open your layout file (xml) and make

<your.package.ZoomLayout android:layout_width="match_parent" android:layout_height="match_parent">

</your.package..ZoomLayout>

your parent layout. All other layouts should be children of this layout. Even if you are using scroll view this should be its only child.

Try It. All the best!

@amitaggrawal
Copy link

@gnarbaiz, This is called auto re positioning.

CHANGE
case MotionEvent.ACTION_POINTER_UP: mode = Mode.DRAG; break;

TO
case MotionEvent.ACTION_POINTER_UP: mode = Mode.NONE;

This will solve your issue.

@amitaggrawal
Copy link

@siddhi212, Please refer to @cami7ord comment above or Use this link to achieve your result. https://gist.github.com/cami7ord/0ce6f36a28d36bf17d96284f2cf75ae9
And don't forget to thank @cami7ord.

@RPCarter53
Copy link

gnarbaiz, I did find on certain Android versions, the very first zoom would in some way confuse the positioning/drag mechanism. I found the solution was to add the following to the xml definition of the zooming child. I came across this from a Google search so not my own work.
android:transformPivotX="0dp"
android:transformPivotY="0dp"

@ashwinisawanth412
Copy link

I am trying to use this zoomlayout inside which is a video view...My code is as follows

<com.packagename.ZoomLayout
android:id="@+id/zoom_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true">

    <com.packagename.MyVideoView
        android:id="@+id/video_view"
        android:layout_width="200dp"
        android:layout_height="150dp"
        android:layout_gravity="center"/>
    
</compackagename.ZoomLayout>

Although my zoom layout works like a charm upon pinching, the video view inside it doesn't. Please help. Also instead of a video view if i replace it with an image view with the same code, it does work. Thanks in advance

@Rantea
Copy link

Rantea commented Jun 18, 2018

thank you!

@Chirag117
Copy link

i have added table layout in this ZoomLayout class, now i want to perform click or touch event for custom view, and zoom in-out won't stop working, please help

@adityasonel
Copy link

Any one knows how to add click event on child views of this "ZoomLayout" ?

@chensmic
Copy link

chensmic commented Feb 18, 2019 •
edited

@Chirag117
In the ZoomLayout, change

FROM
case MotionEvent.ACTION_DOWN:
Log.i(TAG, "DOWN");
if (scale > MIN_ZOOM) {
mode = Mode.DRAG;
startX = motionEvent.getX() - prevDx;
startY = motionEvent.getY() - prevDy;
}
break;

TO

case MotionEvent.ACTION_DOWN:
Log.i(TAG, "DOWN");
if (scale > MIN_ZOOM) {
mode = Mode.DRAG;
startX = motionEvent.getX() - prevDx;
startY = motionEvent.getY() - prevDy;
}else{
//write your code here
}
break;

@totenhund
Copy link

To drag without having to zoom

You have to change

 case MotionEvent.ACTION_DOWN:
                        Log.i(TAG, "DOWN");
                        if (scale > MIN_ZOOM) {
                            Log.e("DOWN","Drag");
                            mode = Mode.DRAG;
                            startX = motionEvent.getX() - prevDx;
                            startY = motionEvent.getY() - prevDy;
                        }
                        break;

To

                        Log.i(TAG, "DOWN");
                        // TODO ORGINAL CODE UNCOMMENT BELOW CODE
                        /*if (scale > MIN_ZOOM) {*/
                            Log.e("DOWN","Drag");
                            mode = Mode.DRAG;
                            startX = motionEvent.getX() - prevDx;
                            startY = motionEvent.getY() - prevDy;
                        /*}*/
                        break;

And

                    getParent().requestDisallowInterceptTouchEvent(true);
                    float maxDx = (child().getWidth() - (child().getWidth() / scale)) / 2 * scale;
                    float maxDy = (child().getHeight() - (child().getHeight() / scale))/ 2 * scale;
                    dx = Math.min(Math.max(dx, -maxDx), maxDx);
                    dy = Math.min(Math.max(dy, -maxDy), maxDy);
                    Log.i(TAG, "Width: " + child().getWidth() + ", scale " + scale + ", dx " + dx
                            + ", max " + maxDx);
                    applyScaleAndTranslation();
                }

To

if ((mode == Mode.DRAG && scale >= MIN_ZOOM) || mode == Mode.ZOOM) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                    float maxDx = (child().getWidth() - (child().getWidth() / scale)) / 2 * scale;
                    float maxDy = (child().getHeight() - (child().getHeight() / scale))/ 2 * scale;
                    /*dx = Math.min(Math.max(dx, -maxDx), maxDx);
                    dy = Math.min(Math.max(dy, -maxDy), maxDy);*/
                    Log.i(TAG, "Width: " + child().getWidth() + ", scale " + scale + ", dx " + dx
                            + ", max " + maxDx);
                    applyScaleAndTranslation();
                }

Full Code

public boolean onTouch(View view, MotionEvent motionEvent) {
                switch (motionEvent.getAction() & MotionEvent.ACTION_MASK) {
                    case MotionEvent.ACTION_DOWN:
                        Log.i(TAG, "DOWN");
                        // TODO ORGINAL CODE UNCOMMENT BELOW CODE
                        /*if (scale > MIN_ZOOM) {*/
                            Log.e("DOWN","Drag");
                            mode = Mode.DRAG;
                            startX = motionEvent.getX() - prevDx;
                            startY = motionEvent.getY() - prevDy;
                        /*}*/
                        break;
                    case MotionEvent.ACTION_MOVE:
                        if (mode == Mode.DRAG) {
                            Log.e("MOVE","Drag");
                            dx = motionEvent.getX() - startX;
                            dy = motionEvent.getY() - startY;
                        }
                        break;
                    case MotionEvent.ACTION_POINTER_DOWN:
                        mode = Mode.ZOOM;
                        break;
                    // TODO ORGINAL CODE UNCOMMENT BELOW CODE
                    /*case MotionEvent.ACTION_POINTER_UP:mode = Mode.DRAG;*/
                    case MotionEvent.ACTION_POINTER_UP: mode = Mode.NONE;
                        Log.e("ACTION_POINTER_UP","Drag");
                        break;

                    case MotionEvent.ACTION_UP:
                        Log.i(TAG, "UP");
                        Log.e("ACTION_UP","None");
                        mode = Mode.NONE;
                        prevDx = dx;
                        prevDy = dy;
                        break;
                }
                scaleDetector.onTouchEvent(motionEvent);

                if ((mode == Mode.DRAG && scale >= MIN_ZOOM) || mode == Mode.ZOOM) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                    float maxDx = (child().getWidth() - (child().getWidth() / scale)) / 2 * scale;
                    float maxDy = (child().getHeight() - (child().getHeight() / scale))/ 2 * scale;
                    // TODO ORGINAL CODE UNCOMMENT BELOW CODE
                    /*dx = Math.min(Math.max(dx, -maxDx), maxDx);
                    dy = Math.min(Math.max(dy, -maxDy), maxDy);*/
                    Log.i(TAG, "Width: " + child().getWidth() + ", scale " + scale + ", dx " + dx
                            + ", max " + maxDx);
                    applyScaleAndTranslation();
                }

                return true;
            }

How to set boundaries for drag?

@vempatissn
Copy link

Pan is compulsorily required when we zoom. Both functions are provided in a single class. Great tutorial. Thank you anorth for the post.

@wangtsung
Copy link

not working below android 7.0

@shivammonga
Copy link

zooming and panning is not working with mouse. how can i do that?

@jacklai24
Copy link

I am facing a problem if the zoom layout includes a landscape image. It will leave space at the top and bottom. When I zoom and drag the image. It will be outside the top or bottom boundary. How to calculate the correct "maxDy" in this case?

@AlexEkaterinin
Copy link

It works perfectly, thank you very much!

@chensmic
Copy link

chensmic commented Oct 2, 2023 via email

@hanzlasheikh
Copy link

How can we reset the zoom?

@Nishchay2211
Copy link

Hi how can we achieve the focus zoom in this code? I mean when ever we zoom the image it always zoom from center. If we want to zoom and see a specific part of image it doesn't work. I try making use of "getFocusX() & getFocusY()" but it is still not zooming on the focused position but always to centre.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment