Android Map Application : Making shape on android MapView using overlay and Touch event

Generally we know how to make sample application of map in android. Its quite easy. But we struck when we goes for advance like showing ping either single or multiple on map, drawing figure on map , drawing path between  two point. Consider all point, there is only one solution for all, and that is Overlay. Overlay consider to be layer on a MapView in android. Using and modifying Overlay almost match with View and SurfaceView.
This tutorial will cover  about drawing shape on android map.  This tutorial will go now steps wise

Step 1) Create one simple Map application

Step 2) Create one OverLayClass which extends Overlay. Overlay create one layer above map. We add this layer to MapView. This layer provide us to draw figure using canvas, path and paint

Step 3) Add OverLayClass to map. Now this layer will attach to our MapView to allow us to draw something. Overlay method onDraw calls every time we touch Overlay. So it enable our change to Overlays layer

Explanation About OverLayClass

Our task start when we touch the Overlay. We start counting point and draw on canvas using Path. For giving path a real look in constructor of OverLayClass we customize it's Paint class mPaint. We track three touch event ACTION_DOWN, ACTION_UP and ACTION_MOVE. And draw between ACTION_DOWN and ACTION_DOWN. Our path goes on increase between ACTION_UP and ACTION_DOWN.  Have a look at code

      private float oldX, oldY;  
      private float firstoldX, firstoldY;  
      private boolean isFirstTime = false;  
      @Override  
      public boolean onTouchEvent(MotionEvent arg0, MapView arg1) {  
           switch (arg0.getAction()) {  
           case MotionEvent.ACTION_MOVE:  
                touch_move(arg0.getX(), arg0.getY());  
                break;  
           case MotionEvent.ACTION_DOWN:  
                mapView.getOverlays().clear();  
                mapView.getOverlays().add(this);  
                touch_start(arg0.getX(), arg0.getY());  
                break;  
           case MotionEvent.ACTION_UP:  
                mPath.lineTo(oldX, oldY);  
                float mDistance = getDistanceBetwenFirstAndLastPoint();  
                Log.d("Distance F and L", String.valueOf(mDistance));  
                if (mDistance < 100)  
                     mPath.close();  
                isFirstTime = false;  
                break;  
           }  
           return true;  
      }  
      private void touch_start(float x, float y) {  
           mPath.reset();  
           mPath.moveTo(x, y);  
           oldX = x;  
           oldY = y;  
           if (!isFirstTime) {  
                firstoldX = oldX;  
                firstoldY = oldY;  
                isFirstTime = true;  
           }  
      }  
      private void touch_move(float x, float y) {  
           float dx = Math.abs(x - oldX);  
           float dy = Math.abs(y - oldY);  
           if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {  
                mPath.quadTo(oldX, oldY, (x + oldX) / 2, (y + oldY) / 2);  
                oldX = x;  
                oldY = y;  
           }  
      }  

Adding Overlay to android map

      private void setOverLay() {  
           OverLayClass mOverLayClass = new OverLayClass(projection, this, mapView);  
           mapView.getOverlays().add(mOverLayClass);  
      }  

You can close the path if you want. In OverLayClass you will get complete idea by seeing source code of application. Source code can be downloaded using link at the end of article.

Download Source