Android Tabs not working correctly

Question

I'm still pretty new to android programming, so this may be something easy I'm overlooking.

I'm building an app targeted for Android 4 and higher, and I've implemented a tab host. (I read the Android developer guide on the action bar tabs, and I still didn't understand it.) Anyway, everything works fine except when I switch tabs--when I do this, content from the previous tab is still overlapping. For example, I have tabs 1, 2, 3, and buttons 1,2, and 3. When I switch from button 1 to 3, they are overlapping.

fragment.java

public class fragment extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fragment);
        TabHost th = (TabHost)findViewById(R.id.tabhost);
        th.setup();
        TabSpec ts = th.newTabSpec("tag1");
        ts.setContent(R.id.tab1);
        ts.setIndicator("Tab one");
        th.addTab(ts);
        ts.setContent(R.id.tab2);
        ts.setIndicator("Tab two");
        th.addTab(ts);
        ts.setContent(R.id.tab3);
        ts.setIndicator("Tab Three ");
        th.addTab(ts);
    }
}

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent" android:layout_height="match_parent">

<TabHost
    android:id="@+id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
        </TabWidget>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <LinearLayout
                android:id="@+id/tab1"

                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <Button
                    android:id="@+id/button1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="NUmber one" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab2"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <Button
                    android:id="@+id/button2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Number two"/>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab3"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <Button
                    android:id="@+id/button3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="NUmber three" />
            </LinearLayout>
        </FrameLayout>
    </LinearLayout>

</TabHost>

</LinearLayout>

Any help would be appreciated.

Answer 1

The problem is

You have written TabSpec ts = th.newTabSpec("tag1"); only for Tab1.

and reusing same for rest of two tabs.

Change your code from

    TabSpec ts = th.newTabSpec("tag1");
    ts.setContent(R.id.tab1);
    ts.setIndicator("Tab one");
    th.addTab(ts);
    ts.setContent(R.id.tab2);
    ts.setIndicator("Tab two");
    th.addTab(ts);
    ts.setContent(R.id.tab3);
    ts.setIndicator("Tab Three ");
    th.addTab(ts);

To Following

        TabSpec ts;

        ts = th.newTabSpec("tag1");
        ts.setContent(R.id.tab1);
        ts.setIndicator("Tab one");
        th.addTab(ts);

        ts = th.newTabSpec("tag2");
        ts.setContent(R.id.tab2);
        ts.setIndicator("Tab two");
        th.addTab(ts);

        ts = th.newTabSpec("tag3");
        ts.setContent(R.id.tab3);
        ts.setIndicator("Tab Three ");
        th.addTab(ts);