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>

Try margins instead of padding- I think that is what you want. Padding doesnt really make sense for a WebView imo — AJcodez, Feb 07 '12 at 02:12
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? — Dan J, Feb 07 '12 at 02:47
It does look like your layout_weight is set up incorrectly. Why give the buttons layout_weight if they are wrap_content? — AJcodez, Feb 07 '12 at 17:51
@DanJ there is something fundamentally wrong with android designers i tell you that — Ofek Ron, Jan 03 '14 at 23:24

score 52 · Accepted Answer · answered Feb 07 '12 at 04:20

52

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.

answered Feb 07 '12 at 04:20

zrgiu

6,200
1
33
35

1

Do you know if setting layout_marginRight and layout_marginLeft for the WebView should work? – Dan J Feb 08 '12 at 20:00
Is this still a case? Or it's been fixed and there's a way to add padding now? (without css/javascript solutions). – wtk Sep 23 '15 at 08:33
You can also check my answer - a workaround via javascript http://stackoverflow.com/questions/9170042/how-to-add-padding-around-a-webview/28411563#28411563 – Sergii Dec 13 '15 at 13:27
7

6 years still a bug – dungtv May 08 '18 at 03:43
3

7 years still a bug – Acauã Pitta Jan 29 '19 at 16:43
1

7 1/3 years, still a bug – Benjamin Basmaci Jun 17 '19 at 11:11
8 years still a bug – Jeremy Stucki Jan 28 '20 at 11:47
8 years still a bug – Aminul Haque Aome Jul 23 '20 at 04:32
3

9 years still a bug after 4 days – inhogo Dec 28 '20 at 01:46
7

10 years anniversary, yay! – WindRider Oct 04 '22 at 13:34
11 years, this kid will go to college real soon! – Artur Matsehor Feb 27 '23 at 14:57
4

12 years still a bug – X3Btel Apr 25 '23 at 12:52

Sergii · Answer 2 · 2015-02-09T14:42:18.473

32

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

edited Feb 09 '15 at 14:42

answered Feb 09 '15 at 14:03

Sergii

1,521
3
24
37

Plus one for "void 0". Without that the javascript is not ran. – m_katsifarakis Jul 10 '16 at 09:43
Doesn't work, nothing happens. The line is executed. – User Apr 23 '18 at 18:22
If this line does not work in setting the padding, make sure your `WebView` settings has enabled javascript: ``` webview.settings.javaScriptEnabled = true ``` – trod Dec 02 '21 at 16:41

score 6 · Answer 3 · answered Jun 24 '16 at 20:58

6

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.

answered Jun 24 '16 at 20:58

Voski

139
2
4

1

Why scrollview? A simple FrameLayout would just work and you won't have to care about the possible nested scrolling issues. – Ian Wong Mar 02 '17 at 01:33
1

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. – Voski Mar 03 '17 at 00:16
1

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. – Richard Le Mesurier Mar 01 '18 at 06:30
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. – Richard Le Mesurier Mar 01 '18 at 06:43
1

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! – coyer Aug 01 '19 at 15:00

score 4 · Answer 4 · answered Jun 13 '14 at 12:08

4

Just try to add this CSS:

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

answered Jun 13 '14 at 12:08

molu2008

1,237
2
15
20

2

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`. – Xaver Kapeller Jun 13 '14 at 13:00
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. – Srikar Reddy Apr 20 '17 at 06:24

score 1 · Answer 5 · answered Jan 23 '16 at 16:26

1

Add a LinearLayout adround it with padding.

answered Jan 23 '16 at 16:26

Naren

27
1

it causes that the text scrolls inside the padding – Sepideh Vatankhah May 24 '23 at 14:39

score 1 · Answer 6 · answered Feb 21 '19 at 08:45

1

@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

answered Feb 21 '19 at 08:45

Rohan Kandwal

9,112
8
74
107

1

Does not work as expected because the padding will be scaled alongside the content on zoom. – coyer Aug 01 '19 at 15:02
paddingLef and paddingRight didn't work for me. Use padding-left and padding-right – Pavel Shirokov Dec 04 '20 at 07:59

score 0 · Answer 7 · answered Feb 16 '22 at 17:07

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>

score 0 · Answer 8 · answered Feb 07 '12 at 02:54

0

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

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

answered Feb 07 '12 at 02:54

JonA

605
6
6

Are you saying the android:padding value cannot be set on a WebView? – Dan J Feb 07 '12 at 03:19
If you look at the source code of TextView.java, it considers padding in onDraw(). But WebView.java does not. That will explain why. – JonA Feb 07 '12 at 04:49

How to add padding around a WebView

8 Answers8

Linked