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!
