android - draw resizable circle on google map

Question

I'm trying to draw a resizable circle on top of my google map, which the user will be able to expand or shrink using touch gestures (for example to shrink the circle the user will pinch the circle on the screen, I want it to work like zooming in/out option in the map, only that just the circle will get bigger/smaller on the map). Is this possible to implement? And if so how would I go about accomplishing that.

I searched Google and Stackoverflow and as I understand, I need to add a custom view on top of my map fragment and implement OnTouchListener to this View (and that is just the beginning). Can some one please advise on what to do or how to proceed? I can draw a circle on the map but I don't know how to get it to respond to touch events.

Thanks in advance.

Answer 1

Based on your question, you want to overlay a "pinch listening" view that draws an oval shape based on the pinch. I made some poorly-tested code for this purpose, adapt it as you need:

MainLayout:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- Replace the ImageView with your MapView or whatever you are 
         overlaying with the oval shape -->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="#F00" />

    <com.example.testapp.CircleTouchView
        android:id="@+id/circle_drawer_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

CircleTouchView:

public class CircleTouchView extends View {
private static final int MODE_PINCH = 0;
private static final int MODE_DONT_CARE = 1;

ShapeDrawable mCircleDrawable;
int mTouchMode = MODE_DONT_CARE;

public CircleTouchView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    mCircleDrawable = new ShapeDrawable(new OvalShape());
    mCircleDrawable.getPaint().setColor(0x66FFFFFF);
}

public CircleTouchView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public CircleTouchView(Context context) {
    this(context, null, 0);
}

@Override
public boolean onTouchEvent(MotionEvent event) {

    switch (event.getActionMasked()) {
    case MotionEvent.ACTION_DOWN:
        mCircleDrawable.setBounds(0, 0, 0, 0);
        invalidate();
        break;
    case MotionEvent.ACTION_POINTER_DOWN:
        prepareCircleDrawing(event);
        break;
    case MotionEvent.ACTION_MOVE:
        if (mTouchMode == MODE_PINCH) {
            prepareCircleDrawing(event);
        }
        break;
    case MotionEvent.ACTION_POINTER_UP:
        if (event.getActionIndex() <= 1) {
            mTouchMode = MODE_DONT_CARE;
        }
        break;
    default:
        super.onTouchEvent(event);
    }

    return true;
}

private void prepareCircleDrawing(MotionEvent event) {
    int top, right, bottom, left;
    int index = event.getActionIndex();

    if (index > 1) {
        return;
    }
    mTouchMode = MODE_PINCH;
    if (event.getX(0) < event.getX(1)) {
        left = (int) event.getX(0);
        right = (int) event.getX(1);
    } else {
        left = (int) event.getX(1);
        right = (int) event.getX(0);
    }

    if (event.getY(0) < event.getY(1)) {
        top = (int) event.getY(0);
        bottom = (int) event.getY(1);
    } else {
        top = (int) event.getY(1);
        bottom = (int) event.getY(0);
    }

    mCircleDrawable.setBounds(left, top, right, bottom);

    invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
    mCircleDrawable.draw(canvas);
}
}

If you want a perfect circle instead of an oval shape, change the prepareCircleDrawing() method so that it takes the smallest values for X and Y between event 0 and 1.

Edit: you can add the snippet below before calling mCircleDrawable.setBounds(left, top, right, bottom); to draw a perfect circle. There are other ways for drawing circles, it depends on how you want it to behave.

int height = bottom - top;
int width = right - left;

if (height > width) {
    int delta = height - width;
    top += delta / 2;
    bottom -= delta / 2;
} else {
    int delta = width - height;
    left += delta / 2;
    right -= delta / 2;
}

Hope I made myself clear, regards.