WebView and buttons layout makes buttons invisible

Question

I've got the following layout:

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

    <WebView xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/webview"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
    />

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:orientation="horizontal">

        <Button android:id="@+id/back"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:text="Back" />

        <Button android:id="@+id/page_number"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:text="1 / 100" />

        <Button android:id="@+id/next"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:text="Next" />
    </LinearLayout>
</LinearLayout>

Which results in the following

How do I make the buttons fit the screen and stop the WebView pushing them off?

Answer 1

Use RelativeLayout. Wrap the RelativeLayout around the buttons like this:

   <RelativeLayout 
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_alignParentBottom="true">
    <Button android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="Back"
            android:layout_alignParentLeft="true"  />

    <Button android:id="@+id/page_number"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="1 / 100" />

    <Button android:id="@+id/next"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="Next" />
   </RelativeLayout>

The android:layout_alignParentBottom="true" makes sure the buttons always have enough space.

Consider using a RelativeLayout around the WebView and use:

android:layout_alignParentTop="true"`

Edit:

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

<WebView xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/webview"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
/>
</RelativeLayout>

<RelativeLayout android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical"
              android:layout_alignParentBottom="true">

    <Button android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Back"
            android:layout_alignParentLeft="true" />

    <Button android:id="@+id/page_number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1 / 100"
            android:layout_toRightOf="@+id/back" />

    <Button android:id="@+id/next"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Next"
            android:layout_toRightOf="@+id/page_number" />
 </RelativeLayout>
</RelativeLayout>

Answer 2

I'm having exactly the same problem except I'm using a TextView below my WebView and a second WebView above the main WebView, all necessary for our chat program. The TextView keeps getting pushed off by the WebView.

I've tried the proposed switch to RelativeLayout, also tried TableLayout and nested LinearLayouts, all to the same effect. The only thing that sort of works is to fix the WebView's pixel size [which raises the hairy issue of handling onConfigurationCahnge()] or to mess around with layout_weight. layout_weight has similar problems though, as the configuration or size of the web page changes the surrounding controls are smushed.

Looks like if I want it to work exactly the one way , a small webview at the top, a main webview and a textview I'll have to fix the webview's pixel size and handle their size change at loadtime (for different screens) and onConfigurationChange() when the screen turns.