CODEWITHSUNDEEP
androidandroid-layoutandroid-webviewpadding
Dan J
Dan J

Reputation: 25673

How to add padding around a WebView

My layout file defines a WebView, underneath which there are some fixed height buttons. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:fadingEdge="none">

  <WebView
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1.0"/>

  <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="60dp"
    android:padding="8dp">

    <Button
      android:text="Decline"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1.0">
    </Button>

    <Button
      android:text="Accept"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1.0">
    </Button>

  </LinearLayout>
</LinearLayout>

I'm trying to add padding around the WebView, as at the moment the text runs right up to the edge of the UI.

I tried adding android:padding="8dp" to the WebView, but no padding was added. I also tried paddingLeft and paddingRight too, but they didn't work either.

The WebView API docs confirm it inherits from View, which supports the android:padding attribute, so I'm surprised this didn't work.

Does anybody know if this is a known issue, or some interaction of my layout XML that I'm not understanding?

FYI, my workaround was to put an extra LinearLayout around the WebView, and add the padding to that instead: 

  <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1.0"
    android:padding="8dp">

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

  </LinearLayout>

Upvotes: 54

Views: 37798

Answers (8)

Praxder
Praxder

Reputation: 2749

Another, still hacky, workaround I've found is wrapping the WebView in a FrameLayout and adding the padding there. Setting the parent FrameLayout's size to wrap_content isn't good because you then get this warning:

Placing a <WebView> in a parent element that uses a wrap_content layout_height can lead to subtle bugs; use match_parent instead (wrap_content here may not work well with WebView below)

My solution is to wrap the WebView in two FrameLayout's. The immediate parent has size match_parent for width and height. This FrameLayout is wrapped in another FrameLayout that's set to wrap_content for its width and height.

Then you can just change the padding on the immediate parent to the WebView and set its background color to match that of the WebView and it all works.

Again, this isn't a pretty solution (since the best solution would just be to use the android:padding property if it worked), but this solution is still better than injecting HTML tags and modifying the DOM to add content padding to a WebView.

Here's an example of what I'm talking about doing:

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <FrameLayout
            android:paddingBottom="8dp"
            android:paddingHorizontal="12dp"
            android:background="@color/white"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        <WebView
                android:id="@+id/cool_webview_id"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
    </FrameLayout>
</FrameLayout>

Upvotes: 0

Rohan Kandwal
Rohan Kandwal

Reputation: 9326

@Sergii's code didn't work for me, but following does

mWebView.setWebViewClient(new mWebViewClient(){
        @Override
        public void onPageFinished(WebView web, String url) {
            web.loadUrl("javascript:(function(){ document.body.style.paddingTop = '55px'})();");
        }
    });

You can change paddingTop to paddingBottom, paddingRight, paddingLeft too. Change the 55pxvalue to whatever you desire. Additionally, enable JavaScript for your webview

  webView.settings.javaScriptEnabled = true

Upvotes: 2

Voski
Voski

Reputation: 139

Alternative approach would be to set the WebView inside of a ScrollView

Then you can add left/right margin to the WebView and it will get the padding effect. The scrolling however will be handled by the ScrollView.

<ScrollView style="@style/MatchMatch">

    <WebView
        android:id="@+id/my_web_view"
        android:layout_marginLeft="@dimen/webViewMargin"
        android:layout_marginRight="@dimen/webViewMargin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</ScrollView>

This will cause the scrollbar to be placed outside of the WebView which is the behavior I wanted for my app.

Upvotes: 6

Naren
Naren

Reputation: 27

Add a LinearLayout adround it with padding.

Upvotes: 1

Sergii
Sergii

Reputation: 1551

Another workaround for this problem could be in javascript usage. So when your webpage is loaded you can do such js call to set paddings:

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        webView.loadUrl("javascript:document.body.style.margin=\"8%\"; void 0");
    }
});

Upvotes: 33

molu2008
molu2008

Reputation: 1257

Just try to add this CSS:

<body style='margin:X;padding:X;'>

Upvotes: 4

zrgiu
zrgiu

Reputation: 6322

The WebView has a bug in the padding implementation. Setting a padding on a webview won't pad the actual web page, but WILL pad the scrollbars. It's only partially working as expected. Your solution is the best way to achieve 'padding' for a WebView.

Upvotes: 59

JonA
JonA

Reputation: 605

Using padding is NOT workaround here. padding for layout is there for that purpose.

So your 'workaround' is what you should have done.

Upvotes: 0

Related Questions