Android - Switching Activities with a Tab Layout

Posted by Bill Osuch on Geeks with Blogs See other posts from Geeks with Blogs or by Bill Osuch
Published on Tue, 21 Dec 2010 15:26:14 GMT Indexed on 2010/12/21 15:55 UTC
Read the original article Hit count: 450

Filed under:

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!

© Geeks with Blogs or respective owner