Remove unwanted White Space in WebView Android

Question

I have started developing an App using WebView. Actually I am loading an Image with Webview (I like to use the built-in zoom controls of the class). I can successfully load the Image but I can see some irritating white spaces. I can't find the way to remove it. My Images are 750 * 1000 in size. I have attached my code below.

webview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
    <WebView
        android:id="@+id/webView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

ImageViewer.java

package com.android.test;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class ImageViewer extends Activity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);

        String loadUrl = "file:///android_res/drawable/splash_001.jpg";

        WebView image = (WebView) findViewById(R.id.webView);
        image.clearView();
        image.clearCache(true);
        image.getSettings().setBuiltInZoomControls(true);
        image.getSettings().setSupportZoom(true);
        image.getSettings().setLoadWithOverviewMode(true);
        image.getSettings().setUseWideViewPort(true);
        image.loadUrl(loadUrl);
    }

}

What are the dimensions of the phone/tab that you are using for testing ? — Alok Kulkarni, Jan 01 '12 at 17:17
Hi. have you got any solution on this. I am here struck in the same issue. Can you help me out — Andro Selva, Jan 05 '12 at 06:21

score 71 · Answer 1 · answered Jan 02 '12 at 10:08

71

By default webview has some margin/padding in body. If you want to remove that padding/margin then override body tag and add margin like:

<body style="margin: 0; padding: 0">

answered Jan 02 '12 at 10:08

Sandy

6,285
15
65
93

Yep, that did it for me. Got to make sure BOTH the margin and padding are 0. – Richard Feb 10 '12 at 20:05
@John: Your HTML may have some other margin/padding. Please look into you HTML – Sandy Jul 04 '14 at 05:37
It was the SCROLLBAR_INSIDE_OVERLAY problem. Solved using Ben's solution: `webview.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY)`. – John Smith Optional Jul 04 '14 at 15:11
1

but how to apply this style to webview, please help – Shirish Herwade Jan 29 '15 at 12:04
1

for how to apply it to the web view: String what = ""; mWebView.loadDataWithBaseURL("", what, "text/html", "UTF-8", ""); – Barrie Galitzky Jan 11 '16 at 20:31
A somewhat clearer example. You could pass the following string to the WebView's `loadData` method: "" + YOU HTML HERE + "" – Kirill Starostin Jul 22 '19 at 08:17

score 21 · Answer 2 · edited Sep 23 '15 at 20:44

21

If the white space you're talking about is on the right side, you can add this to the webview.

mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

That should make the white space go away, provided it's on the right side where the scroll bar would be.

edited Sep 23 '15 at 20:44

Faisal Abid

8,900
14
59
91

answered Jan 06 '12 at 22:59

Ben

758
1
8
19

THx, that did work for me. Apparently if you content is bigger than you webview, and so need a scroll view, the scroll view is by default no over the content. So it need it space on the right edge of the webview – Thomas Besnehard Apr 30 '13 at 09:09
1

Just to add `image` is an instance of `WebView` in case anyone wondered – donturner Dec 19 '13 at 21:42
As simple as that... working and reworking on a project for almost 6 months now and this issue pops up often and I never thought it would get solved by a simple command like this... THANK YOU!!! – Maneksh Veetinal Dec 31 '13 at 10:29
Ben You rock ::::::: Thank you soo much – Jigar Oct 14 '14 at 13:29

score 20 · Answer 3 · answered Oct 12 '12 at 14:51

20

By Defualt HTML web pages have a padding and margin of 10px; You have to set in your head section or or css file:

<style type="text/css">
html, body {
width:100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>

That did the trick for me.

answered Oct 12 '12 at 14:51

Blake Loizides

985
2
20
43

but how to apply this style to webview, please help – Shirish Herwade Jan 29 '15 at 12:03
1

@ShirishHerwade . You need to modify the html that you call into your webview. – Blake Loizides Jan 30 '15 at 07:38
actually I don't call any html, I use .loadUrl(String) to show an image – Shirish Herwade Jan 30 '15 at 10:18
Thanks! The complete string you'd pass to WebView's `loadData` could be: "" + YOUR HTML HERE + "" – Kirill Starostin Jul 22 '19 at 08:12
2

What the Op is talking about is webView issues! Answers are about html. What if we are using somw others web page? Or whatever we are loading how we can control the html? – Padmanabhan Aug 08 '20 at 05:27

score 8 · Answer 4 · answered Nov 07 '14 at 04:53

I had irritating white space bordering the rendered HTML content in my WebView (no images in that content though). At first I thought it was related to CSS issues as mentioned above. But by using a style sheet to change the background for HTML, BODY, etc. it looked more and more like padding around the WebView.

user3241873 shows above how to adjust the padding on the WebView itself, but what I found was when the default Android application created by Eclipse generated the layout file (RelativeLayout "container" rather than "LinearLayout"), it added these attributes to the RelativeLayout:

android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"

If you look up those padding values in res/values/dimens.xml, you'll see that they're set to 16dp. When I changed to 0dp, it removed the unsightly white space :)

