How to make a Google Map Marker with a photo inside round speech-bubble?

Question

I've searched enough but have not found it yet. How to make a GoogleMaps Marker with a photo Example:

I thought I would put 2 markers in the same place one with the image of the marker and another with the photo, but I think it is not the best to do do. Can someone help me?

Fess

stackverflow.com is English-only, please check es.stackoverflow.com or pt.stackoverflow.com (sorry, I am not sure which language you used in your post). – Neidaneidhardt

Answer 1

This answer is similar to my other answer here, however, this is different due to the round bubble around the image.

First, ensure you have the latest version of Picasso:

dependencies {
    compile 'com.squareup.picasso:picasso:2.71828'
    //....
}

Here is a transformation that creates the round bubble and bottom triangle around the image:

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Shader;

public class CircleBubbleTransformation implements com.squareup.picasso.Transformation {
    private static final int photoMargin = 30;
    private static final int margin = 20;
    private static final int triangleMargin = 10;

    @Override
    public Bitmap transform(final Bitmap source) {
        int size = Math.min(source.getWidth(), source.getHeight());
        float r = size/2f;

        Bitmap output = Bitmap.createBitmap(size+triangleMargin, size+triangleMargin, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        Paint paintBorder = new Paint();
        paintBorder.setAntiAlias(true);
        paintBorder.setColor(Color.parseColor("#333030"));
        paintBorder.setStrokeWidth(margin);
        canvas.drawCircle(r, r, r-margin, paintBorder);

        Paint trianglePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        trianglePaint.setStrokeWidth(2);
        trianglePaint.setColor(Color.parseColor("#333030"));
        trianglePaint.setStyle(Paint.Style.FILL_AND_STROKE);
        trianglePaint.setAntiAlias(true);
        Path triangle = new Path();
        triangle.setFillType(Path.FillType.EVEN_ODD);
        triangle.moveTo(size-margin, size / 2);
        triangle.lineTo(size/2, size+triangleMargin);
        triangle.lineTo(margin, size/2);
        triangle.close();
        canvas.drawPath(triangle, trianglePaint);

        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
        canvas.drawCircle(r, r, r-photoMargin, paint);

        if (source != output) {
            source.recycle();
        }

        return output;
    }

    @Override
    public String key() {
        return "circlebubble";
    }
}

In this example I get the LatLng from a PlaceAutocompleteFragment:

    PlaceAutocompleteFragment placeAutoComplete = (PlaceAutocompleteFragment) getFragmentManager().findFragmentById(R.id.place_autocomplete);
    placeAutoComplete.setOnPlaceSelectedListener(new PlaceSelectionListener() {
        @Override
        public void onPlaceSelected(Place place) {
            Log.d("Maps", "Place selected: " + place.getName());
            mLatLng = place.getLatLng();
            Picasso.get()
                    .load(user_photo_url)
                    .resize(200,200)
                    .centerCrop()
                    .transform(new CircleBubbleTransformation())
                    .into(mTarget);
        }

        @Override
        public void onError(Status status) {
            Log.d("Maps", "An error occurred: " + status);
        }
    });

Define the Target:

Target mTarget = new Target() {
    @Override
    public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
        Marker driver_marker = mMap.addMarker(new MarkerOptions()
                .position(mLatLng)
                .icon(BitmapDescriptorFactory.fromBitmap(bitmap))
                .title("test")
                .snippet("test address")
        );
    }

    @Override
    public void onBitmapFailed(Exception ex, Drawable errorDrawable) {
        Log.d("picasso", "onBitmapFailed");
    }

    @Override
    public void onPrepareLoad(Drawable placeHolderDrawable) {

    }
};

The result:

Joyajoyan