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.
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());
}
}