Android – Switching Activities with a Tab Layout

This post is based on the Tab Layout  tutorial on the Android developers site, with some modifications. I wanted to get rid of the icons (they take up too much screen real estate), and modify the fonts on the tabs.

First, create a new Android project, with an Activity called TabWidget. Then, create two additional Activities called TabOne and TabTwo. Throw a simple TextView on each one with a message identifying the tab, like this:

public class TabTwo extends Activity {
  @Override public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    TextView tv = new TextView(this);
    tv.setText("This is tab 2");
    setContentView(tv);
  }
}

And don’t forget to add them to your AndroidManifest.xml file:

<activity android:name=".TabOne"></activity>
<activity android:name=".TabTwo"></activity>

Now we’ll create the tab layout – open the res/layout/main.xml file and insert the following:

<?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">
  <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" />
 </LinearLayout>
</TabHost>

Finally, we’ll create the code needed to populate the TabHost. Make sure your TabWidget class extends TabActivity rather than Activity, and add code to grab the TabHost and create an Intent to launch a new Activity:

TabHost tabHost = getTabHost();  // The activity TabHost
TabHost.TabSpec spec;            // Reusable TabSpec for each tab
Intent intent;                   // Reusable Intent for each tab

// Create an Intent to launch an Activity for the tab (to be reused)
   intent = new Intent().setClass(this, TabOne.class);

Add the first tab to the layout:

// Initialize a TabSpec for each tab and add it to the TabHost
spec = tabHost.newTabSpec("tabOne");
spec.setContent(intent);
spec.setIndicator("Tab One");
tabHost.addTab(spec);

It’s pretty tall as-is, so we’ll shorten it:

// Squish the tab a little bit horizontally
  tabHost.getTabWidget().getChildAt(0).getLayoutParams().height = 40;

But the text is a little small, so let’s increase the font size:

// Bump the text size up
LinearLayout ll = (LinearLayout)tabHost.getChildAt(0);
android.widget.TabWidget tw = (android.widget.TabWidget)ll.getChildAt(0);
RelativeLayout rllf = (RelativeLayout)tw.getChildAt(0);
TextView lf = (TextView)rllf.getChildAt(1);
lf.setTextSize(20);

Do the same for the second tab, and you wind up with this:

@Override public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  TabHost tabHost = getTabHost();  // The activity TabHost
  TabHost.TabSpec spec;            // Reusable TabSpec for each tab
  Intent intent;                   // Reusable Intent for each tab

  // Create an Intent to launch an Activity for the tab (to be reused)
        intent = new Intent().setClass(this, TabOne.class);
        // Initialize a TabSpec for each tab and add it to the TabHost
        spec = tabHost.newTabSpec("tabOne");
        spec.setContent(intent);
        spec.setIndicator("Tab One");
        tabHost.addTab(spec);
        // Squish the tab a little bit horizontally
        tabHost.getTabWidget().getChildAt(0).getLayoutParams().height = 40;
        // Bump the text size up
        LinearLayout ll = (LinearLayout)tabHost.getChildAt(0);
        android.widget.TabWidget tw =
            (android.widget.TabWidget)ll.getChildAt(0);
        RelativeLayout rllf = (RelativeLayout)tw.getChildAt(0);
        TextView lf = (TextView)rllf.getChildAt(1);
        lf.setTextSize(20);

        // Do the same for the other tabs
        intent = new Intent().setClass(this, TabTwo.class);
        spec = tabHost.newTabSpec("tabTwo");
        spec.setContent(intent);
        spec.setIndicator("Tab Two");
        tabHost.addTab(spec);
        tabHost.getTabWidget().getChildAt(1).getLayoutParams().height = 40;
        RelativeLayout rlrf = (RelativeLayout)tw.getChildAt(1);
        TextView rf = (TextView)rlrf.getChildAt(1);
        rf.setTextSize(20);

        tabHost.setCurrentTab(0);
}

Save and fire up the emulator, and you should be able to switch back and forth between your tabs!

Print | posted @ Tuesday, December 21, 2010 9:26 AM