Search This Blog

Monday, August 2, 2010

Experience - Android UI Tab View

I have started an Android app at work. I was diving in head first and started with hello views tutorial. The tab view was interesting, but after copy-n-pasting some code and running the app I was less than satisfied with the results. First I was unable to view the XML layout of the Tabs and second there was a null pointer exception. I have seen a couple other notes and questions about this type of problem.

TabWidget causing null pointer
Why do I get a null pointer exception from TabWidget?

This article explains some of the things I did to improve on this issue.

Using XML to layout and define the TabHost and TabWidget I found no way around the null pointer exception. I was able to instead define these in code. The activity that runs on startup is called SampleTab. Below is its source.

package app.tabsample;

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.content.Intent;

public class TabSample extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

TabHost tabHost = getTabHost();

tabHost.addTab(tabHost.newTabSpec("tab1")
.setIndicator("MSG")
.setContent(new Intent(this, SelectActivity.class)));

tabHost.addTab(tabHost.newTabSpec("tab2")
.setIndicator("ARROW")
.setContent(new Intent(this, ArrowsActivity.class)));

tabHost.addTab(tabHost.newTabSpec("tab3")
.setIndicator("OPT")
.setContent(new Intent(this, OptionsActivity.class)));

tabHost.addTab(tabHost.newTabSpec("tab4")
.setIndicator("EDIT")
.setContent(new Intent(this, EditActivity.class)));

tabHost.setCurrentTab(1);
}
}


For the tab indicator, your choices are: 1) set a label 2) set a label and an icon. Note: api level 4 also adds 3) set a view. For the tab content, your choices are: 1) the id of a View 2) a TabContentFactory that creates the View content. 3) an Intent that launches an android.app.Activity. For simplicity I chose to set a label for the tab indicator and an Intent that launches an activity for the tab content. Note that the Activities need to be listed in the AndroidManifest.xml. Now looking at the first tab which calls the SelectActivity.

package app.tabsample;

import android.app.Activity;
import android.os.Bundle;

/**
* @author Administrator
*
*/
public class SelectActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tabstest1);
}
}


This activity simply sets its content to the XML file tabstest1.xml. There we have it a simple and easy to use way to create a TabHost and TabWidget without having a null pointer exception and still being able to see the XML tab content graphically in Eclipse. Just for reference my tabstest1.xml contains the following.

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<textview android:layout_width="fill_parent">
android:layout_height="wrap_content" android:text="@string/hello" />
<spinner android:id="@+id/Spinner01" android:layout_width="wrap_content">
android:layout_height="wrap_content" android:entries="@array/Spinner_Content">
</spinner>
</textview>
</linearlayout>


Below is a screen shot of my tabstest1 with the layout tab.

1 comment:

  1. And as I saw in your next posts, you weren't really happy with native tab functionality in android :)
    so am I

    ReplyDelete