iPhone Like Toolbar for Android

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 aTextView 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.