Android TabActivity with two list views

Aug 25, 2010 | 7 min read | Android, Android Tutorial, Tabs, Open Source

Often times when creating an activity with tabs, it’s easy to have a separate activity for the tab content. However, things get tricky when those activities need to interact with one another.

So the solution is to create a tabactivity with views (instead of activities) as the tab content. We see a very simple example of this in the official Android tutorial Hello, TabWidget.

In this tutorial, we will create a slightly more advanced application. We will have two listviews as the content of a tabactivity and have them interact with one another (basically by clicking the items of one list view will add them to the second list view).

Step 1: Create Layout

First we need to create a layout that features a TabHost, TabWidget, and our two List Views:

<?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">
			<ListView android:id="@+id/list1" android:layout_width="fill_parent"
				android:layout_height="wrap_content" android:layout_weight="1">
			</ListView>
			<ListView android:id="@+id/list2" android:layout_width="fill_parent"
				android:layout_height="wrap_content" android:layout_weight="1">
			</ListView>
		</FrameLayout>
	</LinearLayout>
</TabHost>

Step 2: Create Activity

Next, we will write the Java source for our TabActivity. First, we create an Activity that extends TabActivity. We want to get the tabhost from the tabactivity to add our two list views.

tabHost = getTabHost();

// setup list view 1

listView1 = (ListView) findViewById(R.id.list1);

// setup list view 2

listView2 = (ListView) findViewById(R.id.list2);

Next, we need to add the views to the tabhost by setting the content of each tab as an anonymous class of TabContentFactory.

// add views to tab host

tabHost.addTab(tabHost.newTabSpec(LIST1_TAB_TAG).setIndicator(LIST1_TAB_TAG).setContent(new TabContentFactory() {
	public View createTabContent(String arg0) {
		return listView1;
	}
}));
tabHost.addTab(tabHost.newTabSpec(LIST2_TAB_TAG).setIndicator(LIST2_TAB_TAG).setContent(new TabContentFactory() {
	public View createTabContent(String arg0) {
		return listView2;
	}
}));

Step 3: Customize

If you want to programmatically change the tab, you should call setCurrentTab(index) on the tabhost where index is the tab number. If you want to add a listener to know when the user changes the tab, you need to add a OnTabChangeListener like this: tabHost.setOnTabChangedListener(this)

Full Source

The full source for this example is here:

/**
 * This activity allows you to have multiple views (in this case two {@link ListView}s)
 * in one tab activity.  The advantages over separate activities is that you can
 * maintain tab state much easier and you don't have to constantly re-create each tab
 * activity when the tab is selected.
 */
public class TabbedListListActivity extends TabActivity implements OnTabChangeListener {

	private static final String LIST1_TAB_TAG = "List1";
	private static final String LIST2_TAB_TAG = "List2";

	// The two views in our tabbed example

	private ListView listView1;
	private ListView listView2;

	private TabHost tabHost;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

		tabHost = getTabHost();
		tabHost.setOnTabChangedListener(this);

		// setup list view 1

		listView1 = (ListView) findViewById(R.id.list1);

		// create some dummy strings to add to the list

		List<String> list1Strings = new ArrayList<String>();
		list1Strings.add("Item 1");
		list1Strings.add("Item 2");
		list1Strings.add("Item 3");
		list1Strings.add("Item 4");
		listView1.setAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1, list1Strings));

		// setup list view 2

		listView2 = (ListView) findViewById(R.id.list2);

		// create some dummy strings to add to the list (make it empty initially)

		List<String> list2Strings = new ArrayList<String>();
		listView2.setAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1, list2Strings));

		// add an onclicklistener to add an item from the first list to the second list

		listView1.setOnItemClickListener(new OnItemClickListener() {
			public void onItemClick(AdapterView parent, View view, int position, long id) {
				String item = (String) listView1.getAdapter().getItem(position);
				if(item != null) {
					((ArrayAdapter) listView2.getAdapter()).add(item);
					Toast.makeText(TabbedListListActivity.this, item + " added to list 2", Toast.LENGTH_SHORT).show();
				}
			}
		});

		// add views to tab host

		tabHost.addTab(tabHost.newTabSpec(LIST1_TAB_TAG).setIndicator(LIST1_TAB_TAG).setContent(new TabContentFactory() {
			public View createTabContent(String arg0) {
				return listView1;
			}
		}));
		tabHost.addTab(tabHost.newTabSpec(LIST2_TAB_TAG).setIndicator(LIST2_TAB_TAG).setContent(new TabContentFactory() {
			public View createTabContent(String arg0) {
				return listView2;
			}
		}));

    }

	/**
	 * Implement logic here when a tab is selected
	 */
	public void onTabChanged(String tabName) {
		if(tabName.equals(LIST2_TAB_TAG)) {
			//do something

		}
		else if(tabName.equals(LIST1_TAB_TAG)) {
			//do something

		}
	}
}

Now when you run this app, you will have a tab activity with two tabs (each list view). Clicking on one item in the first tab will add that item to the second tab.

More advanced tutorials with tabs to come, including a tab activity with a map view and list view and the interaction between them.

Check out Android Tabs with Map and List View Tutorial.

To see a mult-list tab activity in action, check out my “Draft Punk” Android app.

« PREVIOUS
Draft Punk Android App

NEXT »
Android Tabs with interacting map and list views

Step 1: Create Layout

Step 2: Create Activity

Step 3: Customize

Full Source

You May Also Enjoy

Android Performance Improvements for Slideshare

Fragments, Tab Adapter, and Different Layouts