WebView in ScrollView: "View too large to fit into drawing cache" - how to rework layout?

Question

I have a layout with a ScrollView, which contains the following views: ImageView, TextView, WebView, TextView. (This is because I would like to scroll the whole together, not just the contents of the WebView)

After loading some HTML in the WebView, I receive the following:

WARN/View(632): View too large to fit into drawing cache, needs 14236800 bytes, only 1536000 available

...and the content of the WebView won't display. After removing the ScrollView, the warning disappears and all is well, except that I lose the wanted scroll functionality.

First: I know that trying to use a ScrollView inside another ScrollView is a bad thing in general, but I'm not 100% sure that in every case there's an equivalent solution without using ScrollView... I mean, of course one could put contents of ImageViews and TextViews into the WebView, but what about Buttons or any other UI elements needing interaction? Is there a way in general which could solve issues like this without giving up the layout and scrolling everything at once?

I've found out that I'm not the only one with this issue. For other examples, check those questions - without working solution yet:

• WebView and GridView into ScrollView, View too large to fit into drawing cache
• Android - View too large to fit into drawing cache

Answer 1

webView.setLayerType(WebView.LAYER_TYPE_NONE, null);

worked for me. Depending on the hardware, there is no memory left for an additional off-screen buffer as the WebView is rendered entirely when embedded in another scroll view.

I consider it a bug in Android that it is not automatically falling back to this (slower, but working) option.

Answer 2

The problem appears to be associated with hardware acceleration which is enabled by default if the API level is >= 14.

I have an app with a ScrollView that contains a number of views that I want to scroll as a single unit similar to the original poster - one of those views is a web view that wraps its content. If hardware acceleration is on and the rendered WebView is at all complex (images, borders, etc) then the drawing cache error message can be seen in LogCat. Some screen with 12 items worked while the next screen with 13 items did not work. I don't think that its the number of items that makes a difference, but the complexity of the final rendered screen.

The symptoms are typically a blank WebView - the other views are visually present and full formed. Very occasionally I see the whole screen blank, but that may have been while I was futzing with various suggestions found here on SO.

The message is not always seen. For example, I see the issue on a Samsung Galaxy 4 Mini running 4.2.2, while on other 4.x devices such as my cheap Chinese Samsung S3 clone running 4.1.2 everything is fine. I've not seen it on any 1.x or 2.x devices.

I tried to selectively turn off hardware acceleration on various views and layouts in the view hierarchy but in the end just turned of hardware acceleration for the whole app in the manifest file out of frustration and seeing how many hours I've wasted tracking this down.

After turning off hardware acceleration all issues have gone away. I see no noticeable performance differences on any of my devices. Presumably the 1.x and 2.x devices never used hardware acceleration in the first place, and my 4.x devices must be fast enough to cope with software only rendering. Not that my screens are that complicated.

Update APRIL 2015

Unfortunately the warning message is back on the Samsung Galaxy 4 Mini now running 4.4.2 even with hardware acceleration turned off. I have a webview with a JavaScript panel open/close animation. Everything works fine except that the initial layout (panel open) raises these warnings, and everytime I close or open the panel I also get them. These warnings are now just annoying, the app works fine.

Answer 3

As the other answers stated, the issue appears when hardware acceleration is active. But turning off hardware acceleration for the whole app was no solution for me.

I figured I could solve the problem by setting android:layerType="software" to the ScrollView, which just disables the hardware acceleration for the ScrollView and its contents.

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layerType="software">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            ...
        </FrameLayout>

        <WebView
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>

</ScrollView>

Note that this may have negative performance implications, since rendering in software is usually slower.