Properly animate drawing of circle on a MapFragment

Question

I am making an app that should allow users to draw a circle on top of the map.

I've used the answer for this question to allow the user to drag out a variable sized circle using this touch listener:

public void setupListeners(){
    frameLayout.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {

            float x = event.getX();
            float y = event.getY();

            int x_co = Math.round(x);
            int y_co = Math.round(y);

            Projection projection = map.getProjection();
            Point x_y_points = new Point(x_co, y_co);

            LatLng latLng = map.getProjection().fromScreenLocation(x_y_points);
            double latitude = latLng.latitude;

            double longitude = latLng.longitude;

            int eventaction = event.getAction();
            switch (eventaction) {
                case MotionEvent.ACTION_DOWN:
                    Log.d("dero", "Started drawing marker at: "+latLng.toString());
                    mStartDraw = latLng;
                    break;
                case MotionEvent.ACTION_MOVE:
                    //Log.d("dero", "Finger moved to: "+latLng.toString());
                    // finger moves on the screen
                    float[] distRes = new float[1];
                    Location.distanceBetween(mStartDraw.latitude, mStartDraw.longitude, latLng.latitude, latLng.longitude, distRes);
                    map.clear();
                    drawMusicMarker(mStartDraw, distRes[0]);
                    break;
                case MotionEvent.ACTION_UP:
                    Log.d("dero", "Circle finished at: "+latLng.toString());
                    mStartDraw = null;
                    mMapMovable = true;
                    return true;
            }

            return !mMapMovable;
        }
    });

This works reasonably well, and I can drag out circles on the map whenever I want. However because I have to call .clear() every time the users finger moves the circle flickers like crazy when being drawn. Is there a way to properly animate the circle without using .clear()?

score 0 · Answer 1 · answered Sep 28 '15 at 02:42

Apparently there is an issue with circles on maps if you use a fill color (Issue).

The best way I found to animate it was to grab the circle object returned by adding the circle to the map, and change its radius, and only fill it in once the dragging is finished.

Properly animate drawing of circle on a MapFragment

1 Answers1