HOWTO: Place A TabWidget on the Bottom of the Screen

I don't know if it was the Android team's way to differentiate the UI from Apple's iPhone, but they've made it very difficult to build your app based on the TabActivity and place the TabWidget (the tab selectors) at the bottom of the screen.

BLUF: The key is to add 'android:layout_weight="1.0" and android:layout_height="wrap_content"' to the FrameLayout declaration.

Simply moving the TabWidget declaration in your layout file below the /FrameLayout won't work, although intuitively you'd like to think so.  Gravity tags seem to do nothing.  Adding the 'layout_height="wrap_content" without the 'layout_wight' causes the TabWidget to rest not anchored at the bottom of the screen, but right up on where the FrameLayout ends.

Undesirable outcome with the TabWidget anchored where the FrameLayout stops. 

Here's an example layout xml file that works:

<?xml version="1.0" encoding="utf-8"?>


<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
            <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0">
                <!-- Tab 1 -->
                <TextView android:id="@+id/list"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="This is the listView stub. TODO"
                    android:visibility="gone"
                    />
                <!-- Tab 2 -->
                <TextView android:id="@+id/map"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="map view TODO"
                    android:visibility="gone"
                    />

                <!--  Tab 3 -->
                <TextView android:id="@+id/post"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="This is the postView stub. TODO"
                    android:visibility="gone"
                    />

                <!--  Tab 4 -->
                <TextView android:id="@+id/chat"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="This is the chatView stub. TODO"
                    android:visibility="gone"
                    />

                <!--  Tab 5 -->
                <EditText
                    android:id="@+id/settings"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="This is the chatView stub. TODO">
                </EditText>

            </FrameLayout>

            <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            />
     </LinearLayout>
</TabHost>

The code only displays text which notes which Tab you are viewing.  The last tab shows an EditText box to highlight how the tabs react when the soft keyboard is displayed.  Screen shots are provided below

Note that in the screen shots, quotation marks are omitted from the text.

TabWidget anchored at the bottom of the screen.