7Answers
  • 13
name

A PHP Error was encountered

Severity: Notice

Message: Undefined index: userid

Filename: views/question.php

Line Number: 191

Backtrace:

File: /home/prodcxja/public_html/questions/application/views/question.php
Line: 191
Function: _error_handler

File: /home/prodcxja/public_html/questions/application/controllers/Questions.php
Line: 433
Function: view

File: /home/prodcxja/public_html/questions/index.php
Line: 315
Function: require_once

name Punditsdkoslkdosdkoskdo

Android Dashboard Pattern

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.

      • 1
    • 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.
      • 2
    • 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 ?

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!

  • 41
Reply Report
    • 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?

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>
  • 4
Reply Report

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.

  • 4
Reply Report

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

  • 1
Reply Report