3

I drew a custom marker which shows user's photo in a circle and when the user "touches" (not onClick) on the marker, it instanstly enlarges and when the user touches on the map surface, the marker instantly gets its previous small form.

Small and big markers

It works well actually but I do not satisfied with the transition from big marker to small marker. As I said, it happens "instantly", because basically I just delete previous marker and add the new marker. I want a smooth transtion in which the small marker grows (increasing its radius) in 0.5 second (or less) and get the form of big marker. It cannot be implemented since repeatedly rendering, deleting and adding a marker is too much work to properly handle in thread. The thread is tripping very slowly.

I did not put the class which provides touch listening but the two important methods are below (without thread). Although there are many details, these parts are generally about placing the marker and creating its shape. Using thread, the issue of slowness could not be solved... So how can I realize to add a short animation here? I hope there is a way to realize this.

private void placeMarker(LatLng point){

    // delete previous marker
    if (marker != null)
        marker.remove();

    // set for small marker
    radius = 134;
    int stroke = 6;
    verticalAnchor = 0.944f;

    // set for big marker
    if (getMarkerTouched()) {
        radius = 170;
        verticalAnchor = 0.956f;
    }

    Bitmap.Config conf = Bitmap.Config.ARGB_8888;
    Bitmap bmp = Bitmap.createBitmap((int) radius, (int) radius + 25, conf);
    canvas = new Canvas(bmp);
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.temp);

    // creates a centered bitmap of the desired size
    bitmap = ThumbnailUtils.extractThumbnail(bitmap, (int) radius - stroke, (int) radius - stroke, ThumbnailUtils.OPTIONS_RECYCLE_INPUT);
    BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setColor(0xff464646);
    paint.setStyle(Paint.Style.FILL);

    // the triangle laid under the circle
    int pointedness = 20;
    Path path = new Path();
    path.setFillType(Path.FillType.EVEN_ODD);
    path.moveTo(radius / 2, radius + 15);
    path.lineTo(radius / 2 + pointedness, radius - 10);
    path.lineTo(radius / 2 - pointedness, radius - 10);
    canvas.drawPath(path, paint);

    // gray circle background
    RectF rect = new RectF(0, 0, radius, radius);
    canvas.drawRoundRect(rect, radius / 2, radius / 2, paint);

    // circle photo
    paint.setShader(shader);
    rect = new RectF(stroke, stroke, radius - stroke, radius - stroke);
    canvas.drawRoundRect(rect, (radius - stroke) / 2, (radius - stroke) / 2, paint);

    // add the marker
    marker = map.addMarker(new MarkerOptions().position(point).icon(BitmapDescriptorFactory.fromBitmap(bmp)).anchor(0.5f, verticalAnchor));
}

-

public void onUpdateMapOnTouch() {
    Projection projection = map.getProjection();
    LatLng markerLocation = marker.getPosition();
    Point screenPosition = projection.toScreenLocation(markerLocation);
    float x = screenPosition.x;
    float y = screenPosition.y;
    float xx = mTouchView.x;
    float yy = mTouchView.y;
    boolean isMarkerPosition = xx >= x - radius*0.5 && xx <= x + radius*0.5 && yy >= y - radius*verticalAnchor && yy <= y + radius*(1-verticalAnchor);

    // the marker is going to be touched.
    if (!getMarkerTouched() && isMarkerPosition) {
        setMarkerTouched(true);
        placeMarker(marker.getPosition());
    }

    // the map surface is going to be touched.
    if (getMarkerTouched() && !isMarkerPosition) {
        setMarkerTouched(false);
        placeMarker(marker.getPosition());
    }
}
Dorukhan Arslan
  • 2,676
  • 2
  • 24
  • 42
  • For the Google map marker `animation`, you can get some idea from [here](http://stackoverflow.com/a/14883628/4186942) – bjiang Mar 23 '15 at 16:57
  • 1
    Unfortunately, it does not help. The tutorial is about sliding the marker linearly. I asked for adding an animation which shows growth of a small marker to bigger one. Thus, I cannot use the same approach mentioned in this link. – Dorukhan Arslan Mar 23 '15 at 22:20
  • I see that `Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.temp);` was base on Drawable Resources i have a question. what about in external image url? is there any possible way? – Pseudorandom Dec 06 '15 at 23:48

0 Answers0