Drawing a rectangle over an image

In my application, there's an activity which gets image from the resource, i have incorporated panning and zooming functionality in the same.

What i want now is to draw a rectangle over it in such a way that the rectangle too shall zoom and pan with the image. I tried extending view and overriding the draw. Only the rectangle comes and not the image. Would be very helpful if someone could assist me.

public class XYZ extends Activity implements OnTouchListener {
    private static final String TAG = "Touch" ;
    // These matrices will be used to move and zoom image
    Matrix matrix = new Matrix();
    Matrix savedMatrix = new Matrix();

    // We can be in one of these 3 states
    static final int NONE = 0;
    static final int DRAG = 1;
    static final int ZOOM = 2;
    int mode = NONE;
    PointF start = new PointF();
    PointF mid = new PointF();
    float oldDist = 1f;
    private Bitmap mBitmap;
     ImageView mapView;
    /** Called when the activity is first created. */

    @Override
    public void onCreate(Bundle savedInstanceState) {         
        super.onCreate(savedInstanceState);     
        setContentView(R.layout.jubileemap);
        BitmapFactory.Options options = new BitmapFactory.Options();
         options.inDither= false;       
         options.inInputShareable=true;
         options.inTempStorage=new byte[8*1024];

        mapView = (ImageView) findViewById(R.id.abc);        

        mBitmap =BitmapFactory.decodeResource(XYZ.this.getResources(),R.drawable.pqr, options);
        mapView.setImageBitmap(mBitmap);

        mapView.setOnTouchListener(JubileeMaps.this);

    }
     @Override
        public void onLowMemory(){
        Log.e("low memory", "low");  
         System.gc();
       }
     private float spacing(MotionEvent event) {
            float x = event.getX(0) - event.getX(1);
            float y = event.getY(0) - event.getY(1);
            return FloatMath.sqrt(x * x + y * y);
        }
        private void midPoint(PointF point, MotionEvent event) {
            float x = event.getX(0) + event.getX(1);
            float y = event.getY(0) + event.getY(1);
            point.set(x / 2, y / 2);
        }
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            mapView.setScaleType(ImageView.ScaleType.MATRIX);
            // TODO Auto-generated method stub
       开发者_开发技巧     ImageView view = (ImageView) v;
            // Dump touch event to log
            dumpEvent(event);
            // Handle touch events here...
            /*spacing(event);
                midPoint(point,event);*/
            switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                savedMatrix.set(matrix);
                start.set(event.getX(), event.getY());
                Log.d(TAG, "mode=DRAG" );
                mode = DRAG;
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_POINTER_UP:
                mode = NONE;
                Log.d(TAG, "mode=NONE" );
                break;
            case MotionEvent.ACTION_MOVE:
                if (mode == DRAG) {
                    matrix.set(savedMatrix);
                    matrix.postTranslate(event.getX() - start.x,
                            event.getY() - start.y);
                }  else if (mode == ZOOM) {
                    float newDist = spacing(event);
                    Log.d(TAG, "newDist=" + newDist);
                    if (newDist > 10f) {
                        matrix.set(savedMatrix);
                        float scale = newDist / oldDist;
                        matrix.postScale(scale, scale, mid.x, mid.y);
                    }
                }
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                oldDist = spacing(event);
                Log.d(TAG, "oldDist=" + oldDist);
                if (oldDist > 10f) {
                    savedMatrix.set(matrix);
                    midPoint(mid, event);
                    mode = ZOOM;
                    Log.d(TAG, "mode=ZOOM" );
                }
                break;

            }

            // Perform the transformation
            view.setImageMatrix(matrix);
            return true; // indicate event was handled
        }
        private void dumpEvent(MotionEvent event) {
            String names[] = { "DOWN" , "UP" , "MOVE" , "CANCEL" , "OUTSIDE" ,
                    "POINTER_DOWN" , "POINTER_UP" , "7?" , "8?" , "9?" };
            StringBuilder sb = new StringBuilder();
            int action = event.getAction();
            int actionCode = action & MotionEvent.ACTION_MASK;
            sb.append("event ACTION_" ).append(names[actionCode]);
            if (actionCode == MotionEvent.ACTION_POINTER_DOWN
                    || actionCode == MotionEvent.ACTION_POINTER_UP) {
                sb.append("(pid " ).append(
                        action >> MotionEvent.ACTION_POINTER_ID_SHIFT);
                sb.append(")" );
            }
            sb.append("[" );
            for (int i = 0; i < event.getPointerCount(); i++) {
                sb.append("#" ).append(i);
                sb.append("(pid " ).append(event.getPointerId(i));
                sb.append(")=" ).append((int) event.getX(i));
                sb.append("," ).append((int) event.getY(i));
                if (i + 1 < event.getPointerCount())
                    sb.append(";" );
            }
            sb.append("]" );
            Log.d(TAG, sb.toString());
        }
        @Override
          public void onPause()
          {
            super.onPause();
            System.gc();
          }
        @Override
          protected void onResume()
          {
            super.onResume();
            System.gc();            
          }
        @Override
        protected void onDestroy() {
        super.onDestroy();
        System.gc();

         mapView.setImageBitmap(null); 
         mBitmap.recycle();
        }


}

And the xml i'm using is:

<ImageZoomView
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/zoomview"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    />

This is the code i'm using..now on top of the image i wanna draw a recagle to mark an area which will zoom in and out as my image does.But have been unable to implements this.

You should override the onDraw method.

Be sure to leave the call to super.onDraw() and do your custom drawing below that line.

See this example: http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/LabelView.html