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


Tags: javascript,android,css,webview

Problem :

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>

    CSS Howto..

    How can a html table highlight columns by changing the border on hover?

    R: Shiny: How to align a gvisTable to the center in shinyapp

    Dropdown Menu will move all
    Below. How to prevent it?

    How to draw a Normal Distribution Curve (Bell curve) using CSS and JavaScript?

    How to inherit the background color of textarea from parent element in Internet Explorer?

    How to make CSS URL background images show up in localhost?

    How can I get CSS codes in a style element? [duplicate]

    How to properly center a 100% width div in css

    how to overwrite button's non-hover state colour to grey, but when hover button show the colour (with css framework)

    Shadow DOM: how to apply CSS style only if the host element is ?

    how to make form input in middle

    How to check multiple conditions within a td in Angular table?

    How to create a lightbox like this [closed]

    How can I create inline CSS in a WordPress PHP file without referencing to an external CSS file?

    How to create horizontal funnel like this? [closed]

    tinymce how to specify the css file to be used for tinymce in another js file

    Gulp Sass - How to properly name the output css?

    HTML, CSS how to make width of element always to bottom of page?

    Google App Engine: how to use the internal CSS in the template?

    How to use CSS to change icon color

    Safari displays font differently from other browsers -Set specific font-family for specific browser - How to change font smoothing for Safari [closed]

    How to write bootstrap media queries

    How do I apply CSS style to ASCII character

    How do I make my div with six different pictures expand outwards when clicking it?

    How to add a picture to the top of my webpage?

    CSS How to generate this Shape on a Div or on Canvas

    How to css style flexible elements to match their parents

    How to highlight anchor link when target div comes in view - jQuery

    CSS animate — how to fill div from center

    HTML/CSS How to have to tags on same line?