CODEWITHSUNDEEP
androidxamarinxamarin.formsxamarin.androidgif
Garrett Daniel DeMeyer
Garrett Daniel DeMeyer

Reputation: 931

Creating an extension of WebView in Xamarin.Froms to display gifs. I cannot load the image on Android

iOS works as expected. I have tried adding the .gif to the assets folder too (setting the BaseUrl to "file:///android_asset") with no luck. Any ideas?

imageHtml = "<center><body bgcolor =\""
                        + GetBackgroundColorHex()
                        + "\""
                        + heightAndWidth
                        + ">"
                        + (!string.IsNullOrWhiteSpace(imageFileName)
                            ? "<img src=\"" 
                            + imageFileName 
                            + "\""
                            + heightAndWidth
                            + "/>"
                            : "&nbsp;")
                        + "</body></center>";

            HtmlWebViewSource source = new HtmlWebViewSource()
            {
                Html = imageHtml
            };

            if (Device.RuntimePlatform == Device.Android && !string.IsNullOrWhiteSpace(imageFileName))
            {
                source.BaseUrl = "file:///android_res/drawable/";
            }

            Source = source;

Here's the error I get in output:

12-11 02:08:00.256 E/AndroidProtocolHandler(12895): Unable to open resource URL: file:///android_res/drawable/Loading.gif
12-11 02:08:00.256 E/AndroidProtocolHandler(12895): java.lang.NoSuchFieldException: Loading
12-11 02:08:00.256 E/AndroidProtocolHandler(12895):     at java.lang.Class.getField(Class.java:1549)
12-11 02:08:00.256 E/AndroidProtocolHandler(12895):     at org.chromium.android_webview.AndroidProtocolHandler.getFieldId(AndroidProtocolHandler.java:40)
12-11 02:08:00.256 E/AndroidProtocolHandler(12895):     at org.chromium.android_webview.AndroidProtocolHandler.openResource(AndroidProtocolHandler.java:54)
12-11 02:08:00.256 E/AndroidProtocolHandler(12895):     at org.chromium.android_webview.AndroidProtocolHandler.open(AndroidProtocolHandler.java:10)

Upvotes: 2

Views: 1332

Answers (3)

Thamarai T
Thamarai T

Reputation: 262

Xamarin.Forms now supports .GIF, from version 4.4-pre3 and up on iOS, Android and UWP. Before using, first add the .GIF to the platforms projects, or as an embedded resource in the shared project and then use it like a regular image.The API on the Image control has been extended with the IsAnimationPlaying bindable property.

For e.g., loader.gif is added in all platform projects, then below code make it animating.

<Image Source="loader" IsAnimationPlaying="True" WidthRequest="36" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"></Image>

Upvotes: 0

Kokul Jose
Kokul Jose

Reputation: 1742

Save your GIF file at Assets folder. Here "loading.gif" is the filename.

WebView webView=new WebView
{
      Source = new HtmlWebViewSource
      {
          Html = $"<body\"><img src=\"loading.gif\"/></body>"
      }
};
Content = webView;

Upvotes: 0

SushiHangover
SushiHangover

Reputation: 74164

You can load Android.Webkit.WebView content via assets, not drawables.

Here is the Xamarin.Android code to parse the image to get its width/height to insure the aspect ratio is preserved and display it from the Asset folder:

WebView Gif Viewer:

var src = "out.gif";
var backgroundColor = "#ff0000";
int imageWidth;
int imageHeight;
using (var stream = Assets.Open(src))
using (var options = new BitmapFactory.Options { InJustDecodeBounds = true })
{
    await BitmapFactory.DecodeStreamAsync(stream, null, options);
    imageWidth = options.OutWidth;
    imageHeight = options.OutHeight;
}
var html = $"<body bgcolor={backgroundColor};\"><img src=\"{src}\" alt=\"A Gif file\" width=\"{imageWidth}\" height=\"{imageHeight}\" style=\"width: 100%; height: auto;\"/></body>";
webView.Settings.AllowFileAccessFromFileURLs = true;
webView.LoadDataWithBaseURL("file:///android_asset/", html, "text/html", "UTF-8", "");

enter image description here

Via Xamarin.Forms WebView:

var src = "image.gif";
var backgroundColor = "#ff0000";
int imageWidth = 300;
int imageHeight = 200;
var html = $"<body bgcolor={backgroundColor};\"><img src=\"{src}\" alt=\"A Gif file\" width=\"{imageWidth}\" height=\"{imageHeight}\" style=\"width: 100%; height: auto;\"/></body>";
webView.Source = new HtmlWebViewSource
{
    Html = html
};

Note: image.gif is in the Android Assets (AndroidResource) folder and iOS Resource folder (BundleResource)

Upvotes: 3

Related Questions