Tutorial details

Android – Dashboard design pattern implementation | App Code for Sale | Preview

Android – Dashboard design pattern implementation | Android Tutorial

How to implement Dashboard design pattern.

Overview PAGE TOP

Before reading this article, please learn the prerequisites mentioned above so that you can have better idea for the implementation of this solution which i am going to discuss here. Do you know what is Dashboard pattern exactly? In brief, we can say Dashboard is a page containing large and clear symbols of main functionality and optionally an area for relevant new information.

Go through these articles:

  1. UI Design Pattern – Dashboard (From Juhani Lehtimaki)
  2. Android UI design patterns

The main agenda of this article is to implement Dashboard design patter same as below:

mobappcoding.8.1.png

Step 1: Create Title bar layout PAGE TOP

Yes we define title bar (header) layout only once but it requires in every screens. We will just show/hide home button and other buttons whenever needed. Once you are done with defining title bar layout, we can use the same layout in other layouts by using ViewStub.

Here is example of Title bar (header) xml layout:

header.xml

1 <?xml version="1.0" encoding="utf-8"?>
2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3     android:layout_width="fill_parent"
4     android:layout_height="wrap_content"
5     android:background="@color/title_background" >
6  
7     <LinearLayout
8         android:id="@+id/panelIconLeft"
9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:layout_alignParentLeft="true"
12         android:layout_centerVertical="true"
13         android:layout_margin="5dp" >
14  
15         <Button
16             android:id="@+id/btnHome"
17             android:layout_width="wrap_content"
18             android:layout_height="wrap_content"
19             android:background="@drawable/ic_home"
20             android:onClick="btnHomeClick" />
21     </LinearLayout>
22  
23     <TextView
24         android:id="@+id/txtHeading"
25         style="@style/heading_text"
26         android:layout_width="fill_parent"
27         android:layout_height="wrap_content"
28         android:layout_centerInParent="true"
29         android:layout_marginLeft="5dp"
30         android:layout_marginRight="5dp"
31         android:layout_toLeftOf="@+id/panelIconRight"
32         android:layout_toRightOf="@id/panelIconLeft"
33         android:ellipsize="marquee"
34         android:focusable="true"
35         android:focusableInTouchMode="true"
36         android:gravity="center"
37         android:marqueeRepeatLimit="marquee_forever"
38         android:singleLine="true"
39         android:text=""
40         android:textColor="@android:color/white" />
41  
42     <LinearLayout
43         android:id="@+id/panelIconRight"
44         android:layout_width="wrap_content"
45         android:layout_height="wrap_content"
46         android:layout_alignParentRight="true"
47         android:layout_centerVertical="true"
48         android:layout_margin="5dp" >
49  
50         <Button
51             android:id="@+id/btnFeedback"
52             android:layout_width="wrap_content"
53             android:layout_height="wrap_content"
54             android:background="@drawable/ic_feedback"
55             android:onClick="btnFeedbackClick" />
56     </LinearLayout>
57  
58 </RelativeLayout>

In above layout code, i have referenced style from styles.xml and dimentions from dimen.xml:

styles.xml

1 <?xml version="1.0" encoding="utf-8"?>
2 <resources>
3 <style name="heading_text">
4         <item name="android:textColor">#ff000000</item>
5         <item name="android:textStyle">bold</item>
6         <item name="android:textSize">16sp</item>
7         <item name="android:padding">5dp</item>
8     </style>
9 <style name="HomeButton">
10         <item name="android:layout_gravity">center_vertical</item>
11         <item name="android:layout_width">fill_parent</item>
12         <item name="android:layout_height">wrap_content</item>
13         <item name="android:layout_weight">1</item>
14         <item name="android:gravity">center_horizontal</item>
15         <item name="android:textSize">@dimen/text_size_medium</item>
16         <item name="android:textStyle">normal</item>
17         <item name="android:textColor">@color/foreground1</item>
18         <item name="android:background">@null</item>
19     </style>
20  
21 </resources>

dimen.xml

1 <?xml version="1.0" encoding="utf-8"?>
2 <resources>
3     <dimen name="title_height">45dip</dimen>
4     <dimen name="text_size_small">14sp</dimen>
5     <dimen name="text_size_medium">18sp</dimen>
6     <dimen name="text_size_large">22sp</dimen>
7 </resources>

Step 2: Create super (abstract) class PAGE TOP

Actually, In this abstract super class, we will define: 1) event handlers for both the buttons: Home and Feedback 2) other methods

The Home and Feedback buttons, which are going to be visible in almost every activities and require the same actions to perform (i.e. take user to home activity), So instead of writing the same code in every activity, we write event handler only once in the abstract class which is going to be a super class for every activity.

