How to display the same layout for two different tabs in a TabHost?

Question

I'm working on an Android application with an Activity that uses a tab layout. There are two tabs which switch between the content being shown in some TextViews.

This means that the two tab specifications point to the same layout (linear) for content, R.id.plantilla:

<?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="match_parent"
android:layout_height="match_parent" >

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

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

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

        <include layout="@layout/plantilla"/>


    </FrameLayout>
</LinearLayout>

But this only works if I switch to tab 2 and back to 1, i.e when the activity launches, the Layout "plantilla" can't be seen before tabs are changed. This is my problem.

What's the most simple way to get around this?

PD: I have tried to duplicate the line

<include layout="@layout/plantilla">

in the tabhost xml, but in this case I can not access at the TextViews objects from the Java code using findViewById(R.id.someTextView);

Answer 1

I don't believe you can use include, I think you need to actually define your layout twice in the xml with different id tags.

Or you could simply define the container view and then add views to it programatically. I've done that before. Here's how I did it:

tablayout

<?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:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:padding="5dp" >
            <TextView
                    android:id="@+id/setupheader"
                    android:layout_width="fill_parent"
                    android:layout_height="20dp"
                    android:textSize="15dp" />
            <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="fill_parent"
                    android:layout_height="30dp"
                    android:gravity="bottom" />
            <FrameLayout
                    android:id="@android:id/tabcontent"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:padding="5dp" >
                    <!-- General Info Tab -->
                    <LinearLayout
                            android:id="@+id/general_tab"
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:orientation="vertical" >
                    </LinearLayout>
                    <!-- Tool Tab -->
                    <LinearLayout
                            android:id="@+id/tool_tab"
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:orientation="vertical" >
                            <ListView
                                    android:id="@+id/list1"
                                    android:layout_width="match_parent"
                                    android:layout_height="0dp"
                                    android:layout_weight="1"
                                    android:drawSelectorOnTop="false" />
                    </LinearLayout>
                    <!-- Offset Tab -->
                    <LinearLayout
                            android:id="@+id/offset_tab"
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:orientation="vertical" >
                            <ListView
                                    android:id="@+id/list2"
                                    android:layout_width="match_parent"
                                    android:layout_height="0dp"
                                    android:layout_weight="1"
                                    android:drawSelectorOnTop="false" />
                    </LinearLayout>
                    <!-- Notes Tab -->
                    <LinearLayout
                            android:id="@+id/note_tab"
                            android:layout_width="fill_parent"
                            android:layout_height="fill_parent"
                            android:orientation="vertical" >
                    </LinearLayout>
            </FrameLayout>
    </LinearLayout>
</TabHost>

