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!
