Mobile

Google I/O 2011 App

In this post I will show you the steps to quickly implement a dashboard activity in your app starting with the open source, apache licence DashboardLayout by romannurik from the Google I/O app.

A dashboard is the welcoming screen of your app. It provides a starting point for the user. A dashboard can be static or dynamic, e.g. you can incorporate live wallpapers or changing content such as news items.

On a category dashboard, entrance points to content are displayed in several categories. The categories are represented by an icon and a title, and lie full screen in a grid orientation. This lay-out allows the user to find content faster.

Android Patterns

First start by creating a new class DashboardLayout.java within your project and copy and pasting the code from github into it. You’ll need to change package com.google.android.apps.iosched.ui.widget; to the package where it is located in your project and press ctrl+shift+O in Eclipse to re-organise imports.

Next up create a new class, DashboardActivity that extends Activity – in my case it extends GDActivity as I am also using the Greendroid library – for quick implementation of an ActionBar but yours can just extend Activity.

Add this new Activity to your AndroidManifest.xml and make it the main one, (mine is in the .ui package, if yours is in the root or elsewhere then remove .ui and change as appropriate):

<activity android:name=".ui.DashboardActivity" android:label="@string/app_name">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

Create a new xml layout, dashboard.xml. Where mine has the tag <com.samcoles.layout.DashboardLayout> you will need to change the part prefixing DashboardLayout to the package where it is located. You may notice they all use the same @drawable, dashboard_buton_add – you will want to change this per button to something more relevant but for simplicity, here they are all going to use the same graphics.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

    <com.samcoles.layout.DashboardLayout
	    xmlns:android="http://schemas.android.com/apk/res/android"
	    android:orientation="vertical"
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent">

	    <Button android:id="@+id/dashboard_button_add"
	        style="@style/DashboardButton"
	        android:text="@string/activity_add"
	        android:drawableTop="@drawable/dashboard_button_add" />

        <Button android:id="@+id/dashboard_button_viewall"
	        style="@style/DashboardButton"
	        android:text="@string/activity_viewall"
	        android:drawableTop="@drawable/dashboard_button_add" />

        <Button android:id="@+id/dashboard_button_manage"
	        style="@style/DashboardButton"
	        android:text="@string/activity_manage"
	        android:drawableTop="@drawable/dashboard_button_add" />

        <Button android:id="@+id/dashboard_button_personalbests"
	        style="@style/DashboardButton"
	        android:text="@string/activity_personalbests"
	        android:drawableTop="@drawable/dashboard_button_add" />    

    </com.samcoles.layout.DashboardLayout>

</LinearLayout>

You’ll notice in the dashboard.xml layout there are a number of @string, @style and @drawable resources referenced. Create or replace the string resources within strings.xml, which is created by default in Eclipse when you create a project. Also in your /res/values folder create a new file style.xml and in here place the style for DashboardButton:

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="DashboardButton">
		<item name="android:layout_gravity">center_vertical</item>
		<item name="android:layout_width">wrap_content</item>
		<item name="android:layout_height">wrap_content</item>
		<item name="android:gravity">center_horizontal</item>
		<item name="android:drawablePadding">2dp</item>
		<item name="android:textSize">14sp</item>
		<item name="android:textStyle">bold</item>
		<item name="android:textColor">#ff0000</item>
		<item name="android:background">@null</item>
	</style>
</resources>

Next up create a folder /res/drawable and in here create a new file, dashboard_button_add.xml (you will need to create multiple different xml files for each button in here and reference them from the dashboard.xml layout. As I mentioned before, we are using the same one for all four buttons here.

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

Create and add the graphics referenced above to your /res/drawable-hdpi folder. These are add_button_default.png and add_button_selected.png. I made mine the same size as the ones in the Google I/O app, 144px * 96px but the proportions aren’t fixed using DashboardLayout.

Here they are in all their glory. The best part about them is that I didn’t even manage to get the horizontal line straight. Once these placeholders are in you can update them later with proper graphics as well as create new @drawable xml for each different button on the dashboard.

add_button_default.png

add_button_selected.png

Next up, head back to your DashboardActivity. Within this class create a new inner class, DashboardClickListener that implements the OnClickListener interface. Implement the method onClick(). Here you can call getId() on the View passed to the handler, to get the Id of which button was clicked – this is specified in your dashboard.xml layout. Put this in a switch block and you can then handle the click event however you like, it’s likely you’ll want to just start a new activity with each, here’s mine:

private class DashboardClickListener implements OnClickListener {
	@Override
	public void onClick(View v) {
		Intent i = null;
		switch (v.getId()) {
			case R.id.dashboard_button_add:
				i = new Intent(DashboardActivity.this, AddCapture.class);
				break;
			case R.id.dashboard_button_viewall:
				i = new Intent(DashboardActivity.this, ViewAll.class);
				break;
			case R.id.dashboard_button_manage:
				i = new Intent(DashboardActivity.this, Manage.class);
				break;
			case R.id.dashboard_button_personalbests:
				i = new Intent(DashboardActivity.this, PersonalBests.class);
				break;
			default:
				break;
		}
		if(i != null) {
			startActivity(i);
		}
	}
}

Last but certainly not least, in your overridden onCreate() method in DashboardActivity, you need to create an instance of DashboardClickListener and attach this to each button. Below is my full overridden onCreate() method – setActionBarContentView() is just the GreenDroid alternative to setContentView() – you can use the latter instead.

@Override
public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setActionBarContentView(R.layout.dashboard);

	//attach event handler to dash buttons
	DashboardClickListener dBClickListener = new DashboardClickListener();
	findViewById(R.id.dashboard_button_add).setOnClickListener(dBClickListener);
	findViewById(R.id.dashboard_button_viewall).setOnClickListener(dBClickListener);
	findViewById(R.id.dashboard_button_manage).setOnClickListener(dBClickListener);
	findViewById(R.id.dashboard_button_personalbests).setOnClickListener(dBClickListener);
}

If all went well, you should now have a working dashboard! Remember you can have more or less buttons on your dashboard, but 6 options appears to be the standard max across most Android Apps I’ve seen and used. Aside from the Google I/O 2011 app, other examples include LinkedIn and tastecard.

Dashboard Screenshot, New Capture being pressed

A working example project based on this post can be found on github.