Android TabHost - Activities within each tab

Question

I'm trying to create multiple tabs, each with a different Activity. The only downside is i'm using a custom layout file thus my class extends an Activity rather than a TabActivity. While trying to run, it fails and suggests calling TabHost.Setup(ActivityGroupManager agm)

Anyone have an idea/practical example of how this can be achieved?

Thanks in advance

Answer 1

This is a sample of my activity that also doesn't extend from TabActivity:

protected TabHost tabs;

// ...

/**
 * Init tabs.
 */
private void initTabs() {
    tabs = (TabHost) findViewById(R.id.tabhost);
    tabs.setup();
    tabs.setBackgroundResource(R.drawable.bg_midgray);

    TabHost.TabSpec spec;

    // Location info
    txtTabInfo = new TextView(this);
    txtTabInfo.setText("INFO");
    txtTabInfo.setPadding(0, 0, 0, 0);
    txtTabInfo.setTextSize(14);
    txtTabInfo.setBackgroundResource(R.drawable.bg_tab_left_inactive_right_inactive);
    txtTabInfo.setTextColor(Color.DKGRAY);
    txtTabInfo.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.TOP);
    txtTabInfo.setHeight(39);
    spec = tabs.newTabSpec("tabInfo");
    spec.setContent(R.id.tabInfo);
    spec.setIndicator(txtTabInfo);
    tabs.addTab(spec);

    // Maps
    txtTabMap = new TextView(this);
    txtTabMap.setText("MAP");
    txtTabMap.setTextSize(14);
    txtTabMap.setPadding(0, 0, 0, 0);
    txtTabMap.setBackgroundResource(R.drawable.bg_tab_middle_inactive_right_active);
    txtTabMap.setTextColor(Color.DKGRAY);
    txtTabMap.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.TOP);
    txtTabMap.setHeight(39);
    spec = tabs.newTabSpec("tabMap");
    spec.setContent(R.id.tabMap);
    spec.setIndicator(txtTabMap);
    tabs.addTab(spec);

    tabs.setCurrentTab(0);

    tabs.setOnTabChangedListener(this);
}

// ...

Answer 2

Make an additional Class which extends TabActivity and make that class the main activity.

To do that in your XML manifest you would include:

<activity android:name=".TabActivtyClass" android:label="@string/app_name"
    android:theme="@android:style/Theme.NoTitleBar">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

In this class you would write something like:

public class TabActivtyClass extends TabActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        TabHost tabHost = getTabHost(); // The associated TabHost

        // Create an Intent to launch given Activty for this tab
        Intent i = new Intent().setClass(this, FirstActivty.class);
        TabHost.TabSpec spec = tabHost.newTabSpec("tab_name").setIndicator("Tab Name").setContent(i); // <- references the intent we just created
        tabHost.addTab(spec);

        // And do the same for the other tabs ...
    }
}

This TabActivty class can be as big or small as you would like, but typically it would be the full screen, with each tab's Activity being loaded into the main part of the screen, like so:

---

P.S. Also be aware that the Eclipse Layout Editor doesn't work with Tabs. It is a bug which has already been logged.

Answer 3

Firstly, define a frametab in main layout.

<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">
      </framelayout>
    </tabwidget>
</linearlayout>
</tabhost>

Then, create a activity extends from TabActivity

Resources res = getResources();
TabHost tabHost = getTabHost();
TabHost.TabSpec spec;
Intent intent;
intent = new Intent().setClass(this, DashboardActivity.class);
spec = tabHost.newTabSpec("home").setIndicator("Home", res.getDrawable (R.drawable.ic_tab_dashboard)).setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(this, CreditCardActivity.class);
spec = tabHost.newTabSpec("sample1").setIndicator("Sample Tab",res.getDrawable (R.drawable.ic_tab_sample1)).setContent(intent);
tabHost.addTab(spec);

If you want to rolover tab, use selector layout:

<selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  <item android:drawable="@drawable/helpblue" android:state_selected="true">
  <item android:drawable="@drawable/helpgray"></item>
</item></selector>

Here is sample screenshots.