Android WebView loading blank when viewing html nested lists

Question

I'm trying to load a reasonably sized html nested list into a WebView using Android. The problem is that when I try to load the html, it appears to be blank.

Now I've tried this a couple of different ways. I firstly tried the code within the W3Schools "Try It Yourself" box - W3Schools. From here, once I get to a certain size, it displays an error. So from the code below, if you get rid of the last few Headings, it displays fine up until a particular size.

I've put the html code into a local html file, and all browsers render it fine.

I've placed this file into my assets folder within Android, and tried to load the file into the WebView, and it's the same story. I get to a certain size on the list and it doesn't display anything. I've loaded this using the following code:

wv_content.loadUrl("file:///android_asset/test.html");

I've also loaded the html code directly, and it's the same story. Once it gets to a certain size, it doesn't display anything. I've loaded this html content by using the following code:

wv_content.loadDataWithBaseURL(null, htmlData, "text/html", "utf-8", null);

I've tried replacing the nulls with empty strings, and urls, but still no difference.

So the funny thing is, a local file with the data will render perfectly through the desktop browser. The html content won't render when inputted using the W3Schools Try It Yourself. Android won't display the file or the html content. But yet, on the iOS, the code displays fine.

I'm really stuck to how I can proceed, has anyone any ideas on what the problem is or have come across anything similar?

The following is the html code that I'm using:

<!DOCTYPE html>
<html>
<body>

<ol type='I'>
    <li>Heading 1</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 2</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 3</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 4</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 5</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 6</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 7</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 8</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 9</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 10</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 11</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 12</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 13</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 14</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 15</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

</ol>

</body>
</html>

**W3Schools** does not allow submitting code exceeding a certain length, like 5000, in "Try It Yourself". They just simply check this in JS when you click the **Submit Code** button. So showing "error" in W3Schools does not necessarily mean something wrong in your HTML code. However if you want to validate your HTML code, you can refer to [W3 Validator](http://validator.w3.org/#validate_by_input) — Wei WANG, Mar 27 '14 at 03:31
And by the way I can see the complete HTML page (with Heading 1-15) when I tried **webView.loadUrl("file:///android_asset/test.html")** on my device, running Android 4.1. — Wei WANG, Mar 27 '14 at 03:45
Hi @WeiWANG thanks for your help. I actually found the problem, I was using a custom WebView which automatically set some of the parameters like textsize and background colour when created. One property it was setting was the setLayerType(View.LAYER_TYPE_SOFTWARE, null); if the build version was greater than 11. For some reason, this was causing the text not to be displayed, so I just went back to using a normal WebView and not setting this property. Thanks — Graham Baitson, Mar 28 '14 at 12:27
Hi Graham, I suspect that the library you were using was forcing a software WebView to prevent some bugs that exist in hardware accelerated WebView. Depending on your platform version (some bugs get fixed in newer versions, but new bugs introduced) you may notice flickering or rendering glitches particularly if you start to use more advanced effects like CSS animations/transforms, inline video or Canvas. — ksasq, Mar 31 '14 at 07:30
@WeiWANG it was from your initial comments that helped me solve the problem. I'd like to award the bounty to you but I can only award the bounty to actual comment responses, would you mind adding a response below with something similar to your comments above. Hope that makes sense — Graham Baitson, Apr 02 '14 at 10:38

Manish Srivastava · Answer 1 · 2014-04-09T09:53:42.093

I don't know why you are facing trouble I tried same code and it is working fine please check this-

public class MainActivity extends Activity {

    WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView=(WebView)findViewById(R.id.web);
        webView.loadUrl("file:///android_asset/test.html");

    }

}

And this is the attached screenshot-

screen shot

score 1 · Answer 2 · answered Apr 02 '14 at 07:57

Please see the below written code and find the output....

public class MainActivity extends Activity {

    private WebView webview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webview = (WebView)findViewById(R.id.webview);
        webview.getSettings().setJavaScriptEnabled(true);
        webview.loadUrl("file:///android_asset/test.html");
    }
}

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

<!DOCTYPE html>
<html>
<body>

<ol type='I'>
    <li>Heading 1</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 2</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 3</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 4</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 5</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 6</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 7</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 8</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 9</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 10</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 11</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 12</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 13</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 14</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 15</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

</ol>

</body>
</html>

score 1 · Accepted Answer · answered Apr 03 '14 at 02:53

(Rewriting this post as per @Graham's request, hoping it could help summarize the issue, and also in order to get the bounty. :)) )

Since the title is about HTML nested lists, we first need to make sure the HTML source itself is correct, so I checked that both with W3Schools and Android stock Browser.

W3Schools does not allow submitting code exceeding a certain length, like 5000, in "Try It Yourself". They just simply check this in JS when you click the Submit Code button. So showing "error" in W3Schools does not necessarily mean something wrong in your HTML code. Moreover if you want to validate your HTML code, you can refer to W3 Validator.
The sample HTML page works fine on my device using Android stock Browser. If you print the DOM tree and render tree from webkit engine then you will also find them both correct.

Then finally @Graham identify the problem, which relates to Android HW acceleration configuration:

setLayerType(View.LAYER_TYPE_SOFTWARE, null);

Regarding this topic there's a very detailed explanation in Android Doc, just as @ZalaJanaksinh indicated in another post.

Hope that helps...

score 1 · Answer 4 · answered Jun 04 '15 at 18:10

I had the same issue - I could even see chromium javascript console output in logcat. It turns out the layout was the issue.

I used the layout designer to drag a webview into my activity and it automatically added this to the layouts xml file:

<WebView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/webView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

I was looking at Manish Srivastava's post and saw that their webview layout was different. I changed mine to:

<WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView" />

and everything worked great. I hope this helps somebody in the future!

score 0 · Answer 5 · edited May 23 '17 at 11:48

This is the problem device to render the html text. This is same problem occur when user load big image (size) from sdcard etc. Nothing change in your code just add the following property in Android manifest file.

android:hardwareAccelerated="false"

By Default it's true. In developer community very strong debate about to use android:hardwareAccelerated or not!! Check this link-- How to use the android:hardwareAccelerated.How To Use. Another thing link Use or Not

Android WebView loading blank when viewing html nested lists

5 Answers5

Linked