Android Dashboard Pattern Android Dashboard Pattern android android

Android Dashboard Pattern


The best example you can use is from the Google I/O 2011 Android App. They implement all those design patterns in their app. You can find the code at the following link:

http://code.google.com/p/iosched/source/browse/android/res/layout/fragment_dashboard.xml?r=27a82ff10b436da5914a3961df245ff8f66b6252

The 2011 version uses a custom layout called 'DashboardLayout' in a fragment which gets shared in phone and tablet specific layouts. The logic in DashboardLayout is responsible for all the auto layout magic!


Code of DashboardLayout from IO 2010 app was rather buggy. But Roman Nurik has fixed it and now it's possible to use DashboardLayout easily in your app.

Howto:

  1. Add this class into your project
  2. In your layout, just drop couple of buttons inside DashboardLayout, similar like here.


I was able to achieve a similar dashboard using a relative layout. Its still a work in progress, so your mileage may vary.

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/lay_wrapper"    android:layout_width="fill_parent"    android:layout_height="wrap_content" >    <LinearLayout android:id="@+id/lay_action"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:background="#000000" >        <TextView android:id="@+id/label_header"            android:layout_width="wrap_content"            android:layout_height="50px"            android:text="@string/app_title"            android:textColor="#000000"            android:textSize="25sp"            android:paddingLeft="10px"            android:gravity="center_vertical"            android:layout_gravity="center_vertical"             />    </LinearLayout>    <RelativeLayout android:id="@+id/lay_main"        android:layout_width="wrap_content"        android:layout_height="wrap_content"         android:layout_below="@id/lay_action"        android:paddingTop="25px"        android:layout_centerInParent="true">        <Button android:id="@+id/button1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/button1"            android:padding="25dip"            android:drawableTop="@drawable/button1" />        <Button android:id="@+id/button2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_toRightOf="@id/button1"            android:text="@string/button2"            android:padding="25dip"            android:drawableTop="@drawable/button2" />        <Button android:id="@+id/button3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_below="@id/button1"            android:text="@string/button3"            android:padding="25dip"            android:drawableTop="@drawable/button3" />        <Button android:id="@+id/button4"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_toRightOf="@id/button3"            android:layout_below="@id/button2"            android:text="@string/button4"            android:padding="25dip"            android:drawableTop="@drawable/button4" />    </RelativeLayout></RelativeLayout>