Recently my company has been getting a few projects where people ask us to build Android versions of their iPhone applications. As a result of these projects I needed to create a simple iPhone like Toolbar component for Android. I extended the original component so that it could also double as a more flexible Tab component. Here are the results.

Layout for default activity - main.xml

Note the last component. This points to the class below. I also use a custom attribute to indicate which tab is currently selected.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.paxmodept.demo" 
    android:orientation="vertical"
    android:background="@android:color/white"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
  
	<TextView  
	    android:layout_width="fill_parent" 
	    android:layout_height="wrap_content" 
	    android:layout_weight="1"
	    android:text="@string/hello" 
	    android:gravity="center"/>    
    
    <com.paxmodept.demo.Toolbar 
	    android:layout_width="fill_parent"
	    android:layout_height="70dip" 
	    app:textViewId="option1"/>
    
</LinearLayout>

Class - Toolbar.java

This is the class that controls the component. These custom components are a nice way to re-use code efficiently. Note how I inflate the navigation layout file.

public class Toolbar extends LinearLayout {

	public Toolbar(final Context context) {
		super(context);
	}
	
	public Toolbar(final Context con, AttributeSet attrs) {
		super(con,attrs);		
		setOrientation(HORIZONTAL);
		setBackgroundColor(getResources().
				getColor(android.R.color.transparent));

		LayoutInflater inflater = (LayoutInflater) 
		con.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		inflater.inflate(R.layout.navigation, this);
		
		TypedArray a = con.obtainStyledAttributes(attrs, 
				R.styleable.Toolbar);
		String option = a.getString(R.styleable.Toolbar_textViewId);
		
		String resourceId = "com.paxmodept.demo:id/"+option;
		int optionId = getResources().getIdentifier(resourceId,null,null);        		
		TextView currentOption = (TextView) findViewById(optionId);
		currentOption.setBackgroundColor(getResources().
				getColor(android.R.color.white));
		currentOption.setTextColor(getResources().
				getColor(android.R.color.black));
		currentOption.requestFocus(optionId);
		currentOption.setFocusable(false);
		currentOption.setClickable(false);
		
		TextView option1 = (TextView) findViewById(R.id.option1);
		option1.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				CharSequence txt = "Hello!";
				int len = Toast.LENGTH_SHORT;
				Toast toast = Toast.makeText(con, txt, len);
				toast.show();
			}
		});
	}
}

Include File - navigation.xml

This creates the navgation bar. It uses compound drawables in a TextView component to minimise the number of components needed. Note that the background and textColor attributes of each TextView component are ColourStateLists. This gives you a great deal of flexibility in terms of creating a custom look and feel.

<merge 
	xmlns:android="http://schemas.android.com/apk/res/android">

	<TextView android:id="@+id/option1"
        android:layout_height="70dip" 
        android:layout_width="80dip"	 
        android:text="Title 1" 
        android:textSize="10dip" 
	android:textStyle="bold" 
	android:textColor="@drawable/text_states" 
        android:clickable="true"
        android:focusable="true" 
        android:background="@drawable/backgound_states" 
        android:drawableTop="@android:drawable/ic_menu_edit" 
        android:gravity="center"
        android:layout_weight="1"/>
        
	<TextView android:id="@+id/option2"
        android:layout_height="70dip" 
        android:layout_width="80dip"	 
        android:text="Title 2" 
        android:textSize="10dip" 
	android:textStyle="bold" 
	android:textColor="@drawable/text_states" 
        android:clickable="true"
        android:focusable="true" 
        android:background="@drawable/backgound_states" 
        android:drawableTop="@android:drawable/ic_menu_zoom" 
        android:gravity="center" 
        android:layout_weight="1"/>

	<TextView android:id="@+id/option3"
        android:layout_height="70dip" 
        android:layout_width="80dip"	 
        android:text="Title 3" 
        android:textSize="10dip" 
	android:textStyle="bold" 
	android:textColor="@drawable/text_states" 
        android:clickable="true"
        android:focusable="true" 
        android:background="@drawable/backgound_states" 
        android:drawableTop="@android:drawable/ic_menu_add" 
        android:gravity="center"
        android:layout_weight="1"/>

	<TextView android:id="@+id/option4"
        android:layout_height="70dip" 
        android:layout_width="80dip"	 
        android:text="Title 4" 
        android:textSize="10dip" 
	android:textStyle="bold" 
	android:textColor="@drawable/text_states" 
        android:clickable="true"
        android:focusable="true" 
        android:background="@drawable/backgound_states" 
        android:drawableTop="@android:drawable/ic_menu_help" 
        android:gravity="center"
        android:layout_weight="1"/>
	                
</merge>

I am sure there are alternate ways of creating the navigation bar but this strategy worked for me.

Source code updated 11/08/2010 Please note that the source code is now more comprehensive but is slightly different from the tutorial displayed above.

Download the source code for the entire project.