Android: WebView load image in center

Question

I want to load an image at the web view, but it shows all at top_left of the web view. My picture is on the internet not local.

gifView.loadUrl(mImageUrl); 
gifView.setWebViewClient(new WebViewClient() {

        @Override
        public void onPageFinished(WebView view, String url) {
            view.getSettings().setLoadsImagesAutomatically(true);
            if (mProgressBar != null) {
                mProgressBar.setVisibility(View.GONE);
            }
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            if (mProgressBar != null) {
                mProgressBar.setVisibility(View.VISIBLE);
            }
        }

    });

Here is my xml:::

  <WebView
                     android:id="@+id/gif_image"
                     android:background="@null"
                     android:layout_gravity="center"

                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" />

Edit:i used:

   String HTML_FORMAT = "<html><body style=\"text-align: center; background-color: null; vertical-align: middle;\"><img src = \"%s\" /></body></html>";

         final String html = String.format(HTML_FORMAT, mImageUrl);

         gifView.loadDataWithBaseURL("", html, "text/html", "UTF-8", "");

but my image only Horizontal Center，how to center

score 12 · Answer 1 · answered Sep 04 '12 at 10:52

12

Try this.

myWebView.loadData("<html><head><style type='text/css'>body{margin:auto auto;text-align:center;} img{width:100%25;} </style></head><body><img src='www.mysite.com/myimg.jpeg'/></body></html>" ,"text/html",  "UTF-8");

answered Sep 04 '12 at 10:52

Chirag

56,621
29
151
198

my url is a variable，can you help me again – pengwang Sep 05 '12 at 01:18
should be Accepted Answer. – Volodymyr Kulyk Apr 23 '16 at 07:56

Khalil Kitar · Answer 2 · 2016-01-01T20:20:32.923

I did it by using some code and xml :

<WebView            android:id="@+id/webview"
                    android:layout_width="fill_parent"
                    android:layout_height="251dp"
                    android:layout_below="@+id/download"
                    android:layout_marginTop="20dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"/>

and this (for horizental center) :

WebView loading = (WebView)rootView.findViewById(R.id.webview);
                                loading.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
                                loading.loadDataWithBaseURL("file:///android_asset/", "<html><center><img src=\"done.png\"></html>", "text/html", "utf-8", "");

Or this for (horizontal & vertical center) :

WebView loading = (WebView)rootView.findViewById(R.id.webview);
                            loading.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
                            loading.loadDataWithBaseURL("file:///android_asset/", "<html>\n" +
                                    "<body bgcolor=\"white\">\n" +
                                    "    <table width=\"100%\" height=\"100%\">\n" +
                                    "        <tr>\n" +
                                    "            <td align=\"center\" valign=\"center\">\n" +
                                    "                <img src=\"loading.gif\">\n" +
                                    "            </td>\n" +
                                    "        </tr>\n" +
                                    "    </table>\n" +
                                    "</body>", "text/html", "utf-8", "");

score 2 · Answer 3 · edited May 03 '13 at 07:54

2

Try something like this:

Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();

String data = "<body><center><img width=\"" + width + "\" src=\"" + url
              + "\" /></center></body></html>";
webview.loadData(data, "text/html", null);

edited May 03 '13 at 07:54

Ofir Farchy

7,657
7
38
58

answered May 03 '13 at 07:34

Shah

92
7

score 1 · Accepted Answer · edited Sep 06 '13 at 09:29

1

Try this, this will make the content fit to your webview

WebView web = (WebView) findViewById(R.id.gif_image);
web.getSettings().setDefaultZoom(ZoomDensity.FAR);

edited Sep 06 '13 at 09:29

Shankar Narayana Damodaran

68,075
43
96
126

answered Feb 11 '13 at 03:57

Amalan Dhananjayan

2,277
1
34
47

score 0 · Answer 5 · answered Sep 04 '12 at 10:53

0

Do you use Linear layout? So you will require to use the gravity property of the parent linear layout. A good explanation of gravity in android: http://sandipchitale.blogspot.com/2010/05/linearlayout-gravity-and-layoutgravity.html

answered Sep 04 '12 at 10:53

Mo Al Sh

63
1
7

score 0 · Answer 6 · answered Aug 25 '20 at 12:02

The reason is not in the webview, it is the html code. W3c wants that "text-align" should no longer take effekt on block elements like images.

You can read more at center-image-using-text-align-center

So either you make your image display:inline or you center it in a different way e.g.

.center {
  left: 50%;
  margin-left: -50%;
}

Android: WebView load image in center

6 Answers6