How to add padding around a WebView

Question

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>

Hive

Try margins instead of padding- I think that is what you want. Padding doesnt really make sense for a WebView imo – Weslee

Good idea, however I just tried setting layout_marginRight and layout_marginLeft on the WebView in my original XML, and it resulted in the buttons underneath not being shown. I wonder if there is something fundamentally wrong why my layout? – Hive

It does look like your layout_weight is set up incorrectly. Why give the buttons layout_weight if they are wrap_content? – Weslee

@DanJ there is something fundamentally wrong with android designers i tell you that – Headreach

Answer 1

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.

Bedmate

Do you know if setting layout_marginRight and layout_marginLeft for the WebView should work? – Hive

Is this still a case? Or it's been fixed and there's a way to add padding now? (without css/javascript solutions). – Correctitude

You can also check my answer - a workaround via javascript #9170542 – Porphyria

6 years still a bug – Equalitarian

7 years still a bug – Submarine

7 1/3 years, still a bug – Lasso

8 years still a bug – Trooper

8 years still a bug – Latif

9 years still a bug after 4 days – Astera

10 years anniversary, yay! – Semiramis

11 years, this kid will go to college real soon! – Grounder

12 years still a bug – Dermoid

13 years still a bug – Intrude

Answer 2

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");
    }
});

Porphyria

Plus one for "void 0". Without that the javascript is not ran. – Upholster

Doesn't work, nothing happens. The line is executed. – Gain

If this line does not work in setting the padding, make sure your WebView settings has enabled javascript: ``` webview.settings.javaScriptEnabled = true ``` – Metrics

Answer 3

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.

Mello

Why scrollview? A simple FrameLayout would just work and you won't have to care about the possible nested scrolling issues. – Labrum

I chose the ScrollView because I wanted the scrollbar to be against the edge of the ScrollView. If I were to use a FrameLayout the scrollbar will be against the inner webview. – Mello

This is the best way to create the same visual effect. The margin approach results in scrolling behaviour that just looks wrong. However a better approach these days may be to use NestedScrollView instead. – Jeopardy

If "gaps" are needed at the top and bottom as well, then I would do that with top & bottom padding to the NestedScrollView. This gives a better effect than top & bottom margins on the WebView. But for left & right, the margins work better this way than the padding would. – Jeopardy

This should be the accepted answer as it works as expected. I came to the same solution and it works also when content will be scaled whereas all JavaScript-Solutions not! – Derbyshire

Answer 4

Just try to add this CSS:

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

Randolphrandom

I don't think that this answer is relevant to the question. While I understand that it might actually work, the question is about an Android layouting issue and not about the html content displayed in the WebView. – Amiamiable

Thanks for the solution. This is a better way to add padding to the web view since the traditional one doesn't work on the content. – Rehabilitation

Answer 5

Add a LinearLayout adround it with padding.

Cattima

it causes that the text scrolls inside the padding – Claudy

Answer 6

@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

Dennie

Does not work as expected because the padding will be scaled alongside the content on zoom. – Derbyshire

paddingLef and paddingRight didn't work for me. Use padding-left and padding-right – Hermes

Answer 7

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

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

Sphygmic

Are you saying the android:padding value cannot be set on a WebView? – Hive

If you look at the source code of TextView.java, it considers padding in onDraw(). But WebView.java does not. That will explain why. – Sphygmic

Answer 8

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>

Landslide