Android: Zooming

I found the example of code for android pinch zoom. You can find the example from here and download the codes from the website of 3rd edition of Hello! Android.

Well, it is best if you able to debug using your android phone instead of the emulator, it is pinching zoom, requires two touch points after all.

First of all, let's look at the xml layout file of the example i downloaded from the website i mentioned earlier.

It is just another ordinary layout file, except, one property, android:scaleType is added to the component. We are dealing with zooming process, to enlarge or scale down the image. Therefore in order to enable the picture to scale accordingly, android:scaleType="matrix" is added, and later the image matrix can be set using setImageMatrix(matrix) if the scale changed.

another ordinary onCreate() function

Yes, assigned touchListener to the image as we have to touch the image to zoom right? Here comes with the main part of the example. Before zooming even starts, we need to get the pointer where we pin on the image. Therefore we need MotionEvent which is able to report the axis value (x,y) and the motions. 

• MotionEvent.ACTION_DOWN - A pressed gesture started, that's when someone press on the screen
• MotionEvent.ACTION_POINTER_DOWN - A non-primary pointer has gone down, in my definition, it captures the second point when someone press on the screen without let go of the first press
• MotionEvent.ACTION_UP & MotionEvent.ACTION_POINTER_UP - When a pressed gesture was let go
• MotionEvent.ACTION_MASK - Handles multi touch
• MotionEvent.ACTION_MOVE - A change happens during a pressed gesture

It is better to show the pseudocode to explain the process.

When first press gesture happens,
         Get the axis value of the pressed location,
               If second press DID NOT happen,
                       The action to be taken when the press gesture moved is DRAG (drag the image around to    
                                        show the other part of the image which might covered outside the screen)
                       Then using matrix.postTranslate() to get the part of the image at the pointer after the move
              Else
                      When  a second press triggered, calculates the distance between the two pointers, and                      
                      calculate the middle point as well (because the scale starts with the middle point)
                      The action to be taken when the press gesture moved is ZOOM
                      Calculate the distance between the two points after moving
                      Calculate the scale between the two distances measured
                      Then using matrix.postScale() to enlarge or scale down the image matrix
Set the image to the current matrix

spacing() function is used to determine the space between the first two fingers, the reason of calculating the space is because the author would like to set a constraint to ignore the event if the distance is too small.

midPoint() function is used to calculate the middle point of the first two fingers, as the scaling process always starts from the middle point.

the declarations

Declaration again, the code above is downloaded from Hello! Android, and please refers here for further details. 

The explanation above is only explaining my understanding regards the code. Thank you.