Display complex Html text in android like gmail

Question

Hi i have to display html text with its style property, i tried both textview and webview .

when i use textview with Html.fromHtml("html text ") its showing only text without html style and other hand

when i use webview the whole content display in single line with horizontal scroll view

Using texview

using webview

But its working well in gmaill android app

My code is for text view

var text = "<p style=\"margin: 0px 0px 1em; padding: 0px; border: 0px; font-size: 15px; clear: both; color: rgb(34, 34, 34); font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; line-height: 19.5px; background-color: rgb(255, 255, 255);\">The main code is:</p><pre class=\"default prettyprint prettyprinted\" style=\"margin-top: 0px; padding: 5px; border: 0px; overflow: auto; width: auto; max-height: 600px; font-family: Consolas, Menlo, Monaco, \'Lucida Console\', \'Liberation Mono\', \'DejaVu Sans Mono\', \'Bitstream Vera Sans Mono\', \'Courier New\', monospace, sans-serif; color: rgb(57, 51, 24); word-wrap: normal; background-color: rgb(238, 238, 238);\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-family: Consolas, Menlo, Monaco, \'Lucida Console\', \'Liberation Mono\', \'DejaVu Sans Mono\', \'Bitstream Vera Sans Mono\', \'Courier New\', monospace, sans-serif; white-space: inherit;\"><span class=\"com\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(128, 128, 128);\">// Use WideViewport and Zoom out if there is no viewport defined</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\nsettings</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">setUseWideViewPort</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">(</span><span class=\"kwd\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 139);\">true</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">);</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\nsettings</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">setLoadWithOverviewMode</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">(</span><span class=\"kwd\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 139);\">true</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">);</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\n\nsettings</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">setLayoutAlgorithm</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">(</span><span class=\"typ\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(43, 145, 175);\">LayoutAlgorithm</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">TEXT_AUTOSIZING</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">);</span></code></pre><p style=\"margin: 0px 0px 1em; padding: 0px; border: 0px; font-size: 15px; clear: both; color: rgb(34, 34, 34); font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; line-height: 19.5px; background-color: rgb(255, 255, 255);\">The other option is to enable pinch zoom:</p><pre class=\"default prettyprint prettyprinted\" style=\"margin-top: 0px; padding: 5px; border: 0px; overflow: auto; width: auto; max-height: 600px; font-family: Consolas, Menlo, Monaco, \'Lucida Console\', \'Liberation Mono\', \'DejaVu Sans Mono\', \'Bitstream Vera Sans Mono\', \'Courier New\', monospace, sans-serif; color: rgb(57, 51, 24); word-wrap: normal; background-color: rgb(238, 238, 238);\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-family: Consolas, Menlo, Monaco, \'Lucida Console\', \'Liberation Mono\', \'DejaVu Sans Mono\', \'Bitstream Vera Sans Mono\', \'Courier New\', monospace, sans-serif; white-space: inherit;\"><span class=\"com\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(128, 128, 128);\">// Enable pinch to zoom without the zoom buttons</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\nsettings</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">setBuiltInZoomControls</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">(</span><span class=\"kwd\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 139);\">true</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">);</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\n\n</span><span class=\"kwd\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 139);\">if</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">(</span><span class=\"typ\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(43, 145, 175);\">Build</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">VERSION</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">SDK_INT </span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">&gt;</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\"> </span><span class=\"typ\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(43, 145, 175);\">Build</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">VERSION_CODES</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">HONEYCOMB</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">)</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\"> </span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">{</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\n    </span><span class=\"com\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(128, 128, 128);\">// Hide the zoom controls for HONEYCOMB+</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\n    settings</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">setDisplayZoomControls</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">(</span><span class=\"kwd\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 139);\">false</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">);</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\n</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">}</span></code></pre> "

set text for textview

var textView = FindViewById<TextView>(Resource.Id.mywebtext);
textView.TextFormatted = Html.FromHtml(text);

webview is

WebSettings settings = webView.Settings;
       //        webView.SetBackgroundColor(Android.Graphics.Color.ParseColor("#123456"));
        settings.UseWideViewPort = false;
        settings.LoadWithOverviewMode = false;
        settings.SetLayoutAlgorithm(WebSettings.LayoutAlgorithm.NarrowColumns);
        webView.LoadData(text, "text/html", "utf-8");

Answer 1

WebView webview = (WebView)this.findViewById(R.id.webview);


String html = "<html><head><title>TITLE!!!</title></head>";
html += "<body><h1>text header</h1></body></html>";


webview.loadDataWithBaseURL(filePath, html, "text/html", "UTF-8", null);

if there is no filePath:

webview.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null);