If someone replaces the default (Hello World) TextView with a WebView, the padding for the parent RelativeLayout sticks around like an obnoxious relative in the house.

score 3 · Answer 5 · edited Nov 18 '14 at 05:12

3

Use WebView's setScrollBarStyle method and provide parameter as View.SCROLLBARS_INSIDE_OVERLAY.

edited Nov 18 '14 at 05:12

Pratik Butani

60,504
58
273
437

answered Aug 13 '12 at 06:48

Aniruddh Ambarkar

1,030
1
11
20

score 3 · Answer 6 · answered Jun 27 '13 at 22:09

This is an example that you can test that uses a html template, then you can replace the "body" text with whatever you would like... in your case, the html for an image. You can use the css to style the html as needed. Hope this helps you understand more how to use local assets. Post a comment if you need more help.

One key line to not miss is <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,target-densityDpi=device-dpi" />

Use this as a template: (assets/template.html)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,target-densityDpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
[CONTENT]
</body>
</html>

Use css like this: (assets/style.css)

@font-face {
  font-family: Roboto;
  src: url(file:///android_asset/fonts/Roboto.ttf);
}

html, div {
    margin: 0;
    padding: 0;
}

body {
    font-family: Roboto;
    font-size: 1.0em;
    color: rgb(61,61,61);
    text-align: left;
    position:relative;
    padding: 40px;
    background-color: #eeeeee;
}

Then in your WebView class: (your class that extends WebView)

public void setText(CharSequence text, int color){

       try {

           InputStream is = getResources().getAssets().open("article_view.html");
           int size = is.available();
           byte[] buffer = new byte[size];
           is.read(buffer);
           is.close();

           loadDataWithBaseURL("file:///android_asset/",
               new String(buffer).replace("[CONTENT]", text.toString()),
               "text/html", "UTF-8", null);

       } catch (IOException e) {
           e.printStackTrace();
       }

}

score 1 · Answer 7 · answered Jul 19 '15 at 00:52

I had this [this is my activity.xml]

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

I just deleted the padding in the relativeLayout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" 
tools:context=".MainActivity">

I tried all the solutions above but they didn't go very well for me. this one worked for me.

score 0 · Answer 8 · answered Jan 27 '14 at 19:35

0

Set the padding in your webview.xml to 0dp

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<WebView
    android:id="@+id/webView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="0dp"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="0dp" />

answered Jan 27 '14 at 19:35

user3241873

1

There is `android:padding` property, no need to specify them all separately. And, btw removing all the padding properties will have the same effect as setting them to 0dp. – ccpizza Dec 05 '15 at 10:12

score 0 · Answer 9 · answered Dec 11 '15 at 04:01

I already got it .

here my logic code, When the application open the website you must get the size of your webview then set it on height

here my code

 ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) webpage.getLayoutParams();
        p.height = webpage.getHeight();
        Log.e(" webpage.getHeight()", String.valueOf(webpage.getHeight()));
        webpage.setLayoutParams(p);

Hope you will take my code and my answer to :) works on any devices even tabs too :)

score 0 · Answer 10 · answered Mar 09 '17 at 06:53

My case, top of my webview has big padding. So, set scrollbarSize="0dp". In AS 2.2.3

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

<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView"
android:scrollbarSize="0dp"
/>

score 0 · Answer 11 · answered Jul 21 '21 at 15:26

Kotlin Answer

For example, I removed space between iFrame and WebView in this way:

val url = "www.stackoverflow.com"

val iframeExample = "<html><body style=\"margin: 0; padding: 0\"><iframe width=\"100%\" src=\"$url\" frameborder=\"0\" allowfullscreen></iframe></body></html>"

webView.loadData(iframeExample, "text/html", "utf-8")

score 0 · Answer 12 · answered Jan 01 '12 at 17:16

0

i don't really know which whitespace you are referring to ( maybe the image has padding or so), but usually if you have any layout issues in a WebView you would try to fix them by providing a proper (inline) css-stylesheet.

answered Jan 01 '12 at 17:16

P.Melch

8,066
43
40

Remove unwanted White Space in WebView Android

12 Answers12

Linked