How to create a custom-shaped bitmap marker with Android map API v2

Question

I am developing an Android Application where I m using Google Map API v2  I need to show the user location on a map with custom markers   Each marker will show the picture of the user from an URL  The image must be downloaded in asynchronous mode from the server  See the attached screenshot for an example   How do I add an image and custom information in the marker

User · Accepted Answer

In the Google Maps API v2 Demo there is a MarkerDemoActivity class in which you can see how a custom Image is set to a GoogleMap.

// Uses a custom icon.
mSydney = mMap.addMarker(new MarkerOptions()
    .position(SYDNEY)
    .title("Sydney")
    .snippet("Population: 4,627,300")
    .icon(BitmapDescriptorFactory.fromResource(R.drawable.arrow)));

As this just replaces the marker with an image you might want to use a Canvas to draw more complex and fancier stuff:

Bitmap.Config conf = Bitmap.Config.ARGB_8888;
Bitmap bmp = Bitmap.createBitmap(80, 80, conf);
Canvas canvas1 = new Canvas(bmp);

// paint defines the text color, stroke width and size
Paint color = new Paint();
color.setTextSize(35);
color.setColor(Color.BLACK);

// modify canvas
canvas1.drawBitmap(BitmapFactory.decodeResource(getResources(),
    R.drawable.user_picture_image), 0,0, color);
canvas1.drawText("User Name!", 30, 40, color);

// add marker to Map
mMap.addMarker(new MarkerOptions()
    .position(USER_POSITION)
    .icon(BitmapDescriptorFactory.fromBitmap(bmp))
    // Specifies the anchor to be at a particular point in the marker image.
    .anchor(0.5f, 1));

This draws the Canvas canvas1 onto the GoogleMap mMap. The code should (mostly) speak for itself, there are many tutorials out there how to draw a Canvas. You can start by looking at the Canvas and Drawables from the Android Developer page.

Now you also want to download a picture from an URL.

URL url = new URL(user_image_url);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();   
conn.setDoInput(true);   
conn.connect();     
InputStream is = conn.getInputStream();
bmImg = BitmapFactory.decodeStream(is);

You must download the image from an background thread (you could use AsyncTask or Volley or RxJava for that).

After that you can replace the BitmapFactory.decodeResource(getResources(), R.drawable.user_picture_image) with your downloaded image bmImg.

User · Answer

The alternative and easier solution that i also use is to create custom marker layout and convert it into a bitmap   view custom marker xml   lt  xml version  1 0  encoding  utf-8   gt   lt FrameLayout xmlns android  http   schemas android com apk res android      android id    id custom marker view      android layout width  wrap content      android layout height  wrap content      android background   drawable marker mask  gt        lt ImageView         android id    id profile image          android layout width  48dp          android layout height  48dp          android layout gravity  center horizontal          android contentDescription   null          android src   drawable avatar    gt   lt  FrameLayout gt    Convert this view into bitmap by using the code below   private Bitmap getMarkerBitmapFromView  DrawableRes int resId             View customMarkerView     LayoutInflater  getSystemService Context LAYOUT INFLATER SERVICE   inflate R layout view custom marker  null           ImageView markerImageView    ImageView  customMarkerView findViewById R id profile image           markerImageView setImageResource resId           customMarkerView measure View MeasureSpec UNSPECIFIED  View MeasureSpec UNSPECIFIED           customMarkerView layout 0  0  customMarkerView getMeasuredWidth    customMarkerView getMeasuredHeight             customMarkerView buildDrawingCache            Bitmap returnedBitmap   Bitmap createBitmap customMarkerView getMeasuredWidth    customMarkerView getMeasuredHeight                    Bitmap Config ARGB 8888           Canvas canvas   new Canvas returnedBitmap           canvas drawColor Color WHITE  PorterDuff Mode SRC IN           Drawable drawable   customMarkerView getBackground            if  drawable    null              drawable draw canvas           customMarkerView draw canvas           return returnedBitmap          Add your custom marker in on Map ready callback    Override public void onMapReady GoogleMap googleMap        Log d TAG   onMapReady   called with        mGoogleMap   googleMap      MapsInitializer initialize this       addCustomMarker      private void addCustomMarker         Log d TAG   addCustomMarker          if  mGoogleMap    null            return                adding a marker on map with image from  drawable    mGoogleMap addMarker new MarkerOptions                position mDummyLatLng               icon BitmapDescriptorFactory fromBitmap getMarkerBitmapFromView R drawable avatar          For more details please follow the link below  How to create custom marker using layout

User · Answer

