How to Display Webview in fixed width and height

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 scre

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