Xamarin Android - Custom Map Image Async - xamarin.android

Question

I'm following this example:
CustomMap
In the example the image is informed directly(On here):
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/xamarin" />
I changed it to:
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:id="#+id/InfoWindowFoto"/>
and:
var infoFoto = view.FindViewById<ImageView>(Resource.Id.InfoWindowFoto);
if (infoFoto != null) GetImageBitmapFromUrl(infoFoto, customPin.local.Url_Imagem);
and:
private void GetImageBitmapFromUrl(ImageView img, string url)
{
using (var webClient = new WebClient())
{
var imageBytes = webClient.DownloadData(url);
if (imageBytes != null && imageBytes.Length > 0)
{
var bitmap = BitmapFactory.DecodeByteArray(imageBytes, 0, imageBytes.Length);
img.SetImageBitmap(bitmap);
}
}
}
if the image is synchronous, it works with delay :(
If I change to asynchronous the image is not show:
var infoFoto = view.FindViewById<ImageView>(Resource.Id.InfoWindowFoto);
if (infoFoto != null) GetImageBitmapFromUrl(infoFoto, customPin.local.Url_Imagem);
private async void GetImageBitmapFromUrl(ImageView img, string url)
{
using (var webClient = new WebClient())
{
var imageBytes = await webClient.DownloadDataTaskAsync(url);
if (imageBytes != null && imageBytes.Length > 0)
{
var bitmap = await BitmapFactory.DecodeByteArrayAsync(imageBytes, 0, imageBytes.Length);
img.SetImageBitmap(bitmap);
}
}
}
I don't know how to update a view to show an image after downloading it. I also tried Picasso with the same result:
var infoFoto = view.FindViewById<ImageView>(Resource.Id.InfoWindowFoto);
Picasso.Get().Load(customPin.local.Url_Imagem).Into(infoFoto);
Can you help me fix this please
EDIT:
also tried with FFImageloading:
if (infoFoto != null) ImageService.Instance.LoadUrl(customPin.local.Url_Imagem).Into(infoFoto);
When I click on the pin the image does not appear. But if I click off the pin and the view closes, and I click on the pin again for the view to open the image appears quickly!
I need to know if it is possible to update the view inside the map after the image is downloaded...
My sample: Sample Project

Answer 1

The info window that is drawn is not a live view. The view is rendered as an image (using View.draw(Canvas)) at the time it is returned. This means that any subsequent changes to the view will not be reflected by the info window on the map.
To update the info window later (for example, after an image has loaded), call showInfoWindow().
You could try the below codes:
private Bitmap bitmap;
public Android.Views.View GetInfoContents(Marker marker)
{
var inflater = Android.App.Application.Context.GetSystemService(Context.LayoutInflaterService) as Android.Views.LayoutInflater;
if (inflater != null)
{
Android.Views.View view;
var customPin = GetCustomPin(marker);
if (customPin == null)
{
throw new Exception("Local não localizado");
}
if (customPin.local.Name.Equals("Xamarin"))
{
view = inflater.Inflate(Resource.Layout.XamarinMapInfoWindow, null);
}
else
{
view = inflater.Inflate(Resource.Layout.MapInfoWindow, null);
}
var infoTitle = view.FindViewById<TextView>(Resource.Id.InfoWindowTitle);
if (infoTitle != null) infoTitle.Text = marker.Title;
var infoSubtitle = view.FindViewById<TextView>(Resource.Id.InfoWindowSubtitle);
if (infoSubtitle != null) infoSubtitle.Text = marker.Snippet;
var infoNote = view.FindViewById<TextView>(Resource.Id.InfoNote);
if(infoNote != null) infoNote.Text = customPin.local.Note;
var infoFoto = view.FindViewById<ImageView>(Resource.Id.InfoWindowFoto);
if (infoFoto != null && bitmap == null)
{
GetImageBitmapFromUrlAsync(infoFoto, customPin.local.Url_Imagem, marker);
}
else
{
infoFoto.SetImageBitmap(bitmap);
}
return view;
}
return null;
}
private async void GetImageBitmapFromUrlAsync(ImageView img, string url, Marker marker)
{
using (var webClient = new WebClient())
{
var imageBytes = await webClient.DownloadDataTaskAsync(url);
if (imageBytes != null && imageBytes.Length > 0)
{
bitmap = await BitmapFactory.DecodeByteArrayAsync(imageBytes, 0, imageBytes.Length);
marker.ShowInfoWindow();
}
}
}
if your image_urls are not the same,you could use Dictionary to store the bitmap,use the url as the key,the bitmap as the value.