WebView and buttons layout makes buttons invisible

Question

Hey guys,

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>