如何以固定的宽度和高度显示Webview

Question

Sorry, I've been searching this forum and got no exact answer. so I ask my own.

I have a class that display two layouts , glView and webview , with target portrait screen 640x960 . i plan to split the layout. so it would look that my background drawn at (0,0,640,480) or half of the portrait screen. , and i want my webview drawn at (0,481,640,479) which is occupy the other half from the middle to the bottom. however, i failed and couldn't figure out how to achieve the layout i want. How to set the webView size & Position ?

PS: if i set the layout to align bottom then the webview is indeed in the middle to bottom position however i need to specify the exact position.. and the worst.. when it loads the url , it will use the whole screen, covering all my first layout and i am lost. so how to make the webview display the loaded url into the webview specified width and height.

Thank you.. sorry for my bad english.

anyway, this is my code (i created all programatically, i didn't use any xml layout)

    glView = new GLSurfaceView(this);
    glView.setRenderer(this);
    glView.setZOrderMediaOverlay(false);
    layout = new RelativeLayout(this);
    layout.addView(glView);
    webView = new WebView(this);    
    this.showWV(false); //handler message , i hide it in certain screen.

    //webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setLoadWithOverviewMode(true);
    webView.getSettings().setUseWideViewPort(true);

    webView.loadUrl("http://stackoverflow.com");

    RelativeLayout.LayoutParams params =
       new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
             RelativeLayout.LayoutParams.WRAP_CONTENT);

    params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);

    layout.addView(webView, params);

    setContentView(layout);

Answer 1

You can use LinearLayout instead of RelativeLayout to split screen. Just set height = 0 and weight = 1 of GLSurfaceView and WebView both. In your case the code will be:

LinearLayout layout = new LinearLayout(this); // Use LinearLayout instead of Relative

glView = new GLSurfaceView(this);
glView.setRenderer(this);
glView.setZOrderMediaOverlay(false);

// height is 0, weight is 1
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0, 1);
layout.addView(glView, params);

webView = new WebView(this);
this.showWV(false); //handler message , i hide it in certain screen.
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

// height is 0, weight is 1
params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0, 1);
layout.addView(webView, params);

webView.loadUrl("http://stackoverflow.com");

setContentView(layout);

Or you can use RelativeLayout with hardcoded height and width values:

RelativeLayout layout = new RelativeLayout(this); // Use LinearLayout instead of Relative

glView = new GLSurfaceView(this);
glView.setRenderer(this);
glView.setZOrderMediaOverlay(false);
glView.setId(123); // set id

RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(640, 480);
layout.addView(glView, params);

webView = new WebView(this);
this.showWV(false); //handler message , i hide it in certain screen.
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

params = new RelativeLayout.LayoutParams(640, 480);
params.addRule(RelativeLayout.BELOW, glView.getId()); // set WebView position is below GLSurfaceView
layout.addView(webView, params);

webView.loadUrl("http://stackoverflow.com");

setContentView(layout);

UPD: Without hardcoded values, using invisible view:

RelativeLayout layout = new RelativeLayout(this); // Use LinearLayout instead of Relative

// create a fake view with zero size and place it to center of RelativeLayout
View fakeView = new View(this); 
fakeView.setId(24736); 
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(0, 0);
params.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
layout.addView(fakeView, params);

glView = new GLSurfaceView(this);
glView.setRenderer(this);
glView.setZOrderMediaOverlay(false);
glView.setId(123); // set id

params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
params.addRule(RelativeLayout.ABOVE, fakeView.getId()); // set position is above fakeView
layout.addView(glView, params);

webView = new WebView(this);
this.showWV(false); //handler message , i hide it in certain screen.
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
params.addRule(RelativeLayout.BELOW, fakeView.getId()); // set WebView position is below fakeView
layout.addView(webView, params);

webView.loadUrl("http://stackoverflow.com");

setContentView(layout);

Answer 2

You can do this using RelativeLayout.LayoutParams class:

RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(640, 480);
params.addRule(RelativeLayout.ALIGN_PARENT_TOP, RelativeLayout.TRUE);
webView.setLayoutParams(params);

then add the webview to the layout. You can locate the other view at the bottom of the screen with a new LayoutParams instance and addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);