Circle animation on google map in android

Question

doing circle animation on google map using valu animation but animation gets flickered and blinking all the time.

Here is a code,

 CircleOptions circleOptions = new CircleOptions()
                .center(searchStopPoint)   //set center
                .radius(100)   //set radius in meters
                .strokeColor(Color.TRANSPARENT)
                .fillColor(0x555751FF)
                .strokeWidth(5);

    busStopCircle = googleMap.addCircle(circleOptions);
    ValueAnimator valueAnimator = new ValueAnimator();
    valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
    valueAnimator.setRepeatMode(ValueAnimator.RESTART);
    valueAnimator.setIntValues(0, 100);
    valueAnimator.setDuration(3000);
    valueAnimator.setEvaluator(new IntEvaluator());
    valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float animatedFraction = valueAnimator.getAnimatedFraction();              
            busStopCircle.setRadius(animatedFraction * 100);
        }
    });

    valueAnimator.start();

Can anyone helps me to to make it smooth animation without flickering..

Thanks

Nariko

The flicker happens on a real device or in the emulator? – Stadler

@Stadler both the device – Nariko

i had a look at the docs, and you have INFINITE and then RESTART -- RESTART When the animation reaches the end and repeatCount is INFINITE or a positive value, the animation restarts from the beginning. developer.android.com/reference/android/animation/… -- any reason why you keep animating the circles?? – Stadler

i am putting this circle at specific location to make it highlighted and indicating as different than other locations. need to put semi transparent circle with some animation. – Nariko

yeah i understand but can you try animating just the once without repeating as a test to see if the blinking flickers go away. that would narrow it down to the animation itself – Stadler

also have a look here #17278515 -- it may be the (.fillColor(0x555751FF)) that is the issue – Stadler

Checkout that link, they given the default color from the Color class and i have given my own color, though i have tried with that same happening – Nariko

Let us continue this discussion in chat. – Nariko

@Stadler I can reproduce this with RESTART and REVERSE. – Deadly

any solutions / workaround for the same? I am also struggling with the flickering, while animating the Circle object drawn using maps api. – Adventuress

Possible duplicate of Circle on Google Maps for Android v2 is flickering when size changes by seekbar – Coolish

Answer 1

This is a known issue. One workaround would be to use a GroundOverlay instead of a circle.
Here's a sample:
Create the circle :

// The drawable to use for the circle
    GradientDrawable d = new GradientDrawable();
    d.setShape(GradientDrawable.OVAL);
    d.setSize(500,500);
    d.setColor(0x555751FF);
    d.setStroke(5, Color.TRANSPARENT);

    Bitmap bitmap = Bitmap.createBitmap(d.getIntrinsicWidth()
            , d.getIntrinsicHeight()
            , Bitmap.Config.ARGB_8888);

    // Convert the drawable to bitmap
    Canvas canvas = new Canvas(bitmap);
    d.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
    d.draw(canvas);

    // Radius of the circle
    final int radius = 100;

    // Add the circle to the map
    final GroundOverlay circle = map.addGroundOverlay(new GroundOverlayOptions()
    .position(searchStopPoint, 2 * radius).image(BitmapDescriptorFactory.fromBitmap(bitmap)));

Now animate the circular overlay :

ValueAnimator valueAnimator = new ValueAnimator();
    valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
    valueAnimator.setRepeatMode(ValueAnimator.RESTART);
    valueAnimator.setIntValues(0, radius);
    valueAnimator.setDuration(3000);
    valueAnimator.setEvaluator(new IntEvaluator());
    valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float animatedFraction = valueAnimator.getAnimatedFraction();
            circle.setDimensions(animatedFraction * radius * 2);
        }
    });

    valueAnimator.start();

UPDATE : This issue has been fixed

Trishtrisha

I'm using the latest version of play services. But still circle rendering is not that much fast. Is GroundOverlay still the better option that CircleOptions even when google claims the issue to be fixed? – Chromogen

Answer 2

Although Google claims the issue has been fixed, I can confirm that as of today any Circle primitive added whether via android-maps-compose or via vanilla maps api is poorly optimized for animation, causing a lot of dropped frames and overall "stuttering" of the application even if it has barely any UI.

Using GroundOverlay instead of a Circle solved the issue for me, albeit I had hoped for more smoothness. It really amazes me how huge of a gap there is between the capabilities of the official Google Maps app (buttery smooth animations) and the janky Google Maps API that cannot even return LatLng of the Point of Interest when it's clicked (it returns the latlng of the tap contrary to what their documentation says).

P.S. I couldn't add a comment due to low reputation, so I had to post it as an answer.

Lion