CODEWITHSUNDEEP
javaandroidwebview
AndroidXTr3meN
AndroidXTr3meN

Reputation: 399

Android: WebView load image/content in center

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!

Upvotes: 10

Views: 16387

Answers (8)

user2765861
user2765861

Reputation: 163

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

Upvotes: 6

sonal balekai
sonal balekai

Reputation: 395

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

Upvotes: 1

Gabriel Terry
Gabriel Terry

Reputation: 53

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", "");

Upvotes: 0

ara.hayrabedian
ara.hayrabedian

Reputation: 458

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.

Upvotes: 0

Rahul Verma
Rahul Verma

Reputation: 2150

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

Upvotes: 4

ununiform
ununiform

Reputation: 436

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

                }

Upvotes: 0

Rahul Verma
Rahul Verma

Reputation: 2150

    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

Upvotes: 1

alex
alex

Reputation: 2484

Try to load an HTML file that embeds the image instead. All the layout may done with standard css styles then.

Upvotes: 0

Related Questions