TabHost with FrameLayout under LinearLayout

Question

I've got a small problem with an xml file and a TabHost containing a FrameLayout that shows a ListActivity. A small LinearLayout shall be at the bottom but this is always shown in front of the ListActivity so there are items in the ListActivity behind the LinearLayout even when you scroll the ListView down. I've tried many combinations of different Layouts but I couldn't find a solution :|

Maybe you've got an idea?

Thanks!

This picture might explain my concern: http://img822.imageshack.us/i/listactivity.png/

And here is the xml code:

<?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">

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

      <LinearLayout
             xmlns:android="http://schemas.android.com/apk/res/android"
             android:orientation="vertical"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_gravity="bottom"
             android:background="#231f20">

             <TextView
                     android:layout_width="fill_parent"
                     android:layout_height="wrap_content"
                     android:text="There are items behind me..." />

             <Button
                     android:id="@+string/connect"
                     android:layout_height="wrap_content"
                     android:layout_width="wrap_content"
                     android:text="Connect" 
                     android:layout_gravity="center_horizontal"
                     android:layout_margin="5dp"/>


      </LinearLayout>

Answer 1

You can achieve what you want by using a RelativeLayout:

<?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">
    <RelativeLayout             
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <TabWidget
            android:id="@+id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" 
            android:layout_alignParentTop="true"/>
        <FrameLayout
            android:id="@+id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_below="@id/tabs"
            android:layout_above="@+id/footer"  />
        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/footer"
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"             
            android:background="#231f20"
            android:layout_alignParentBottom="true">             

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="There are items behind me..." />

            <Button
                android:id="@+string/connect"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="Connect" 
                android:layout_gravity="center_horizontal"
                android:layout_margin="5dp"/>
        </LinearLayout>            
    </RelativeLayout>      
</TabHost>

Answer 2

Here's an example of a layout I use in one of my apps:

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:weightSum="100"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

    <LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

        <!-- This layout will always remain on top -->
        <LinearLayout
        android:id="@+id/TopBarLayout"
        android:background="@drawable/textview_bottom"
        android:layout_weight="10"
        android:paddingLeft="10dip"
        android:paddingRight="10dip"
        android:orientation="horizontal"
        android:gravity="center_vertical|left"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:weightSum="100"
        >

                <TextView
                android:layout_marginRight="5dip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Mode »"
                />

                <Button
                style="@style/Tab_Button"
                android:id="@+id/ModeChangeButton"
                />

                <TextView
                android:layout_marginRight="5dip"
                android:layout_marginLeft="5dip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="»"
                />

                <Button
                android:paddingRight="5dip"
                android:paddingLeft="5dip"
                style="@style/Tab_Button"
                android:id="@+id/DateChangeButton"
                />

                <View
                android:layout_weight="100"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                />

                <ImageButton
                style="@style/Tab_Button"
                android:id="@+id/ConfigButton"
                android:src="@drawable/gear"
                />

        </LinearLayout>

        <!-- Frame for tab content -->
        <FrameLayout
        android:background="#000000"
        android:layout_weight="78"
        android:id="@android:id/tabcontent"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        />

        <!-- Tabs at bottom of screen -->
        <TabWidget
        android:background="@drawable/textview_top"
        android:layout_weight="12"
        android:id="@android:id/tabs"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        />

</LinearLayout>
</TabHost>

Here, my LinearLayout is at the top of the screen, but that's an easy fix. You'll probably want to use layout_weight as shown here.