Android TabHost in the M5 SDK
Thursday February 14, 2008 at 8:43 AM
So about a week ago I wrote up a quick example for TabHost. Then yesterday Google released a new version of the Android SDK which changed quite a bit. In the process, TabHost is no longer deprecated (yay!), but its interface has changed quite a bit, so I spent about an hour changing my earlier example to work.
Here is a quick run-down of what applies to TabHost: all of our id’s change to android:id’s, TabWidget’s width needs to fill_parent, and its height needs to be about 65px. The top padding of the content FrameLayout also needs to be about 65px.
The Java interface to TabHost also changed, letting us put both text and icons in the tabs:
setContentView(R.layout.tabs);
TabHost tabs = (TabHost)this.findViewById(R.id.tabs);
tabs.setup();TabHost.TabSpec one = tabs.newTabSpec(”one”);
one.setContent(R.id.content1);
one.setIndicator(”labelone”, this.getResources().getDrawable(R.drawable.gohome));
tabs.addTab(one);TabHost.TabSpec two = tabs.newTabSpec(”two”);
two.setContent(R.id.content2);
two.setIndicator(”labeltwo”);
tabs.addTab(two);tabs.setCurrentTab(0);
And here’s a peek at what the resulting output looks like:
The one nice feature is that the tabs are now clickable instead of just keypad-only. That’s about it, so have fun with TabHost in the new SDK. 
The home icon above came from the Tango Icon Library.
Using Android TabHost
Thursday February 07, 2008 at 9:17 PM
Update: the code below needs some slight changes to work with the new M5 SDK.
So over the past few weeks I’ve jumped into Google’s Android platform. It’s a blast and very well designed, but there are still some rough edges. One of those rough spots is getting a tab or paging control to work. The API documentation talks about a TabHost widget, but it has been marked as deprecated. (Already!? The API was just formed a few months ago, lol.) It speaks of a phantom “views/Tabs2.java” example which never shipped. There is also talk about a PageTurner widget, but no examples exist for that either.
Because I needed a tab-like control badly, I brute forced my way through getting a TabHost working. Hopefully this will save other developers some time. Remember that the TabHost widget is marked as deprecated in this version of the API. However, someone mentioned that TabHost might be making a comeback. In either case, here is a quick example of TabHost in action:
First let’s create an XML layout for our example, just a simple LinearLayout with a TabHost widget inside. It’s important to notice that the TabHost must contain both a TabWidget and a FrameLayout with specific id’s in order to work.
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
><TabHost
id=”@+id/tabs”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
><TabWidget
id=”@android:id/tabs”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
/><FrameLayout
id=”@android:id/tabcontent”
android:layout_width=”fill_parent”
android:layout_height=”200px”
android:paddingTop=”30px”
><LinearLayout
id=”@+id/content1″
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:background=”#ff99ccff”
><TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”tab item uno
/></LinearLayout>
<LinearLayout
id=”@+id/content2″
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:background=”#ffffcc99″
><TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”tab item dos :/”
/><Button
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”tabhost needs”
/><Button
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”to be upgraded”
/></LinearLayout>
</FrameLayout>
</TabHost>
</LinearLayout>
Inside the FrameLayout we can put our tab contents, which in this case are two LinearLayouts with different contents. These, of course, could be pulled by id and filled with dynamic content as needed. If I remember correctly, I think it was important that some sort of tab-content container needed to actually exist as a sub-widget under the FrameLayout in order for the tabs to work.
Next, let’s jump over to the Java code and build up the tab example.
setContentView(R.layout.tabs);
TabHost tabs = (TabHost)this.findViewById(R.id.tabs);
tabs.setup();tabs.addTab(”one”, R.id.content1, “labelone”);
tabs.addTab(”two”, R.id.content2, “labeltwo”);
Nothing too fancy, just pull the TabHost, initialize it, and let it know about the tabs we have. Now let’s give the example a spin on the emulator:
This is the first real look we’ve had at the TabHost widget, and it looks okay. Mouse clicking doesn’t switch tabs, so you need to use the keypad’s left/right arrow keys to navigate. The up/down keys work as expected on a tab with buttons, so not much to complain about.
