CODEWITHSUNDEEP
androidxamarinwebview
frederickd
frederickd

Reputation: 371

Xamarin Android Webview shows html source Android 7

An application I developed uses locally stored HTML to be shown in a webview.

It has always worked without any issue, but on Android 7 the HTML source is displayed instead of formatting the HTML.

The code for loading the HTML is as simple as this

var webView = view.FindViewById<WebView>(Resource.Id.webview);
webView.LoadUrl("file:///android_res/raw/info.html");

The content of the HTML is also very straightforward.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name = "viewport" content = "width=device-width">
    <title></title>
    <style>

        body {
            font-family: "Helvetica", sans-serif;
            font-size: .85em;
            padding-top: 25px;
        }

        body a {
            color: #697782;
            font-weight: bold;
        }

        h1 {
            font-size: 1.15em;
            text-transform: uppercase;
            color: #24292f;
            margin: 8px 0 8px;
            padding: 0px;
        }

        strong {
            color: #697782;
            font-weight: bold;
        }

        p {
            color: #2b2c30;
            margin: 0 0 8px;
            padding: 0px;
        }

    </style>

</head>
    <body>
    </body>
</html>

I'm not using Webview.LoadData, because reading the HTML will require to add it as Asset and not Resource, which I'm not going to do. (localization)

Anyone any idea's how to tackle this?

Upvotes: 1

Views: 720

Answers (1)

frederickd
frederickd

Reputation: 371

Oké. I found a solution after a lot of trial/error.

A lot of online solutions advice to move the files to the Assets folder and read the file content from there because it wasn't clear for a lot on how to read text file info from RAW folders. But I don't want to do this because the Assets folder isn't Localization-aware.

The files with HTML I want to show are Localized

  • /raw/info.html
  • /raw-fr/info.html
  • /raw-nl/info.html

In my previous solution I called the content with 

webView.LoadUrl("file:///android_res/raw/info.html");

Which worked perfectly until Android 7 decided to show the source HTML in the browser. The correct file for the current OS language would be selected in this way. No need to write any Localization handling yourself.

The working solution

Consists of loading the string data from the file and feed it to the WebView via WebView.LoadData().

        //get the Resource ID
        var dd = Resource.Raw.info;
        //read the file content from RAW folder
        var content = LoadFile(dd);
        //feed it to the webclient
        // important: UTF-8 capitalized!
        webView.LoadData(content,  "text/html; charset=UTF-8", "UTF-8");

The LoadFile looks like this

 public string LoadFile(int resourceId)
    {
        //get the file as a stream  
        var inputStream =  Resources.OpenRawResource(resourceId);
        var html = string.Empty;

        using (StreamReader sr = new StreamReader(inputStream))
        {
            html = sr.ReadToEnd();
        }

        return html;
    }

Upvotes: 1

Related Questions