Dashboard layout in Android

#dashboard

#layout

#style

#ux

#java

#ui

#android

If you need to implement a Dashboard layout in Android, you can use the great DashboardLayout from Google I/O 2011 app: DashboardLayout.java

You just place children elements into it like this:

<com.google.android.apps.iosched.ui.widget.DashboardLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/dashboard_grid"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 style="@style/Dashboard">

 <Button android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:drawableTop="@drawable/ic_dash_icon1"
 style="@style/Dashboard.Button"
 android:text="@string/dash_btn_live"/>

 <Button android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:drawableTop="@drawable/ic_dash_icon1"
 style="@style/Dashboard.Button"
 android:text="@string/dash_btn_live"/>
</com.google.android.apps.iosched.ui.widget.DashboardLayout>

These are the styles the layout refers to:

<style name="Dashboard.Button">
 <item name="android:textColor">@color/text_dash_button</item>
 <item name="android:background">@color/transparent</item>
 <item name="android:textSize">@dimen/dash_button_text</item>
</style>

<style name="Dashboard">
 <item name="android:listSelector">@color/dash_selector</item>
 <item name="android:background">@color/dash_bg</item>
</style>

The key here is using a transparent background and a drawableTop attribute for the buttons' icons.

EDIT Nov 20th, 2012: updated DashboardLayout code link