You may have noticed in above header.xml layout: android:onClick=”btnHomeClick” (Home button) and android:onClick=”btnFeedbackClick” (Feedback button), so we will define this method only once in super class (abstract).

Please refer ViewStub example if you dont know about it.

Now, here is the code for Abstract (super) class, i call it as DashboardActivity.java

01 package com.technotalkative.viewstubdemo;
02  
03 import android.app.Activity;
04 import android.content.Intent;
05 import android.os.Bundle;
06 import android.view.View;
07 import android.view.ViewStub;
08 import android.widget.Button;
09 import android.widget.TextView;
10  
11 public abstract class DashBoardActivity extends Activity {
12     /** Called when the activity is first created. */
13     @Override
14     public void onCreate(Bundle savedInstanceState) {
15         super.onCreate(savedInstanceState);
16     }
17  
18     public void setHeader(String title, boolean btnHomeVisible, boolean btnFeedbackVisible)
19     {
20       ViewStub stub = (ViewStub) findViewById(R.id.vsHeader);
21       View inflated = stub.inflate();
22  
23       TextView txtTitle = (TextView) inflated.findViewById(R.id.txtHeading);
24       txtTitle.setText(title);
25  
26       Button btnHome = (Button) inflated.findViewById(R.id.btnHome);
27       if(!btnHomeVisible)
28        btnHome.setVisibility(View.INVISIBLE);
29  
30       Button btnFeedback = (Button) inflated.findViewById(R.id.btnFeedback);
31       if(!btnFeedbackVisible)
32        btnFeedback.setVisibility(View.INVISIBLE);
33  
34     }
35  
36     /**
37      * Home button click handler
38      * @param v
39      */
40     public void btnHomeClick(View v)
41     {
42      Intent intent = new Intent(getApplicationContext(), HomeActivity.class);
43      intent.setFlags (Intent.FLAG_ACTIVITY_CLEAR_TOP);
44      startActivity(intent);
45  
46     }
47  
48     /**
49      * Feedback button click handler
50      * @param v
51      */
52     public void btnFeedbackClick(View v)
53     {
54      Intent intent = new Intent(getApplicationContext(), FeedbackActivity.class);
55      startActivity(intent);
56     }
57 }

Step 3: Define Dashboard layout PAGE TOP

01 <?xml version="1.0" encoding="utf-8"?>
02 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03     android:layout_width="fill_parent"
04     android:layout_height="fill_parent"
05     android:orientation="vertical" >
06  
07      
08   
09  
10     <ViewStub
11         android:id="@+id/vsHeader"
12         android:layout_width="fill_parent"
13         android:layout_height="wrap_content"
14         android:inflatedId="@+id/header"
15         android:layout="@layout/header" />
16  
17     <LinearLayout
18         android:layout_width="fill_parent"
19         android:layout_height="wrap_content"
20         android:layout_weight="1"
21         android:orientation="vertical"
22         android:padding="6dip" >
23  
24         <LinearLayout
25             android:layout_width="fill_parent"
26             android:layout_height="wrap_content"
27             android:layout_weight="1"
28             android:orientation="horizontal" >
29  
30             <Button
31                 android:id="@+id/main_btn_eclair"
32                 style="@style/HomeButton"
33                 android:drawableTop="@drawable/android_eclair_logo"
34                 android:onClick="onButtonClicker"
35                 android:text="@string/EclairActivityTitle" />
36  
37             <Button
38                 android:id="@+id/main_btn_froyo"
39                 style="@style/HomeButton"
40                 android:drawableTop="@drawable/android__logo_froyo"
41                 android:onClick="onButtonClicker"
42                 android:text="@string/FroyoActivityTitle" />
43         </LinearLayout>
44  
45         <LinearLayout
46             android:layout_width="fill_parent"
47             android:layout_height="wrap_content"
48             android:layout_weight="1"
49             android:orientation="horizontal" >
50  
51             <Button
52                 android:id="@+id/main_btn_gingerbread"
53                 style="@style/HomeButton"
54                 android:drawableTop="@drawable/android_gingerbread_logo"
55                 android:onClick="onButtonClicker"
56                 android:text="@string/GingerbreadActivityTitle" />
57  
58             <Button
59                 android:id="@+id/main_btn_honeycomb"
60                 style="@style/HomeButton"
61                 android:drawableTop="@drawable/android_honeycomb_logo"
62                 android:onClick="onButtonClicker"
63                 android:text="@string/HoneycombActivityTitle" />
64         </LinearLayout>
65  
66         <LinearLayout
67             android:layout_width="fill_parent"
68             android:layout_height="wrap_content"
69             android:layout_weight="1"
70             android:orientation="horizontal" >
71  
72             <Button
73                 android:id="@+id/main_btn_ics"
74                 style="@style/HomeButton"
75                 android:drawableTop="@drawable/android_ics_logo"
76                 android:onClick="onButtonClicker"
77                 android:text="@string/ICSActivityTitle" />
78  
79             <Button
80                 android:id="@+id/main_btn_jellybean"
81                 style="@style/HomeButton"
82                 android:drawableTop="@drawable/android_jellybean_logo"
83                 android:onClick="onButtonClicker"
84                 android:text="@string/JellyBeanActivityTitle" />
85         </LinearLayout>
86     </LinearLayout>
87 </LinearLayout>

