Android webview content exceed the webview

Question

There is a webview I disabled the scrolling. And it is equal to the width of the android phone screen size.

The problem is the content in the webview is not auto resize but display outside of the webview (as I disable the scrolling, but the webview size is not "exactly" the screen width) , you may have a look at screenshot

I already add

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'>

and

    newsContent.getSettings().setUseWideViewPort(true);
    newsContent.getSettings().setLoadWithOverviewMode(true);

but still not work. Thanks.

enter image description here

Webview XML:

        <WebView
            android:id="@+id/newsContent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="5dp"
            android:background="#ffffff" />

Webview JAVA:

    StringBuilder sb = new StringBuilder();
    sb.append("<HTML><HEAD><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'><LINK href=\"news.css\" type=\"text/css\" rel=\"stylesheet\"/><script src=\"jquery-1.10.2.js\" type=\"text/javascript\"></script></HEAD><body>");
    sb.append(newsItem.description.toString());
    sb.append("<script>$('img').on('click', function() {app.zoom($(this).attr('src'));});</script></body></HTML>");

    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN){
        newsContent.getSettings().setAllowUniversalAccessFromFileURLs(true);
        newsContent.getSettings().setAllowFileAccessFromFileURLs(true);
    }

    newsContent.setWebChromeClient(new WebChromeClient());
    newsContent.setWebViewClient(new WebViewClient());

    newsContent.getSettings().setUseWideViewPort(true);
    newsContent.getSettings().setLoadWithOverviewMode(true);

    newsContent.getSettings().setJavaScriptEnabled(true);
    newsContent.addJavascriptInterface(new WebViewJavaScriptInterface(), "app");

    newsContent.loadDataWithBaseURL("file:///android_asset/", sb.toString(), "text/html", "utf-8", null);

    newsContent.setOnTouchListener(new View.OnTouchListener() {
        public boolean onTouch(View v, MotionEvent event) {
          return (event.getAction() == MotionEvent.ACTION_MOVE);
        }
    });

    newsContent.setVerticalScrollBarEnabled(false);
    newsContent.setHorizontalScrollBarEnabled(false);

View too large to fit into drawing cache, needs 7890400 bytes, only 3686400 available — user782104, Sep 26 '14 at 09:27
You can try if [this](http://stackoverflow.com/a/3916700/1777090) works for you. — MysticMagicϡ, Sep 26 '14 at 09:33
thanks. it work for the image , but the text does not auto fit and create next line — user782104, Sep 26 '14 at 09:46

NukeouT · Accepted Answer · 2014-10-05T17:42:47.450

You seem to be doing something exceptional because I implemented a webview with no issues, as one of my first android projects a month ago.

check xml height, width and layout type above webview
check that the URL site itself is not setup to do something funky. webview may be correct. I suggest retargeitng your webview to some site that you know works to test, like my Tumblr blog URL http://sprocketblog.tumblr.com

XML

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context=".HomeFeed"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

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

JAVA

public class NewsFeed extends Activity {

private WebView mWebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_home_feed);

    mWebView = (WebView) this.findViewById(R.id.webview);
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.loadUrl("http://sprocketblog.tumblr.com");
    mWebView.setWebViewClient(new TumblrWebViewClient());

    if (savedInstanceState == null)
}

//Keeps user in webview on multiple taps without shooting off to Chrome
private class TumblrWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView webview, String url) {
        webview.loadUrl(url);
        return true;
    }
//On error shows HTML resource
    @Override
    public void onReceivedError (WebView view, int errorCode, String description, String failingUrl) {
        mWebView.loadUrl("file:///android_asset/networkerror.html");
    }


}

//Binds OS back button to webview
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // Check if the key event was the Back button and if there's history
    if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
        mWebView.goBack();
        return true;
    }
    // If it wasn't the Back key or there's no web page history, bubble up to the default
    // system behavior (probably exit the activity)
    return super.onKeyDown(keyCode, event);
}

}

score -1 · Answer 2 · answered Sep 26 '14 at 09:31

-1

Use android:layout_width="wrap_content" in your XML layout

answered Sep 26 '14 at 09:31

Stefano

389
2
15

Thanks for your answer. would you mind be more specific? set to the parent layout / webview / other layout ? – user782104 Sep 26 '14 at 09:32
Why a down-vote without any comment to explain the REASON? I think this behavior is really useless in a community. – Stefano Sep 26 '14 at 09:37
Yes. Any answer should be appericate, I upvote for your effort though it doesn't work – user782104 Sep 26 '14 at 09:45

Android webview content exceed the webview

2 Answers2