Loading custom icon on Map Marker with Picasso does not work for first time

Issue

I am creating custom marker image from layout file and using an image in that file. I am setting image on image view using Picasso which does not work for the first time, but works for the second time and image is loaded successfully. I have read about the weak reference that Piccaso holds and also tried solution given in various stack overflow posts, but none seems to work. Sharing my code, any help would be appreciated.

//adding marker method

 protected Marker createMarker(double latitude, double longitude,String markerText,String imageUrl) {

        Log.e("Adding","Marker");
        LatLng marker = new LatLng(latitude, longitude);
        CameraPosition cameraPosition = new CameraPosition.Builder().target(marker).zoom(16).build();
        googleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
        return googleMap.addMarker(new MarkerOptions()
                .position(new LatLng(latitude, longitude))
                .title(markerText)
                .snippet("Salesman Info").icon(BitmapDescriptorFactory.fromBitmap(getMarkerBitmapFromView(markerText,imageUrl))));
    }


// making drawable from layout file

 private Bitmap getMarkerBitmapFromView(String markerText,String imageUrl) {

        View customMarkerView = ((LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.custom_marker, null);
        final ImageView markerImageView = (ImageView) customMarkerView.findViewById(R.id.profile_image);
        TextView markerTextView = (TextView)customMarkerView.findViewById(R.id.marker_text);
        markerTextView.setText(markerText);


        final Target target = new Target() {
            @Override
            public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
                markerImageView.setImageBitmap(bitmap);
                Log.e("Loading marker","Image loaded");
            }

            @Override
            public void onBitmapFailed(Drawable errorDrawable) {
                Log.e("Loading marker","Image failed");
            }

            @Override
            public void onPrepareLoad(Drawable placeHolderDrawable) {
                Log.e("Loading marker","Image prepared");
            }
        };

        markerImageView.setTag(target);

        Picasso.with(getContext())
                .load(imageUrl)
                .into(target);


        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;
    }

Solution

I solved this issue by using Glide library with Simple target option.

Glide.with(getContext())
                .asBitmap()
                .load("imageurl")
                .into(new SimpleTarget<Bitmap>() {
                    @Override
                    public void onLoadFailed(@Nullable Drawable errorDrawable) {
                        Marker m =googleMap.addMarker(new MarkerOptions()
                                .position(new LatLng(latitude, longitude))
                                .title(markerText)
                                .snippet("").icon(BitmapDescriptorFactory.fromBitmap(getMarkerBitmapFromView(markerText,null,mCustomMarkerView))));
                        m.setTag(info);
                        super.onLoadFailed(errorDrawable);
                    }

                    @Override
                    public void onResourceReady(Bitmap resource, Transition<? super Bitmap> transition) {
                        Marker m =googleMap.addMarker(new MarkerOptions()
                                .position(new LatLng(latitude, longitude))
                                .title(markerText)
                                .snippet("").icon(BitmapDescriptorFactory.fromBitmap(getMarkerBitmapFromView(markerText,resource,mCustomMarkerView))));
                        m.setTag(info);

                    }

                    }
                );

Answered By - Paras Watts