Creating Custom Android Tabs

How To: Custom Android Tabs

From an Android app that I'm working on

Q.) Can I just have the code, please?
A.) Sample Project here.

What's in this post?

1. Creating simple tabs
2. Adding some styling to the tabs
3. Detecting when tabs are pressed
4. Additional suggestions/ideas

Simple tabs & styles

Android makes it very easy to add boilerplate tabs to any application without doing much work. The documentation for the tab layout shows a simple example, but more often than not its not enough or even useful. Lets take the next steps towards creating beautiful tabs.

Start by creating a simple Activity that inherits from TabActivity:

	public class TabTutorialActivity extends TabActivity {
	@Override
	public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.main);
	}
	}

view raw gistfile1.java hosted with ❤ by GitHub

Now create the layout which will show the tabs and their content:

	<?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:id="@+id/tabcontainer"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical" >
	<TabWidget
	android:id="@android:id/tabs"
	android:layout_width="fill_parent"
	android:layout_height="48dp"
	android:background="#000"
	android:gravity="center_horizontal" >
	</TabWidget>
	<FrameLayout
	android:id="@android:id/tabcontent"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:fadeScrollbars="false"
	android:fadingEdge="none"
	android:scrollbars="@null" >
	</FrameLayout>
	</LinearLayout>
	</TabHost>

view raw gistfile1.xml hosted with ❤ by GitHub

The key components here are: TabHost, TabWidget and FrameLayout. TabHost is the container within which Android manages tabs. TabWidget is the component that visually contains the tabs (usually horizontally in a row). FrameLayout will show content when a tab is selected.

Now that we've created the core infrastructure for the tabs lets design a basic tab.

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/tab"
	android:layout_width="wrap_content"
	android:layout_height="48dp"
	android:layout_gravity="left"
	android:orientation="vertical" >
	<TextView
	android:id="@+id/tabLabel"
	android:layout_width="fill_parent"
	android:layout_height="43dp"
	android:gravity="center_vertical|center_horizontal"
	android:textColor="#FFF"
	android:textSize="14sp" />
	<TextView
	android:id="@+id/tabSelectedDivider"
	android:layout_width="fill_parent"
	android:layout_height="5dp"
	android:layout_alignParentBottom="true"
	android:background="#3366CC"
	android:visibility="gone" />
	<TextView
	android:id="@+id/tabDivider"
	android:layout_width="fill_parent"
	android:layout_height="2dp"
	android:layout_alignParentBottom="true"
	android:background="#3366CC" />
	<TextView
	android:id="@+id/tabSplitter"
	android:layout_width="1px"
	android:layout_height="23dp"
	android:layout_alignParentRight="true"
	android:layout_marginTop="10dp"
	android:background="#333" />
	</RelativeLayout>

view raw gistfile1.xml hosted with ❤ by GitHub

There are 5 things to worry about here. The main layout (@+id/tab)holds the styling for the tab. You can make the view very complex by showing notification #s (kinda like Facebook shows their notification indicator) and what not, but lets keep it simple here. @+id/tabLabel will show whatever text you'd like to show for the tab. Try adding an image instead of a text view if you'd like to show icons instead.        @+id/tabSelectedDivider highlights whichever tab is selected and @+id/tabDivider just adds a nice highlight under the tabs. Finally, @+id/tabSplitter adds a subtle vertical separator between tabs. These elements are more for aesthetics than for functionality (except tabLabel :p).

So far so good. Now lets hook in this individual tab view the activity layout. Start by adding some required objects right above the onCreate method of your TabActivity:

	// Divide 1.0 by # of tabs needed
	// In this case: 1.0/2 => 0.5
	private static final LayoutParams params = new LinearLayout.LayoutParams(
	LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT, 0.5f);
	private static TabHost tabHost;
	private static TabHost.TabSpec spec;
	private static Intent intent;
	private static LayoutInflater inflater;
	private View tab;
	private TextView label;
	private TextView divider;

view raw gistfile1.java hosted with ❤ by GitHub

The 0.5f that you see there is the weight of the layout. What that means is that the tab will take 50% of the real estate that its parent (tabWidget) has, which in this case can expand to 100% width of the screen. For example, if you wanted 4 tabs, you could change 0.5f to 0.25f. Next, we need services to handle the tabs and to use the custom tab view that we created. Add these to the onCreate method:

	// Get inflator so we can start creating the custom view for tab
	inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
	// Get tab manager
	tabHost = getTabHost();

