3

I've been working on programming a basic webcomic app lately and have been having issues with how webview is displaying the comics. The images themselves load fine, however there is always excess whitespace above or to the side of the image, with the image always being positioned at the top left corner of the webview. Also, typically the webview is zoomed into the image a certain degree, which is a problem as the comics vary in dimensions.

I would like to have the image load so that it is centered, adjusted based on height or width (whichever is appropriate) so that the entire image is visible, and if possible eliminate the whitespace. Unfortunately I cannot provide any screenshots of the problem because for whatever reason none of the emulators can run the app.

As far as code goes I have just the following:

    <WebView
    android:id="@+id/webView1"
    android:layout_width="wrap_content"
    android:layout_height="300dp"
    android:layout_below="@+id/textView1"
    android:layout_gravity="center"
    android:layout_centerHorizontal="true" />

In the class my code is as such with image being a string that contains the image URL which I pulled from the page's HTML:

        WebView myWebView = (WebView) findViewById(R.id.webView1);
    myWebView.loadUrl(image);
CheeseCoder
  • 701
  • 1
  • 7
  • 11

2 Answers2

2

Try setting the android:layout_height="wrap_content"

and about the whitespace issue, try looking into This Link

Community
  • 1
  • 1
reidzeibel
  • 1,622
  • 1
  • 19
  • 24
  • I originally had the height set to that, but the issue is that the comics vary in height, and as a result the controls vary as well. Some images are very large and cause the controls to be placed such that the user cannot reach them. That's why I wanted to have the webview with a defined size and adjust the image accordingly. I was reading a few other posts and am wondering if perhaps trying to use imageview instead of webview may be a soultion... But the link you provided did remedy the whitespace issue! – CheeseCoder May 28 '13 at 17:40
  • that might be a better solution, in my opinion, Because the current webView has several bugs, like the whitespace issue. It might be a little bit more complex, but using ImageView would give you a greater control over your content. Good Luck!! :D – reidzeibel May 28 '13 at 17:43
  • Just wanted to update in case anybody is reading this, I ended up going with ImageView, and my issues were remedied – CheeseCoder Jun 11 '13 at 17:10
0

Try this:

String dataString = "<head><style type='text/css'>"
                    +"body{margin:auto auto;text-align:center;} </style></head>"
                    +"<body><img src=\"image.png\"/></body>";

webview.loadDataWithBaseURL("file:///android_res/drawable/",dataString,"text/html","utf-8",null);

// set image scale to fit screen if larger than screen width
DisplayMetrics displayMetrics = new DisplayMetrics();
WindowManager wm = (WindowManager) view.getContext().getSystemService(Context.WINDOW_SERVICE);
wm.getDefaultDisplay().getMetrics(displayMetrics);
int screenWidth = displayMetrics.widthPixels; // minus some padding values if you have any left/right padding
Drawable drawable = getResources().getDrawable(R.id.image);
int wi = drawable.getIntrinsicWidth();

double scale = (wi>screenWidth) ? (double)screenWidth/wi : 1.0;
wv.setInitialScale((int) (scale*100));

In this case image.png is the file name and is located in res/drawable folder.

Neoh
  • 15,906
  • 14
  • 66
  • 78
  • This would be useful if I were having issues loading a saved image, and I may end up using this later, but my app will be browsing multiple images from a website. To use this, it would seem that I would have to save each image to the user's phone in order for them to view it. I may be misunderstanding how this code works, but from what I can tell I can't use this for browsing images online. – CheeseCoder May 28 '13 at 17:45