Why does calling setScaleX during pinch zoom gesture cause flicker?

Question

I am trying to create a zoomable container and I am targeting API 14+

In my onScale (i am using the ScaleGestureDetector to detect pinch-zoom) I am doing something like this:

public boolean onScale (ScaleGestureDetector detector) {
   float scaleFactor = detector.getScaleFactor();
   setScaleX(getScaleX() * scaleFactor);
   setScaleY(getScaleY() * scaleFactor);

   return true;
};

It works but the zoom is not smooth. In fact it noticeably flickers.

I also tried it with hardware layer thinking that the scaling would happen on the GPU once the texture was uploaded and thus would be super fast. But it made no difference - the zoom is not smooth and flickers weirdly sometimes.

What am I doing wrong?

Answer 1

Does the flicker look like the view flipping back and forth between zoomed and not-zoomed? That's caused by having the ScaleGestureDetector handling motion events from the same view that you're scaling. When you setScaleX() that changes the coordinates of the touch, which triggers a new touch event interpreted as reversing the zoom you just applied.

Put the content of your zoomable view inside a single child FrameLayout and set the scale on that view instead.

I've posted a working pinch-zoom layout here: https://gist.github.com/anorth/9845602