view raw gistfile1.java hosted with ❤ by GitHub

Now to hook in the tab view to the tab widget. Add this under the the previous step:

	// This converts the custom tab view we created and injects it into the tab widget
	tab = inflater.inflate(R.layout.tab, getTabWidget(), false);
	// Mainly used to set the weight on the tab so each is equally wide
	tab.setLayoutParams(params);
	// Add some text to the tab
	label = (TextView) tab.findViewById(R.id.tabLabel);
	label.setText("HOME");
	// Show a thick line under the selected tab (there are many ways to show
	// which tab is selected, I chose this)
	divider = (TextView) tab.findViewById(R.id.tabSelectedDivider);
	divider.setVisibility(View.VISIBLE);
	// Intent whose generated content will be added to the tab content area
	intent = new Intent(TabTutorialActivity.this, TabContentActivity.class);
	// Just some data for the tab content activity to use (just for demonstrating changing content)
	intent.putExtra("content", "Content for HOME");
	// Finalize the tabs specification
	spec = tabHost.newTabSpec("home").setIndicator(tab).setContent(intent);
	// Add the tab to the tab manager
	tabHost.addTab(spec);

view raw gistfile1.java hosted with ❤ by GitHub

The comments pretty much state whats going on, but just to reiterate we create handles to the tab view, add some text to it, link it to another activity (to show some content) and add the tab to the tab manager. Add another tab:

	// Add another tab
	tab = inflater.inflate(R.layout.tab, getTabWidget(), false);
	tab.setLayoutParams(params);
	label = (TextView) tab.findViewById(R.id.tabLabel);
	label.setText("USERS");
	intent = new Intent(TabTutorialActivity.this, TabContentActivity.class);
	intent.putExtra("content", "Content for USERS");
	spec = tabHost.newTabSpec("users").setIndicator(tab).setContent(intent);
	tabHost.addTab(spec);

view raw gistfile1.java hosted with ❤ by GitHub

Now, just to show that clicking each tab actually works and changes something, create a dummy activity, which accepts a parameter passed in from the tab and displays it in the FrameLayout for the tab activity.

	public class TabContentActivity extends Activity {
	@Override
	public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	TextView textview = new TextView(this);
	// Get data passed in from the tab for display
	textview.setText(getIntent().getStringExtra("content"));
	setContentView(textview);
	}
	}

view raw gistfile1.java hosted with ❤ by GitHub

Detecting When Tabs Are Pressed

Ok cool, now that the basics work, you can jump to more interesting stuff. Tabs are useful for showing segmented data. For such a scenario it's very meaningful for the user to see which of these segments s/he is looking at. Web apps add sprites, which move as the mouse hovers over buttons, etc. Android can accomplish this via state lists, what are the pseudo classes in CSS. I've decided to add a subtle line under the selected tab. Heres how to do that:

	// Listener to detect when a tab has changed. I added this just to show
	// how you can change UI to emphasize the selected tab
	tabHost.setOnTabChangedListener(new OnTabChangeListener() {
	@Override
	public void onTabChanged(String tag) {
	// reset some styles
	clearTabStyles();
	View tabView = null;
	// Use the "tag" for the tab spec to determine which tab is selected
	if (tag.equals("home")) {
	tabView = getTabWidget().getChildAt(0);
	}
	else if (tag.equals("users")) {
	tabView = getTabWidget().getChildAt(1);
	}
	tabView.findViewById(R.id.tabSelectedDivider).setVisibility(View.VISIBLE);
	}
	});
	private void clearTabStyles() {
	for (int i = 0; i < getTabWidget().getChildCount(); i++) {
	tab = getTabWidget().getChildAt(i);
	tab.findViewById(R.id.tabSelectedDivider).setVisibility(View.GONE);
	}
	}

view raw gistfile1.java hosted with ❤ by GitHub

This snippet will detect when a tab is pressed and react accordingly to indicate to the user that the press was registered giving a satisfying feel.

Additional Suggestions

There can be a million ways tabs can be created. I've shown you the core of whats required and how to style tabs. In some of my other projects I've created tabs with icons and text, with just icons, with just text, with sprites, with changing text. You can even make vertical tabs (not recommended) if you'd like. Just play around with it (Of course shoot me a comment if you have questions). I also recommend researching mobile patterns (mobile-patterns.com, androidpatterns.com) to learn more about what goes and what doesnt. Also, if you prefer to view the snippets I've used here, visit:

gist.github.com/nitindhar7