Following is my tab activity (I've removed significant portions, but it should show well enough how I went about doing tabs without separate activites for each tab).

tabactivity

public class SetupDisplay extends TabActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.setupdetailmain);

            Bundle extras = getIntent().getExtras();
            RowId = extras.getLong("RowId");
            StartTab = extras.getInt("StartTab");

            // ***************************************************************
            // Set up the tabs in the tabhost
            // ***************************************************************
            tabHost = getTabHost();
            TabHost.TabSpec spec;
            spec = tabHost.newTabSpec("General").setIndicator("General")
                            .setContent(R.id.general_tab);
            tabHost.addTab(spec);
            spec = tabHost.newTabSpec("Tools").setIndicator("Tools")
                            .setContent(R.id.tool_tab);
            tabHost.addTab(spec);
            spec = tabHost.newTabSpec("Offsets").setIndicator("Offsets")
                            .setContent(R.id.offset_tab);
            tabHost.addTab(spec);
            spec = tabHost.newTabSpec("Notes").setIndicator("Notes")
                            .setContent(R.id.note_tab);
            tabHost.addTab(spec);
            populateTabs(StartTab);
    }

    // ***************************************************************
    // Clear views from linear layout tabs
    // ***************************************************************
    private void clearTabs() {
            general.removeAllViews();
            notes.removeAllViews();
    }

    // ***************************************************************
    // Fill the tabs
    // ***************************************************************
    private void populateTabs(int TabShown) {

            generaltab();
            tooltab();
            notestab();
            offsettab();

            tabHost.setCurrentTab(TabShown);
    }

    // ***************************************************************
    // Fill the General tab
    // ***************************************************************
    private void generaltab() {
        general = (LinearLayout) findViewById(R.id.general_tab);
        String prgdisp = SETUPINFO_PGM1;
        if (SETUPINFO_PGM2 != null) {
            prgdisp = prgdisp + ", " + SETUPINFO_PGM2;
        }
        if (SETUPINFO_PGM3 != null) {
            prgdisp = prgdisp + ", " + SETUPINFO_PGM3;
        }
        TextView programs = new TextView(this);
        programs.setText("Program(s): " + prgdisp);
        programs.setTextSize(20);
        general.addView(programs);

        if (SETUPINFO_KIT == null || SETUPINFO_KIT.equals("No Kit")) {
        } else {
            TextView kit = new TextView(this);
            kit.setText("Kit: " + SETUPINFO_KIT);
            kit.setTextSize(20);
            general.addView(kit);
        }

        if (SETUPINFO_FIXTURE1 == null && SETUPINFO_FIXTURE2 == null) {
        } else {
            String fixtdisp = SETUPINFO_FIXTURE1;
            if (SETUPINFO_FIXTURE2 != null) {
                fixtdisp = fixtdisp + ", " + SETUPINFO_FIXTURE2;
            }
            TextView fixtures = new TextView(this);
            fixtures.setText("Fixture(s): " + fixtdisp);
            fixtures.setTextSize(20);
            general.addView(fixtures);
            TextView fixtureloc = new TextView(this);
            fixtureloc.setText("Fixture Location: " + SETUPINFO_FIXTURELOC);
            fixtureloc.setTextSize(20);
            general.addView(fixtureloc);
        }

        if (SETUPINFO_VISE == null) {
        } else {
            TextView vise = new TextView(this);
            vise.setText("Vise(s): " + SETUPINFO_VISE);
            vise.setTextSize(20);
            general.addView(vise);
        }
    }

    // ***************************************************************
    // Fill the Offset tab
    // ***************************************************************
    private void offsettab() {
            wpccount = 0;
            for (int i = 0; i < 20; i++) {
                    if (wpcdesc[i] != null) {
                            wpcdisplayhold[wpccount] = wpcid[i] + " - " + wpcdesc[i];
                            wpcidhold[wpccount] = wpcid[i];
                            wpcdeschold[wpccount] = wpcdesc[i];
                            wpccount++;
                    }
            }
            wpcdisplay = new String[wpccount];
            for (int i = 0; i < wpccount; i++) {
                    wpcdisplay[i] = wpcdisplayhold[i];
            }
            mWPCView = (ListView) findViewById(R.id.list2);
            mWPCView.setAdapter(new ColorizingListAdapter(SetupDisplay.this,
                            wpcdisplay, "Offset"));
            registerForContextMenu(mWPCView);
    }

    // ***************************************************************
    // Fill the Notes tab
    // ***************************************************************
    private void notestab() {
            notes = (LinearLayout) findViewById(R.id.note_tab);
            notestxt = new TextView(this);
            notestxt.setText(SETUPINFO_NOTES);
            notestxt.setTextSize(15);
            notes.addView(notestxt);
    }

}

Hope this helps.

Answer 2

Please remove the include tag from your xml layout and leave something simple:

<?xml version="1.0" encoding="utf-8"?>
<!-- Tab Host -->
<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">

    <!-- Bottom tab bar -->
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp">

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

        <!-- -5dip bottom margin for not showing the annoying bottom line -->
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="65dip"
            android:layout_weight="0"
            android:layout_marginBottom="-5dip"/>

    </LinearLayout>

</TabHost>

And from your TabActivity class just put this in onCreate():

            //Set tab host
        tabHost = getTabHost();

        //First Tab
        TabSpec firstTabSpec = tabHost.newTabSpec("FirstTab");//title
        firstTabSpec.setIndicator("FirstTab", getResources().getDrawable(R.drawable.item_first_tab)); //icon
        Intent firstTabIntent = new Intent(this, FirstTab.class);//action
        firstTabSpec.setContent(firstTabIntent);//set tab

        //Second Tab
        TabSpec secondTabSpec = tabHost.newTabSpec("SecondTab");//title
        secondTabSpec.setIndicator("SecondTab", getResources().getDrawable(R.drawable.second_tab));//icon
        Intent secondTabIntent = new Intent(this, FirstTab.class);//action
        secondTabSpec.setContent(secondTabIntent);//set tab

        //Add tabs to tab host
        tabHost.addTab(firstTabSpec);//add first tab
        tabHost.addTab(secondTabSpec);//add second tab which goes to your FirstTab.class

You can create different Activities for your tabs or use a single one.