Android Tabs Question

Question

Here's a bizarre behavior that I'm getting with Android tabs. Or maybe the emulator is to blame! Below you have the XML for the layout.

The layouts designed separately for each tab are res/layout/tab1.xml and res/layout/tab2.xml ... and everything seems to be working fine except that when it's drawing it overlaps the tabs some how. If I select TAB1 everything looks normal, but if I select TAB2 it just draws over the tab1 layout. If I go back to tab1 then again everything looks normal.

So why does it draw over the layout from tab1 instead of starting from a black/blank screen? Isn't the TabWidget supposed to handle these situations and call a clear() method or something, before drawing the layout and contents of tab 2?

I'm emulating a machine that has Android 2.2 (API level 8).

   <?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"
        android:padding="5dp">

        <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"
            android:padding="5dp">

            <include layout="@layout/tab1" />
            <include layout="@layout/tab2" />

        </FrameLayout>
    </LinearLayout>
</TabHost>

EDIT: Upon request I'll add the tab2 layout which is basically a blank screen!

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

So any ideas why if I switch to tab2... it just draws (adds the Strings) over tab1's controls (buttons, etc.) and doesn't start from a blank/black screen?

Can you also post the layout of tab2? Maybe its width and hight are set to wrap_content? — Adinia
the second tab contains just a blank screen on which I'm writing something. So it contains only a Linear Layout. But the text appears over the buttons of the first tab... instead of a blank black screen with some text. Though I will try what you said, changing from wrap context to fill_parent might do something useful. — Tibbers

Tibbers Tibbers · Accepted Answer · 2011-03-09T13:18:58

Solved the problem!!!!

You don't need to include (I just deleted them from the previous main.xml)

<include layout="@layout/tab1" />
<include layout="@layout/tab2" />

Cause it will overlap the GUI elements from both tab1 and tab2. Instead leave the main.xml just with the tabwidget and framelayout EXACTLY like in the official tutorial.

What you do need to do is to call: setContentView(R.layout.tab1) and setContentView(R.layout.tab2) in their respective classes in the onCreate method! And that's it. That's how you add controls (buttons, textedits, etc.) on each tab (which is an activity by itself)

It now works like a charm now!!!!

Android Tabs Question

1 Answers