image not loading from URL in custom infoWindow using Picasso image loading library in android

Question

I am trying to load an image from the URL in custom infoWindow when the user click on the marker. I was able to load the other details but the image is not loading int it. i'm using Picasso library to do this for me. I have search many related topics and see the solutions but was not able to understand which solution to apply to solve my problem. I am using an web service call to get the required data.

This is my code:

  @Override
        public View getInfoContents(Marker arg0) {

            //marker.showInfoWindow();
            return null;
        }

        @Override
        public View getInfoWindow(Marker arg0) 
        {

            View v = getLayoutInflater().inflate(R.layout.map_infowindow, null);


             for(int i=0 ; i<lstMain.size();i++)
                {
                    Pojo b=lstMain.get(i);
                    double slat= Double.parseDouble(b.getLatitude());
                    double slng= Double.parseDouble(b.getLongitude());

                    double lat= Math.round(slat*100000.0)/100000.0;
                    double lng= Math.round(slng*100000.0)/100000.0;

                    String s1=String.valueOf(lat);
                    String s2=String.valueOf(lng);

                    Log.v("comparing latilongi pojo===>", lat+" , "+lng);
                    Log.v("comparing latilongi marker===>", Clickedlatitude+" , "+Clickedlongitude);

                    if(s1.equals(String.valueOf(Clickedlatitude)) && s2.equals(String.valueOf(Clickedlongitude)))
                    {
                        txtDname=(TextView)v.findViewById(R.id.infoDoctorName);
                        txtDspe=(TextView)v.findViewById(R.id.infoDoctorSpe);
                        txtDaddress=(TextView)v.findViewById(R.id.infoDoctorAddress);
                        imgUrl=(ImageView)v.findViewById(R.id.infoDoctorImage);
                        String url=b.getPhotoURL();

                        txtDname.setText(b.getDoctorName());
                        txtDspe.setText(b.getSpecialization());
                        txtDaddress.setText(b.getAddress1()+" , "+b.getAddress2());


                        Picasso.with(MapActivity.this)
                        .load(url)
                        .placeholder(R.drawable.ic_launcher)
                        .error(R.drawable.ic_launcher).resize(50, 50)
                        .into(imgUrl);


                    }

                }
            return v;
        }

I have already seen these solutions, But not understanding exactly what will solve my problem:

Why Custom InfoWindow of google map v2 ,Not load url Image?

Android Google maps APIv2 InfoWindow and Markers

Add an Image from url into custom InfoWindow google maps v2

Answer 1

You can use a Picasso Callback onsuccess loading the image, like this

if (image != null) {
   Picasso.with(getApplicationContext())
          .load(image)
          .placeholder(R.drawable.ic_launcher)
          .into(i, new MarkerCallback(marker));
}

and create a new class to handle the Picasso Callback like this MarkerCallback.java

public class MarkerCallback implements Callback {
   Marker marker=null;

   MarkerCallback(Marker marker) {
     this.marker=marker;
   }

   @Override
   public void onError() {
     Log.e(getClass().getSimpleName(), "Error loading thumbnail!");
   }

   @Override
   public void onSuccess() {
     if (marker != null && marker.isInfoWindowShown()) {
       marker.hideInfoWindow();
       marker.showInfoWindow();
     }
   }
}

Answer 2

mMap.setInfoWindowAdapter(object : GoogleMap.InfoWindowAdapter { override fun getInfoContents(p0: Marker?): View? { return null }

        override fun getInfoWindow(p0: Marker?): View? {

            if (p0!!.tag != null) {
                val view = LayoutInflater.from(this@ProviderMainActivity).inflate(R.layout.infowindow_client, null)
                val text = view.findViewById<TextView>(R.id.TXT_NAME)
                val TXT_location = view.findViewById<TextView>(R.id.TXT_location)
                val proimg = view.findViewById<ImageView>(R.id.IMG)
                val datares = p0!!.tag as ResponseDataItem

                Glide.with(this@ProviderMainActivity).load(datares.user!!.profileImageWithURL)
                    .apply(RequestOptions.circleCropTransform().override(50,50).placeholder(R.drawable.placeholder_profile))
                    .listener(object :RequestListener<Drawable>{
                        override fun onLoadFailed(
                            e: GlideException?,
                            model: Any?,
                            target: Target<Drawable>?,
                            isFirstResource: Boolean
                        ): Boolean {
                            return true
                        }

                        override fun onResourceReady(
                            resource: Drawable?,
                            model: Any?,
                            target: Target<Drawable>?,
                            dataSource: DataSource?,
                            isFirstResource: Boolean
                        ): Boolean {
                            Klog.d("## FIRST RESOURCE-","-".plus(isFirstResource))
                            Klog.d("## FIRST DATA SOURCE-","-".plus(dataSource?.name))
                            proimg.setImageDrawable(resource)
                            if (dataSource?.name.equals("DATA_DISK_CACHE")) {
                                p0.showInfoWindow()
                            }
                            return true
                        }

                    }).into(proimg)
                text.setText(datares.user!!.fullName)
                var loc = datares.location!!.text!!.split(",").map { it.trim() }
                TXT_location.setText(loc.get(0))

                return view
            } else {
                return null
            }
        }
    })

Answer 3

Superb ans. work perfectly and easy to implement.