Step 4: Define activity for handling this dashboard layout buttons click events. PAGE TOP

In this activity, you will find the usage of setHeader() method to set the header for home activity, yes in this method i have passed “false” for home button because its already a home activity, but i have passed “true” for feedback button because feedback is needed to be visible. Other process are same as defining button click handlers.

01 package com.technotalkative.viewstubdemo;
02  
03 import android.content.Intent;
04 import android.os.Bundle;
05 import android.view.View;
06  
07 public class HomeActivity extends DashBoardActivity {
08     /** Called when the activity is first created. */
09     @Override
10     public void onCreate(Bundle savedInstanceState) {
11         super.onCreate(savedInstanceState);
12         setContentView(R.layout.main);
13         setHeader(getString(R.string.HomeActivityTitle), false, true);
14     }
15  
16     /**
17      * Button click handler on Main activity
18      * @param v
19      */
20     public void onButtonClicker(View v)
21     {
22      Intent intent;
23  
24      switch (v.getId()) {
25   case R.id.main_btn_eclair:
26    intent = new Intent(this, Activity_Eclair.class);
27    startActivity(intent);
28    break;
29  
30   case R.id.main_btn_froyo:
31    intent = new Intent(this, Activity_Froyo.class);
32    startActivity(intent);
33    break;
34  
35   case R.id.main_btn_gingerbread:
36    intent = new Intent(this, Activity_Gingerbread.class);
37    startActivity(intent);
38    break;
39  
40   case R.id.main_btn_honeycomb:
41    intent = new Intent(this, Activity_Honeycomb.class);
42    startActivity(intent);
43    break;
44  
45   case R.id.main_btn_ics:
46    intent = new Intent(this, Activity_ICS.class);
47    startActivity(intent);
48    break;
49  
50   case R.id.main_btn_jellybean:
51    intent = new Intent(this, Activity_JellyBean.class);
52    startActivity(intent);
53    break;
54   default:
55    break;
56   }
57     }
58 }

Step 5: Define other activities and their UI layouts PAGE TOP

Now, its time to define activities that we want to display based on the particular button click from dashboard. So define every activities and their layouts. Don’t forget to call setHeader() method wherever necessary.

Here is one example for such activity – Activity_Eclair.java

01 package com.technotalkative.viewstubdemo;
02  
03 import android.os.Bundle;
04  
05 public class Activity_Eclair extends DashBoardActivity {
06     /** Called when the activity is first created. */
07     @Override
08     public void onCreate(Bundle savedInstanceState) {
09         super.onCreate(savedInstanceState);
10         setContentView(R.layout.activity_eclair);
11         setHeader(getString(R.string.EclairActivityTitle), true, true);
12     }
13 }

activity_eclair.xml

01 <?xml version="1.0" encoding="utf-8"?>
02 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03     android:layout_width="fill_parent"
04     android:layout_height="fill_parent"
05     android:orientation="vertical" >
06  
07      
08   
09  
10     <ViewStub
11         android:id="@+id/vsHeader"
12         android:layout_width="fill_parent"
13         android:layout_height="wrap_content"
14         android:inflatedId="@+id/header"
15         android:layout="@layout/header" />
16  
17     <TextView
18         android:id="@+id/textView1"
19         android:layout_width="match_parent"
20         android:layout_height="match_parent"
21         android:gravity="center"
22         android:text="@string/EclairActivityTitle" />
23  
24 </LinearLayout>

Step 6: Declare activities inside the AnroidManifest.xml file PAGE TOP

Now you are DONE

Output:

mobappcoding.8.2.png

mobappcoding.8.3.png

Home screen _ Landscape

mobappcoding.8.4.png

inner screen

mobappcoding.8.5.png

inner screen

0 Comments Leave a comment

Please login in order to leave a comment.

Newest first
!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.