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);
}
}
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">
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.
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.
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.
Use WebView's setScrollBarStyle method and provide parameter as View.SCROLLBARS_INSIDE_OVERLAY.
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();
}
}
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.
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.
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" />
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 :)
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"
/>
来源：https://stackoverflow.com/questions/8694184/remove-unwanted-white-space-in-webview-android