Android: WebView load image/content in center

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


    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


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

Tags:

Java

Android

Webview

Recent Posts