I hope it still not too late to share my solution  Before that  you can follow the tutorial as stated in Android Developer documentation  To achieve this  you need to use Cluster Manager with defaultRenderer    Create an object that implements ClusterItem  public class SampleJob implements ClusterItem    private double latitude  private double longitude     Create constructor  getter and setter here   Override public LatLng getPosition         return new LatLng latitude  longitude      Create a default renderer class  This is the class that do all the job  inflating custom marker cluster with your own style   I am using Universal image loader to do the downloading and caching the image    public class JobRenderer extends DefaultClusterRenderer lt  SampleJob  gt     private final IconGenerator iconGenerator  private final IconGenerator clusterIconGenerator  private final ImageView imageView  private final ImageView clusterImageView  private final int markerWidth  private final int markerHeight  private final String TAG    ClusterRenderer   private DisplayImageOptions options    public JobRenderer Context context  GoogleMap map  ClusterManager lt SampleJob gt  clusterManager        super context  map  clusterManager           initialize cluster icon generator     clusterIconGenerator   new IconGenerator context getApplicationContext         View clusterView   LayoutInflater from context  inflate R layout multi profile  null       clusterIconGenerator setContentView clusterView       clusterImageView    ImageView  clusterView findViewById R id image           initialize cluster item icon generator     iconGenerator   new IconGenerator context getApplicationContext         imageView   new ImageView context getApplicationContext         markerWidth    int  context getResources   getDimension R dimen custom profile image       markerHeight    int  context getResources   getDimension R dimen custom profile image       imageView setLayoutParams new ViewGroup LayoutParams markerWidth  markerHeight        int padding    int  context getResources   getDimension R dimen custom profile padding       imageView setPadding padding  padding  padding  padding       iconGenerator setContentView imageView        options   new DisplayImageOptions Builder                showImageOnLoading R drawable circle icon logo               showImageForEmptyUri R drawable circle icon logo               showImageOnFail R drawable circle icon logo               cacheInMemory false               cacheOnDisk true               considerExifParams true               bitmapConfig Bitmap Config RGB 565               build        Override protected void onBeforeClusterItemRendered SampleJob job  MarkerOptions markerOptions          ImageLoader getInstance   displayImage job getJobImageURL    imageView  options       Bitmap icon   iconGenerator makeIcon job getName         markerOptions icon BitmapDescriptorFactory fromBitmap icon   title job getName           Override protected void onBeforeClusterRendered Cluster lt SampleJob gt  cluster  MarkerOptions markerOptions         Iterator lt Job gt  iterator   cluster getItems   iterator        ImageLoader getInstance   displayImage iterator next   getJobImageURL    clusterImageView  options       Bitmap icon   clusterIconGenerator makeIcon iterator next   getName         markerOptions icon BitmapDescriptorFactory fromBitmap icon        Override protected boolean shouldRenderAsCluster Cluster cluster        return cluster getSize    gt  1     Apply cluster manager in your activity fragment class    public class SampleActivity extends AppCompatActivity implements OnMapReadyCallback    private ClusterManager lt SampleJob gt  mClusterManager  private GoogleMap mMap  private ArrayList lt SampleJob gt  jobs   new ArrayList lt SampleJob gt       Override protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout activity landing        SupportMapFragment mapFragment    SupportMapFragment  getSupportFragmentManager                findFragmentById R id map       mapFragment getMapAsync this        Override public void onMapReady GoogleMap googleMap        mMap   googleMap      mMap getUiSettings   setMapToolbarEnabled true       mClusterManager   new ClusterManager lt SampleJob gt  this  mMap       mClusterManager setRenderer new JobRenderer this  mMap  mClusterManager        mMap setOnCameraChangeListener mClusterManager       mMap setOnMarkerClickListener mClusterManager          Assume that we already have arraylist of jobs       for final SampleJob job  jobs           mClusterManager addItem job             mClusterManager cluster       Result

User · Answer

From lambda answer  I have made something closer to the requirements    boolean imageCreated   false   Bitmap bmp   null  Marker currentLocationMarker  private void doSomeCustomizationForMarker LatLng currentLocation        if   imageCreated            imageCreated   true          Bitmap Config conf   Bitmap Config ARGB 8888          bmp   Bitmap createBitmap 400  400  conf           Canvas canvas1   new Canvas bmp            Paint color   new Paint            color setTextSize 30           color setColor Color WHITE            BitmapFactory Options opt   new BitmapFactory Options            opt inMutable   true           Bitmap imageBitmap BitmapFactory decodeResource getResources                    R drawable messi opt           Bitmap resized   Bitmap createScaledBitmap imageBitmap  320  320  true           canvas1 drawBitmap resized  40  40  color            canvas1 drawText  Le Messi   30  40  color            currentLocationMarker   mMap addMarker new MarkerOptions   position currentLocation                   icon BitmapDescriptorFactory fromBitmap bmp                      Specifies the anchor to be at a particular point in the marker image                   anchor 0 5f  1          else           currentLocationMarker setPosition currentLocation

[android] How to create a custom-shaped bitmap marker with Android map API v2

Examples related to android

Examples related to google-maps-markers

Examples related to google-maps-android-api-2