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 us

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:

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.