Tabwidget overlaps with my activity content

Question

after spending 2 solid days searching for an answer, I would like to ask for help about the following behaviour.

I'm trying to code a simple tabhost application on Android, with a layout per activity. I've designed my layout so that the tabwidget appears at the bottom of the screen.

On the first tab, I'm trying to insert a simple 2 lines ListView. My problem is that the ListView is well on the bottom, but half of it is hidden behind the tabwidget. I would like to understand how to make my ListView to be displayed just above the tabwidget.

Here is my main.xml :

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

       <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" />

       <TabWidget
            android:id="@android:id/tabs"
            android:layout_alignParentBottom="true"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
    </RelativeLayout>

</TabHost>

Here is my main app class :

public class TestTabWidget extends TabActivity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Resources res = getResources(); // Resource object to get Drawables
        TabHost tabHost = getTabHost();  // The activity TabHost
        TabHost.TabSpec spec;  // Resusable TabSpec for each tab
        Intent intent;  // Reusable Intent for each tab

        intent = new Intent().setClass(this, AActivity.class);

        spec = tabHost.newTabSpec("artists").setIndicator("Tab A",
                          res.getDrawable(R.drawable.ic_tab_a))
                      .setContent(intent);
        tabHost.addTab(spec);


        tabHost.setCurrentTab(0);
    }

}

Here is my Activity code :

public class AActivity extends Activity {

ListView lvListe;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.a_layout);
        lvListe = (ListView)findViewById(R.id.lvListe);
        lvListe.setBackgroundResource(R.layout.tables);

        String[] listeStrings = {"Value 1","Value 2"};

        lvListe.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,listeStrings));

    }
}

Here is my layout for the activity :

<?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">
    <ListView 
          android:id="@+id/lvListe"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:layout_alignParentBottom="true" />
</RelativeLayout>

Thanks to anyone keen to help me I'm just going nuts....

Adam

Answer 1

Try this layout instead for your RelativeLayout section:

<RelativeLayout
  android:layout_height="fill_parent"
  android:layout_width="fill_parent">

  <FrameLayout
    android:id="@android:id/tabcontent"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@android:id/tabs"
    android:padding="5dp" />

  <TabWidget
    android:id="@android:id/tabs"
    android:layout_alignParentBottom="true"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />
</RelativeLayout>

Right now, your FrameLayout is filling the entire space inside the RelativeLayout, as RelativeLayout makes no distinctions about placing items next to each other like LinearLayout does, and allows overlapping. My adjustment tells the layout to fill the space between the widget the the top of that layout.

Another note about RelativeLayout, the Z-order of the items is determined by the order in XML, that's why the TabWidget appears on top of the FrameLayout. If you had reversed the order, the TabWidget would not have even been visible!

Hope that helps!