How to load image from url into InfoWindowAdapter android ? image is not shown

Question

I'm trying to display an image from a url in a "InfoWindowAdapter" ,I have the following code, but does not show me the image. What is wrong please ?

public class ObjectInfoWindow implements GoogleMap.InfoWindowAdapter {

    private Activity activity;
    private HashMap<String, LostObject> markers;
    private Marker markerShowingInfoWindow;
    private boolean mRefreshingInfoWindow;
    private View v = null;
    ImageUrlView imgThumbnail;

    public LostObjectInfoWindow(Activity activity, HashMap<String, LostObject> markers) {

        this.activity = activity;
        this.markers = markers;

    }

    @Override
    public View getInfoContents(Marker marker) {

        DebugLog.d("TAG", "getInfoContents mRefreshingInfoWindow "+mRefreshingInfoWindow);

        if(v==null){
            v = activity.getLayoutInflater().inflate(R.layout.lost_object_info_window, null);
        }

        LostObject lostObject = markers.get(marker.getId());
        if (lostObject != null) {

            String imgThumbnailPath = lostObject.getPhoto();

            if(imgThumbnailPath==null || imgThumbnailPath.trim().length() == 0){
            TextView title = (TextView) v.findViewById(R.id.title);
            TextView description = (TextView) v.findViewById(R.id.description);
            title.setText(lostObject.getType());

            if (lostObject.getContact() != null) {
                description.setText(activity.getResources().getString(R.string.lost_object_contact_info_window, lostObject.getContact()));
            }
                imgThumbnail = (ImageUrlView) v.findViewById(R.id.thumbnail);
                imgThumbnail.setScaleType(ImageView.ScaleType.FIT_CENTER);
                imgThumbnail.setImageResource(R.drawable.ic_ayn_list_grey);

            } else {


                if (!mRefreshingInfoWindow) {

                    TextView title = (TextView) v.findViewById(R.id.title);
                    TextView description = (TextView) v.findViewById(R.id.description);
                    title.setText(lostObject.getType());

                    if (lostObject.getContact() != null) {
                        description.setText(activity.getResources().getString(R.string.lost_object_contact_info_window, lostObject.getContact()));
                    }

                    imgThumbnail = (ImageUrlView) v.findViewById(R.id.thumbnail);

                    markerShowingInfoWindow = marker;

                    imgThumbnailPath = imgThumbnailPath.replace(".jpg", "_100_100.jpg");
                    imgThumbnail.setListener(listener);
                    imgThumbnail.load(imgThumbnailPath);

                }else{
                    v.invalidate();

                }
            }


        }

        // Returning the view containing InfoWindow contents
        return v;
    }

This method is called after the bitmap has been loaded. It checks if the currently displayed info window is the same info window which has been saved. If it is, then refresh the windown to display the newly loaded image.

private ImageUrlView.ImageUrlViewListener listener = new ImageUrlView.ImageUrlViewListener() {

        @Override
        public void imageAdded(ImageUrlView img) {

            if (markerShowingInfoWindow != null ) {
                mRefreshingInfoWindow = true;
                markerShowingInfoWindow.showInfoWindow();
                mRefreshingInfoWindow = false;
            }
        }
    };
}

Answer 1

Firstly, I do not see any variable that is storing the URL path/address. Hence there is no way for the program to get the location of the image and display it on to the info window. There are two ways to do that:

• One is by using Universal Image Loader which is a library that you can embed in your app project. Which is quite similar to what you are doing in your app code using custominfoadapter. Please refer to this link for the complete implementation of the code.
• Another method is to use a separate thread (Async Task is the best option to do that). This will load the image from the URL in the background and glue it inside the custominfowindow in a synchronized manner.

Here is a code snippet for that, Put this method inside your ObjectInfoWindow class and pass in URL and marker as parameters:

protected void handleMarkerClicked(final Marker marker, final String url) {
        new AsyncTask<Void, Void, Void>()
        {   
            @Override
            protected void onPreExecute() 
            {
                super.onPreExecute();
                _infoImageDrawable = null;
            }

            @Override
            protected Void doInBackground(Void... params) 
            {
                InputStream is;
                try {
                     is = (InputStream) new URL(url).getContent();
                     _infoImageDrawable = Drawable.createFromStream(is, "");
                } catch (MalformedURLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
                } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
                }
                return null;                
            }

            @Override
            protected void onPostExecute(Void result) 
            {
            super.onPostExecute(result);
            marker.showInfoWindow();
            }
        }.execute();
    }
}

Hope this would Help!!