Remove unwanted White Space in WebView Android

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

}

标签： android image android-webview padding space

11条回答

欢心

2楼-- · 2020-01-28 03:36

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.

0人赞添加讨论(0) 举报

相关推荐>>

3楼-- · 2020-01-28 03:38

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" />

0人赞添加讨论(0) 举报

Viruses.

4楼-- · 2020-01-28 03:39

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.

0人赞添加讨论(0) 举报

地球回转人心会变

5楼-- · 2020-01-28 03:40

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

}

0人赞添加讨论(0) 举报

SAY GOODBYE

6楼-- · 2020-01-28 03:42

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.

0人赞添加讨论(0) 举报

别忘想泡老子

7楼-- · 2020-01-28 03:46

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">

0人赞添加讨论(0) 举报

1 2 下一页

Remove unwanted White Space in WebView Android

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间