Implementing Dashboard Design In Your Application

Before reading this article, please read Android UI Design Patterns to have better idea for the implementation of solution which we are going to discuss here.

Dashboard a landing page of an application containing large and clear symbols of main functionality and optionally an area for relevant new information.

Google I/O 2010 conference’s presentation on Android UI design patterns describes all about UI design patterns. It features the dashboard pattern.

The main agenda of this article is to implement Dashboard design pattern same as this image.

fb1

Let’s now learn step by step how to implement this.

Step 1:

We will 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.

Create and write following into header.xml:

 

 

 

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

Write following into styles.xml:

 

 

 

Now write below into dimen.xml:

 

 

 

Step 2:

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 from my previous posts to explor more on it.

Create and Write following into DashboardActivity.java

 

 

 

Step 3:

Write following into main.xml:

 

 

 

Step 4: Write following to your HomeActivity.java:

 

 

 

Step 5:

Now, you have 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

 

 

 

Write following into activity_eclair.xml

 

 

 

Step 6:

Declare activities inside the AnroidManifest.xml file

Output:

dash1

dash2

Leave a Comment: