In Tim Bray's latest Android blog post he mentions the "dashboard" ui pattern (what is used for the Twitter app, Facebook app, etc. Is this layout as simple as a GridView with Buttons or is it something else?
Update:
The DashboardLayout was released by Roman Nurik last night. It is a derivative of the layout used in the Google IO 2010 app.
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:
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>
The Dashboard layout did not work for me, thus I suggest a layout based solution. It's just a bunch of layouts within layouts.
The key is the relativity of weights between the spacing layouts and the content layouts.
You can very simply move icons and define other layouts for bigger or lighter dashboards.
Here is how it looks like:
And here is the xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/dashboard"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout style="@style/dashboard_space_vertical" />
<LinearLayout style="@style/dashboard_content_vertical" >
<FrameLayout style="@style/dashboard_space_horizontal" >
</FrameLayout>
<LinearLayout style="@style/dashboard_content_horizontal" >
<ImageView
style="@style/dashboard_imageview"
android:src="@android:drawable/sym_call_missed" />
<TextView
style="@style/dashboard_textview"
android:text="Text 1" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_horizontal" />
<LinearLayout style="@style/dashboard_content_horizontal" >
<ImageView
style="@style/dashboard_imageview"
android:src="@android:drawable/sym_call_missed" />
<TextView
style="@style/dashboard_textview"
android:text="Text 2" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_horizontal" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_vertical" />
<LinearLayout style="@style/dashboard_content_vertical" >
<FrameLayout style="@style/dashboard_space_horizontal" />
<LinearLayout style="@style/dashboard_content_horizontal" >
<ImageView
style="@style/dashboard_imageview"
android:src="@android:drawable/sym_call_missed" />
<TextView
style="@style/dashboard_textview"
android:text="Text 3" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_horizontal" />
<LinearLayout style="@style/dashboard_content_horizontal" >
<ImageView
style="@style/dashboard_imageview"
android:src="@android:drawable/sym_call_missed" />
<TextView
style="@style/dashboard_textview"
android:text="Text 4" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_horizontal" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_vertical" />
<LinearLayout style="@style/dashboard_content_vertical" >
<FrameLayout style="@style/dashboard_space_horizontal" />
<LinearLayout style="@style/dashboard_content_horizontal" >
<ImageView
style="@style/dashboard_imageview"
android:src="@android:drawable/sym_call_missed" />
<TextView
style="@style/dashboard_textview"
android:text="Text 5" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_horizontal" />
<LinearLayout style="@style/dashboard_content_horizontal" >
<ImageView
style="@style/dashboard_imageview"
android:src="@android:drawable/sym_call_missed" />
<TextView
style="@style/dashboard_textview"
android:text="Text 6" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_horizontal" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_vertical" />
</LinearLayout>
Here are the styles:
<resources>
<style name="dashboard_space_vertical">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">0px</item>
<item name="android:layout_weight">1</item>
</style>
<style name="dashboard_content_vertical">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">0px</item>
<item name="android:layout_weight">3</item>
<item name="android:layout_gravity">center</item>
</style>
<style name="dashboard_space_horizontal">
<item name="android:layout_width">0px</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:layout_weight">2</item>
<!-- <item name="android:background">@color/black</item> -->
</style>
<style name="dashboard_content_horizontal">
<item name="android:layout_width">0px</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:layout_weight">3</item>
<item name="android:orientation">vertical</item>
<item name="android:layout_gravity">center</item>
<item name="android:gravity">center</item>
</style>
<style name="dashboard_imageview">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:layout_weight">1</item>
<item name="android:scaleType">fitCenter</item>
</style>
<style name="dashboard_textview">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">center</item>
<item name="android:textSize">@dimen/dashboard_thumbnail_text_size</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/blue</item>
</style>
</resources>
Hope this helps someone. Enjoy.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With