Round icon to the marker in Google map v2 in android

Question

I have implemented google maps in my android app. I have two questions related to markers.

Question 1: How to get a round profile image marker? ie I would like to get roud image icon rather than square image icon in the mapmarker?

I am getting the list of lat, long, and profiepic link from a particular URL and loading them using Async. On Post execute I have implemented a for loop

    protected void onPostExecute(String file_url)
    {
        for (int i = 0; i < nameList.size(); i++)
        {
            userName = nameList.get(i).getName();
            lati = nameList.get(i).getLati();
            longi = nameList.get(i).getLongi();
            photoUrl = nameList.get(i).getImage();

            gotoLocation(Double.parseDouble(lati), Double.parseDouble(longi), userName, photoUrl, ZOOMVALUE);
        }
    }

I am loading the image using picasso library to the marker:

    private void gotoLocation(double lat, double lng, String name, String url, float zoom)
    {
       final String uname = name; 
       curlat = lat;
       curlong = lng;

      Picasso.with(getActivity()).load(url).resize(100, 100).into(new Target() 
      { 
        @Override
        public void onBitmapFailed(Drawable arg0) 
        {
            markerOptions = new MarkerOptions().position(new LatLng(curlat, curlong)).icon(BitmapDescriptorFactory.fromResource(R.drawable.profilepic)).title(uname);
            markerforfriends = googleMap.addMarker(markerOptions);          
        }

        @Override
        public void onBitmapLoaded(Bitmap b, LoadedFrom arg1) 
        {

            bitmapMarker = BitmapDescriptorFactory.fromBitmap(b);

            if(b != null)
            {
                markerOptions = new MarkerOptions().position(new LatLng(curlat, curlong)).icon(bitmapMarker).title(uname);
            }
            else
            {
                markerOptions = new MarkerOptions().position(new LatLng(curlat, curlong)).icon(BitmapDescriptorFactory.fromResource(R.drawable.profilepic)).snippet(uname);
            }

            markerforfriends = googleMap.addMarker(markerOptions);                    

        }

        @Override
        public void onPrepareLoad(Drawable arg0) 
        {

        }
      });

    }

I tried the following:

    CircleOptions circle=new CircleOptions();
    circle.center(ll).fillColor(Color.LTGRAY).radius(1);
    googleMap.addCircle(circle);

This circles the current location but not the image?

Question 2: The above markers don't pop up always (not stable)? if I refersh the map it comes up properly? What could be wrong here? Is it because I am loading them using piccasso library? Is there different method to load the image from URL and them to marker?

Answer 1

This was an issue. See here: https://github.com/square/picasso/issues/308

According to Jake Wharton, don't declare Target as anonymous, as it gets garbage collected. Declare it as a private within your activity for example. See if that works.

On a separate file:

public class DummyTarget implements Target
{
    public String uname;
    //etc....

    @Override
    public void onBitmapLoaded(Bitmap bitmap, LoadedFrom from) {
     // you codes....      

    }

    @Override
    public void onBitmapFailed(Drawable errorDrawable) {
     // your codes....

    }

    @Override
    public void onPrepareLoad(Drawable placeHolderDrawable) {

    }
}

Somewhere, declare it

private target = new DummyTarget();

And in your Picasso call(s):

private void gotoLocation(double lat, double lng, String name, String url, float zoom)
    {
       final String uname = name; 
       curlat = lat;
       curlong = lng;

       // set dummy target
       target.uname = uname;
       // etc...

      Picasso.with(getActivity()).load(url).resize(100, 100).into(target);

Answer 2

You could also just load into "this"

Picasso.with(getActivity()).load(url).resize(100, 100).into(this);

and then have the current class implement Target

    public class YourClass implements Target {

        private ArrayList<BitMap> bitMaps;

    private void gotoLocation(double lat, double lng, String name, String url, float zoom)  {
       final String uname = name; 
       curlat = lat;
       curlong = lng;
        Picasso.with(getActivity()).load(url).resize(100, 100).into(this);
    }

        @Override
        public void onBitmapFailed(Drawable arg0) {

        }

        @Override
        public void onBitmapLoaded(Bitmap bitmap, LoadedFrom loadedFrom) {
            bitMaps.add(bitmap);

        }

        @Override
        public void onPrepareLoad(Drawable arg0) {


        }

    }

Answer 3

Solved QUESTION 1 Part.. Since I am using picasso this became very useful for me to draw a circle icon.

Transformation transformation = new RoundedTransformationBuilder()
.borderColor(Color.WHITE)
.borderWidthDp(3)
.cornerRadiusDp(30)
.oval(false)
.build();

used RoundedTransformationBuilder Library!

Thanks to the creator of https://github.com/vinc3m1/RoundedImageView !

Thought this will be useful for others if they want to have something similar to MY QUESTION 1..