Android Dashboard Pattern

Question

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 Twitter application will be released as open source sometime, as noted in that blog post. Until then, it is going to be difficult for us to tell how it is implemented. — CommonsWare, May 20 '10 at 13:12
Does any one have a solution for a Dashboard with Drag and Drop of Views inside the dashboard with self re-organization of children & thumbnail of the view appearing on drag ? — Snicolas, Jan 11 '13 at 15:12

score 40 · Accepted Answer · edited Jul 16 '12 at 17:37

40

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!

edited Jul 16 '12 at 17:37

CiTuX

478
4
7

answered Jun 03 '10 at 13:35

Jaime Botero

2,263
2
22
14

2

The dashboard layout didn't work for me. It put all of the icons one above the other. It happens When I use it in another layout element. Perhaps the calculation have trouble with an outer layout? – AlikElzin-kilaka Dec 15 '11 at 14:37
I have the same problem when the dashboard is the root element. – Paul Apr 17 '12 at 04:01

score 25 · Answer 2 · edited Jul 16 '12 at 18:05

25

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:

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

edited Jul 16 '12 at 18:05

CiTuX

478
4
7

answered May 19 '11 at 08:23

David Vávra

18,446
7
48
56

score 4 · Answer 3 · answered May 20 '10 at 22:56

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>

score 4 · Answer 4 · answered Dec 24 '11 at 11:51

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:

portrait

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.

I use it by using an include: – AlikElzin-kilaka Dec 24 '11 at 11:53 — AlikElzin-kilaka, Dec 24 '11 at 11:53

score 2 · Answer 5 · answered May 20 '10 at 13:16

2

It could be implemented with a TableLayout containing Image- and TextViews.

answered May 20 '10 at 13:16

molnarm

9,856
2
42
60

Can you please post an example or a link to a good example? Thanks. – AlikElzin-kilaka Dec 15 '11 at 14:29

score 2 · Answer 6 · answered Nov 01 '11 at 05:43

2

the best and the simplest way of creating Dashboard..

very nicely explained

How To Build A Dashboard User Interface In Android

answered Nov 01 '11 at 05:43

Jitu

284
1
3
15

score 1 · Answer 7 · answered Mar 28 '11 at 12:22

1

romannurik posted recently a custom ViewGroup to do this. The code is here.

answered Mar 28 '11 at 12:22

Macarse

91,829
44
175
230

The code is no longer maintained in github. See comment: **/* * ATTENTION: * * This layout is now maintained in the `iosched' code.google.com project: * * http://code.google.com/p/iosched/source/browse/android/src/com/google/android/apps/iosched/ui/widget/DashboardLayout.java * */** – AlikElzin-kilaka Dec 13 '11 at 17:33
@kilaka: Your link is dead – Abdul Rahman Apr 16 '13 at 07:39
@AbdulRahman: they changed the code. The dashboard if no longer used. Look at the history - you'll find the code there. – AlikElzin-kilaka Apr 17 '13 at 11:11

Android Dashboard Pattern

7 Answers7

Linked