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

Swarm

"...each with a different Activity" - you probably mean different "View". – Leaf

Extending TabActivity is only needed for the main Activity which hosts the tabs. All the other activities in the tabs can simply extend Activity and they will run just fine. – Volost

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);
}

// ...

Leaf

Answer 2

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">
  <item android:drawable="@drawable/helpblue" android:state_selected="true">
  <item android:drawable="@drawable/helpgray"></item>
</item></selector>

Here is sample screenshots.

alt text http://rayyildiz.com/wp-content/uploads/2010/06/android_sample_tab-201x300.png alt text http://rayyildiz.com/wp-content/uploads/2010/06/android_sample_tab2-201x300.png

Recapture

Answer 3

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:
_{(source: android.com)}

---

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

Lozier