Zhao Yi Zhao Yi - 6 months ago 136
Android Question

How to make html to fill full screen height on webview in android browser

I added a webview on a AppCompatActivity and want to make it to fill full screen. I have tried the method mentioned on this link(How to make full screen in Android 4.0) but it doesn't help.

Below is the layout xml file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.lenovo.mds.mbgcompass.MainActivity">

<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView"
/>
</RelativeLayout>


Below is the MainActivity class:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

webView = (WebView) findViewById(R.id.webView);
setupWebView();
}

private void setupWebView(){
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(false);
webView.getSettings().setCacheMode(android.webkit.WebSettings.LOAD_NO_CACHE);
webView.getSettings().setDefaultTextEncodingName("UTF-8");
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDatabaseEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.loadUrl("file:///android_asset/index.html");
}


Below is the html css style to make the html dom to be 100% height. but it doesn't work on android browser. If I change the height to be "100hv", it only works on chrome browser not android browser. What else should I try to make the html dom to fill in 100% height of the screen?

var style = {
width: '100%',
margin: '0 auto',
height: '100%'
}


Please see below screenshot. I think the webview is filling the full screen of the device but the html inside the webview doesn't fill in. How can I fill in the bottom while space?

enter image description here

Answer

There is no problem in it. However edit your xml file as this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.lenovo.mds.mbgcompass.MainActivity">

<WebView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentBottom="true"
    android:id="@+id/webView"
    />
</RelativeLayout>