There are a lot of different ways to give UI components a custom look and feel in android. You can use bespoke raster images, you can use NinePatch images or you can use Android XML resources. Android XML resources can be vector based graphical components (the Android SPOD is created this way) or colour/drawable state lists (ColorStateLists and StateListDrawables). You can combine these XML resources together to create some really interesting user interfaces.

As an example of some of these techniques I'm going to extend the UI I originally created here (on the left of the image below) to become something slightly more interesting (on the right of the image below).

Stage One

Modify the StateListDrawable of each tab background (in the background_states.xml file) to point to a XML drawable instead of a colour.

 
<?xml version="1.0" encoding="utf-8"?> 
<selector 
	xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item 
    	android:state_focused="true" 
    	android:drawable="@drawable/navigation_focussed" />    	
    <item 
    	android:state_pressed="true" 
    	android:drawable="@drawable/navigation_pressed" /> 
    <item 
    	android:drawable="@drawable/navigation_off" /> 
</selector>

Stage Two

Create the XML drawable files in the res/drawable folder. The below file is called navigation_on.xml. It creates a white rectangle shape with curved top corners. You some reason you can't set the corner radius values to 0 so I had to use 0.1.

 
<?xml version="1.0" encoding="utf-8"?>
<shape 
	xmlns:android="http://schemas.android.com/apk/res/android" 
	android:shape="rectangle">
    <stroke 
    	android:width="3dip" 
    	android:color="@android:color/white" />
    <solid 
    	android:color="@android:color/white"/> 
    <corners 
	android:bottomRightRadius="0.1dip" 
	android:bottomLeftRadius="0.1dip" 
	android:topLeftRadius="15dip" 
	android:topRightRadius="15dip" />
</shape>

Stage Three

Add some space around each TextView component (tab) in the navigation.xml file via the layout_margin parameter.

 
<TextView android:id="@+id/option2"
        android:layout_height="70dip" 
        android:layout_width="80dip"	 
        android:layout_margin="4dip"
        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"/>
        

Stage Four

Create another XML resource file called navigation_bg.xml. This file takes a PNG file (navigation_bg_img.png) and tiles it across the entire background area. (The stars background in the top image).

 
<?xml version="1.0" encoding="utf-8"?> 
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/navigation_bg_img"
    android:tileMode="repeat"
    android:dither="true" />
    

Stage Five

Edit the Toolbar.java file. Set the background of the custom component to the newly created navigation_bg.xml file. Set the background drawable of the selected tab to the navigation_on.xml file defined above.

 
public class Toolbar extends LinearLayout {

	public Toolbar(final Context context) {
		super(context);
	}
	
	public Toolbar(final Context con, AttributeSet attrs) {
		super(con,attrs);		
		setOrientation(HORIZONTAL);
		setBackgroundDrawable(getResources().
			getDrawable(R.drawable.navigation_bg));

		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.setBackgroundDrawable(getResources().
			getDrawable(R.drawable.navigation_on));
		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();
			}
		});
	}
}

That's it. Not very pretty but functional. One problem with using XML resources is that the official documentation is seriously sparse however someone has created the "Missing Manual on Drawables XML in Android".