Android: WebView load image/content in center
Question
I have loaded an image with WebView but when it is zoomed out max the image place itself in the top left corner of my device. Is there anyway to load the image so it is displayed in center?
Cheers!
8 answers
solution1
6 2013-11-17 00:47:28
I did it with a combination of xml and code. I have my gif file stored in assets folder.
Following is the xml layout code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<WebView
android:id="@+id/webView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true" />
</RelativeLayout>
Following is the java code:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_webview);
WebView webView = (WebView) findViewById(R.id.webView);
webView.setWebViewClient(new WebViewController());
webView.loadDataWithBaseURL("file:///android_asset/","<html><center><img src=\"animation.gif\"></html>","text/html","utf-8","");
}
private class WebViewController extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}
solution2
4 ACCPTED 2012-05-16 10:37:25
You can use this code to center the image at the center of the screen in a WebView :
//first you will need to find the dimensions of the screen
float width;
float height;
float currentHeight;
WebView mWebView;
//this function will set the current height according to screen orientation
@Override
public void onConfigurationChanged(Configuration newConfig){
if(newConfig.equals(Configuration.ORIENTATION_LANDSCAPE)){
currentHeight=width;
loadImage();
}if(newConfig.equals(Configuration.ORIENTATION_PORTRAIT)){
currentHeight=height;
loadImage();
}
}
//call this function and it will place the image at the center
public void load and center the image on screen(){
mWebView=(WebView)findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setBuiltInZoomControls(true);
mWebView.setBackgroundColor(0);
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
height = displaymetrics.heightPixels;
width = displaymetrics.widthPixels;
currentHeight=height //assuming that the phone
//is held in portrait mode initially
loadImage();
}
public void loadImage(){
Bitmap BitmapOfMyImage=BitmapFactory.decodeResource(Environment.getExternalStorgeDirectory().getAbsolutePath()+"yourFolder/myImageName.jpg");
mWebView.loadDataWithBaseURL("file:///"+Environment.getExternalStorgeDirectory().getAbsolutePath()
+"yourFolder/","<html><center>
<img src=\"myImageName.jpg\" vspace="
+(currentHeight/2-(BitmapOfMyImage.getHeight()/2))+">
</html>","text/html","utf-8","");
//This loads the image at the center of thee screen
}
I have used the center tag to center the image vertically and then used the vspace tag to give image top margin . Now the margin is calculated by : screenVierticalHeight/2-ImageVerticalHeight/2
Hope this helps
solution3
1 2012-05-15 16:05:33
mWebView.loadDataWithBaseURL("file:///"+Environment.getExternalStorgeDirectory().getAbsolutePath()+"yourFolder/","<html><center><img src=\"myImage.jpg\"></html>","text/html","utf-8","");
This places image from SDCard at center of the webView. I hope this helps
solution4
1 2016-04-22 06:40:11
String html = "<html><head><style type='text/css'>html,body {margin: 0;padding: 0;width: 100%;height: 100%;}html {display: table;}body {display: table-cell;vertical-align: middle;text-align: center;}</style></head><body><p style=\"color:white\">+"you message"+</p></body></html>";
webView.loadData(html, "text/html; charset=UTF-8", null);
So this will load your webview with the text in center
solution5
0 2012-05-03 17:47:05
Try to load an HTML file that embeds the image instead. All the layout may done with standard css styles then.
solution6
0 2012-05-18 00:51:08
I had the same problem - centering vertically in webview. This solution works most of the time... maybe it can help you a little
int pheight = picture.getHeight();
int vheight = view.getHeight();
float ratio = (float) vheight / (float) pheight;
System.out.println("pheight: " + pheight + "px");
System.out.println("vheight: " + vheight + "px");
System.out.println("ratio: " + ratio + "px");
if (ratio > 0.5)
{
return;
}
int diff = pheight - vheight;
int diff2 = (int) ((diff * ratio) / 4);
if (pheight > vheight)
{
// scroll to middle of webview
currentPhotoWebview.scrollTo(0, diff2);
System.out.println("scrolling webview by " + diff2 + "px");
}
solution7
0 2013-08-27 09:15:26
I know this answer's a little late but here's an option without javascript:
you can extend WebView and use the protected methods computeHorizontalScrollRange() and computeVerticalScrollRange() to get an idea of the maximum scroll range and based on that calculate where you want to scrollTo with computeHorizontalScrollRange()/2 - getWidth()/2 and similarly for vertical: computeVerticalScrollRange()/2 - getHeight()/2
my only advice would be to make sure that loading is complete before doing so, i haven't tested if this works while things are loading but i don't think it would as the webview won't yet have it's scroll range correctly set (as content is still being loaded)
see: Android webview : detect scroll where i got a lot of my info from.
solution8
0 2015-07-25 17:47:23
For me that is work:
String path = Environment.getExternalStorageDirectory().getAbsolutePath() + "PICTURE FILE NAME";
File file = new File(path);
String html = "<style>img{height: 100%;max-width: 100%;}</style> <html><head></head><body><center><img src=\"" + imagePath + "\"></center></body></html>";
webView.getSettings().setDefaultZoom(ZoomDensity.FAR);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.loadDataWithBaseURL( "" , html, "text/html", "UTF-8", "");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.