How to fit WebView height size with screen height?

Question

If my WebView is so large, I have no problem and WebView height fit the screen height even when the content is so bigger I can scroll the content of WebView. But if the content of WebView is little, the WebView height doesn't fit the screen.

This is my layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >

<ScrollView android:layout_width="fill_parent"
    android:layout_height="fill_parent"
        android:fitsSystemWindows="true">

    <WebView android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:fitsSystemWindows="true" />

</ScrollView>

<LinearLayout android:id="@+id/media_player"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:visibility="visible">

    <Button android:textStyle="bold"
        android:id="@+id/ButtonPlayStop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:drawable/ic_media_play" />

    <SeekBar android:id="@+id/SeekBar"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_below="@id/ButtonPlayStop" />

</LinearLayout>

Here is the screenshot:

Any one could help me to solve this problem?

Answer 1

You don't need to place a WebView inside of a ScrollView since it already knows how to scroll when its contents are larger than its view boundaries. Placing scrolling views inside other scrolling views tends to lead to undesirable behaviour.

Disregarding that for a second, a ScrollView will not stretch itself to take up extra empty space if its contents are too small. That is, unless the special flag (android:fillViewport) is used.

As a solution, I would remove the outer ScrollView and try to make the WebView take up the space by its own right. If you use a RelativeLayout as the container you can obtain this layout with only one level of depth:

• play button goes bottom-left of parent
• seek bar goes to the bottom and to the right of the play button

• WebView is above them with fill_parent in width and height

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  
  <Button android:textStyle="bold"
  android:id="@+id/ButtonPlayStop"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentBottom="true"
  android:background="@android:drawable/ic_media_play" />
  
  <SeekBar android:id="@+id/SeekBar"
  android:layout_toRightOf="@+id/ButtonPlayStop"
  android:layout_alignParentBottom="true"
  android:layout_height="wrap_content"
  android:layout_width="fill_parent"
  android:layout_below="@id/ButtonPlayStop" />
  
  <WebView android:id="@+id/webview"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:layout_above="@id/ButtonPlayStop" />
  
  </RelativeLayout>