Displaying an Image Downloaded from the Internet as Annotation - Using Picasso

Question

I cannot display the image downloaded from the Internet as annotation. I am implementing the following code and Picasso library. However, if I use a local image, it works. Thanks in advance for any help.

private void createAnnotation(int id, double lat, double lon, String caption, String photoUrl) {

    SKAnnotation annotation = new SKAnnotation(id);

    SKCoordinate coordinate = new SKCoordinate(lat, lon);
    annotation.setLocation(coordinate);
    annotation.setMininumZoomLevel(5);

    SKAnnotationView annotationView = new SKAnnotationView();
    View customView =
            (LinearLayout) ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(
                    R.layout.annotation_photo_and_text, null, false);
    //  If width and height of the view  are not power of 2 the actual size of the image will be the next power of 2 of max(width,height).
    //annotationView.setView(findViewById(R.id.customView));

    TextView tvCaption = (TextView) customView.findViewById(R.id.annotation_photo_caption);
    tvCaption.setText(caption);

    ImageView ivPhoto = (ImageView) customView.findViewById(R.id.annotation_photo);
    Picasso.with(getApplicationContext())
            .load(photoUrl)
            .resize(96, 96)
            //.centerCrop()
            .into(ivPhoto);
    //ivPhoto.setImageResource(R.drawable.hurricanerain);

    annotationView.setView(customView);
    annotation.setAnnotationView(annotationView);

    mapView.addAnnotation(annotation, SKAnimationSettings.ANIMATION_NONE);
}

Ubangishari

Hasn't anybody worked with annotations with images downloaded from URL's? – Ubangishari

Answer 1

Picasso loads images from the internet asynchronously. Try adding the image to the Annotation after it has been downloaded. You can use a Target to listen for the image download completion:

ImageView ivPhoto = (ImageView) customView.findViewById(R.id.annotation_photo);  
Target target = new Target() {  
    @Override
    public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
        ivPhoto.setImageBitmap(bitmap);
        annotationView.setView(customView);
        annotation.setAnnotationView(annotationView);
        mapView.addAnnotation(annotation, SKAnimationSettings.ANIMATION_NONE);
    }

    @Override
    public void onBitmapFailed(Drawable errorDrawable) {}

    @Override
    public void onPrepareLoad(Drawable placeHolderDrawable) {}
};
ivPhoto.setTag(target);
Picasso.with(getApplicationContext())
    .load(photoUrl)
    .resize(96, 96)
    .into(target);

Erminia

I had solved the problem by using ImageRequest (in Volley). I did not test your code, but it looks like it would work. Thank you. – Ubangishari

Answer 2

try activity context in place of applicationcontext. It may work for you.

Fortran

Answer 3

What if you try to load image using Target object, and then set downloaded bitmap to your ImageView?

Target target = new Target() {  
    @Override
    public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
        // loading of the bitmap was a success
        // TODO do some action with the bitmap
        ivPhoto.setImageBitmap(bitmap);
    }

    @Override
    public void onBitmapFailed(Drawable errorDrawable) {
        // loading of the bitmap failed
        // TODO do some action/warning/error message
    }

    @Override
    public void onPrepareLoad(Drawable placeHolderDrawable) {

    }
};
ivPhoto.setTag(target);
Picasso.with(getApplicationContext())
    .load(photoUrl)
    .resize(96, 96)
    .into(target);

Graphy