Search code examples
javascriptandroidcsswebview

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

Solution

  • 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>