We recently launched our own augmented reality Android application. Check it out here.

This morning London Datastore announced that TFL had lifted all restrictions on commercial reuse of its data (via @retomeier). I love the idea of building a London transport application for Android so I started playing around with the station data which lead me to investigate how Keyhole Markup Language functions on the Android platform.

Launching the native Maps application from within a bespoke application with some KML data from the internet is really easy.

 
public class LoadActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Uri uri = Uri.parse("geo:0,0?q=http://paxmodept.com/files/office.kml");
        Intent mapIntent = new Intent(Intent.ACTION_VIEW, uri);
        startActivity(mapIntent);        
    }
}

Best of all is that you can do the same thing by simply clicking on a KML file in the Android browser. You can try it from your Android device here. I can imagine plenty of use cases for this including store locations and favourite places.

So people are starting to say that the next few months are going to be the start of an Android tsunami. Rumours are that we'll be seeing Sony Ericsson, Motorola, LG and Samsung all releasing at least 10 new Android devices *each* before the end of the year.

Personally we have seen 24 new Android devices hit our provisioning platform since the start of April alone however that is still nothing compared to Samsung who added 50+ new devices to our database in the same period. Interesting times ahead for Android developers!

This past weekend I went to Kenwood House to wander around and happened on a Merlin band clock which is a stunningly beautiful mechanical clock designed by the inventor John Joseph Merlin in the 1770s. I want one!

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

A physicist, engineer and a statistician are out hunting. Suddenly, a deer appears 50 yards away.

The physicist does some basic ballistic calculations, assuming a vacuum, lifts his rifle to a specific angle, and shoots. The bullet lands 5 yards short.

The engineer adds a fudge factor for air resistance, lifts his rifle slightly higher, and shoots. The bullet lands 5 yards long.

The statistician yells "We got him!"

As found alongside Regent's Canal in Camden Town. Appropriate!

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.