Xamarin Forms: backgroundImage from external storage - image

Question

I am developing a Xamarin Forms which writes successfully an image to external storage and then should use it as Background of a ContentPage.
In the constructor of the ContentPage I wrote this:
this.BackgroundImage = "/storage/emulated/0/DCIM/D72D01AEF71348CDBFEED9D0B2F259F7.jpg"
but the background image never shows.
I checked the Android Manifest and the permissions of read and write external storage are set correctly.
What am I missing?

Answer 1

The problem with your code is that BackgroundImage expects an image that's bundled with your app. Android implementation for updating the background image is here:
void UpdateBackgroundImage(Page view)
{
if (!string.IsNullOrEmpty(view.BackgroundImage))
this.SetBackground(Context.Resources.GetDrawable(view.BackgroundImage));
}
GetDrawable method expects an image from your application's Resources which obviously doesn't exist in your case.
What you should do, is create a custom renderer with a new BindableProperty called ExternalBackgroundImage. Then you could handle loading of the external image as a background in the Android specific custom renderer.
PCL project
Remember to change your current page from ContentPage to ExternalBackgroundImagePage so that you have access to the ExternalBackgroundImage property.
public class ExternalBackgroundImagePage : ContentPage
{
public static readonly BindableProperty ExternalBackgroundImageProperty = BindableProperty.Create("ExternalBackgroundImage", typeof(string), typeof(Page), default(string));
public string ExternalBackgroundImage
{
get { return (string)GetValue(ExternalBackgroundImageProperty); }
set { SetValue(ExternalBackgroundImageProperty, value); }
}
}
Android project
[assembly:ExportRenderer (typeof(ExternalBackgroundImagePage), typeof(ExternalBackgroundImagePageRenderer))]
namespace YourProject.Droid
{
public class ExternalBackgroundImagePageRenderer : PageRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
{
Page view = e.NewElement;
base.OnElementChanged(e);
UpdateExternalBackgroundImage(view);
}
void UpdateExternalBackgroundImage(Page view)
{
if (string.IsNullOrEmpty(view.ExternalBackgroundImage))
return;
// Retrieve a bitmap from a file
var background = BitmapFactory.DecodeFile(view.ExternalBackgroundImage);
// Convert to BitmapDrawable for the SetBackground method
var bitmapDrawable = new BitmapDrawable(background);
// Set the background image
this.SetBackground(bitmapDrawable);
}
}
}
Usage
this.ExternalBackgroundImage = "/storage/emulated/0/DCIM/D72D01AEF71348CDBFEED9D0B2F259F7.jpg"