The earlier post here has covered the importance and the basics of developing a user friendly UI, taking this further we will be presenting to you a detailed view of the design patterns discussed. The following post will cover the ‘Dashboard ‘ design pattern along with a step by step process to help you develop a dashboard yourself. The code snippets attached will allow you to learn and build the dashboard in no time.
Introduction:
Trust me when I say it’s too easy. Have you seen the Facebook application for Android? You will see the home screen has image icons for all major features of the application like messages, wall posts, friends, albums etc. This is exactly what a dashboard is. You might have actually used this before without even knowing it is a design pattern. The dashboard lets you highlight key/new features and provide easy navigation to various parts of the app. A detailed description of the same was given in my blog on User Interface Design Tips which I trust you would have read. Even if you haven’t, I would suggest going back to that article and reading it to get a clear picture of the dashboard design pattern. This will make this article a better read for you as it provides simple steps for creating your very own dashboard. So let’s begin!!!
A typical dashboard for any application may look like this:
Full source code for this sample application is available on xoriant’s public github repo - https://github.com/github-xoriant/Android-Dashboard-UI-Pattern
Listed are a few steps for creating a typical dashboard with precise detailing. Follow them to have a clear understanding
Step 1: Create Home Screen
Follow these codes to get your Home Screen in simplest possible way.
<LinearLayout android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="60dip"
android:layout_marginLeft="40dip" android:layout_marginBottom="40dip">
<ImageView android:id="@+id/photoAlbum"
style="@style/Home"
android:onClick="onPhotoAlbum"
android:src="@drawable/photoalbum"/>
<TextView style="@style/HomeText"
android:id="@+id/ph1"
android:text="@string/photoAlbum"
android:layout_marginTop="10dip"/>
</LinearLayout>
<LinearLayout style="@style/TitleBar"
android:id="@+id/layout1">
<ImageView style="@style/TitleBarLogo"
android:id="@+id/img1"
android:src="@drawable/dashboard"
android:onClick="onHome"
android:layout_marginTop = "5dip"
android:layout_marginRight="5dip"
android:layout_marginLeft="5dip"
android:layout_marginBottom = "5dip"
android:paddingBottom = "5dip"
android:background="@null"
android:layout_gravity="center"
android:paddingLeft="5dip"
android:paddingRight="7dip" />
<ImageView android:layout_width="1px"
android:layout_height="fill_parent"
android:id="@+id/sep"
android:background="@drawable/separator"
android:layout_marginRight="7dip"
/>
<TextView style="@style/TitleBarText"
android:id="@+id/tv1"
android:paddingLeft = "8dip"
android:text="@string/home"/>
</LinearLayout>
The first step is to create a simple layout for the home screen that will house the image buttons. As the name itself says these are simply buttons, which are represented by icons/images present in the resources folder. The layout must have a custom title bar at the top that displays the current location/screen that the user is on, along with a straight link to reach the home screen or the dashboard. All you have to use is the “onClick” attribute of the image view to direct the user to the respective location. The layout is very simple, and all you require is basic knowledge of layout creation which you must be an expert on by this time!!! Anyway to make it easy have a look at the code snippet for creating an image view for the image icon and the title bar given above. Keep in mind this has to be done in a proper layout.
Step 2:Create Dashboard Abstract Class
Follow these codes to create your own Dashboard Abstract Class.
public abstract class DashboardAppActivity extends Activity
{
/** Called when the activity is first created. */
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
}
//Lifecycle Methods
//App Click Methods
public void onSearch(View v)
{
startActivity (new Intent(getApplicationContext(), SearchActivity.class));
}
public void onAbout(View v)
{
startActivity (new Intent(getApplicationContext(), AboutActivity.class));
}
public void return2Home(Context context)
{
final Intent intent = new Intent(context, HomeActivity.class);
intent.setFlags (Intent.FLAG_ACTIVITY_CLEAR_TOP);
context.startActivity (intent);
}
public void onHome (View v)
{
return2Home(this);
}
}
By now you will have your home screen ready with you. Now we just need to define the “On Click” handlers that will trigger the necessary action which could be starting a new activity or simply a toast. For this purpose all you need to do is simply define an abstract class, that will contain all the common code like lifecycle methods, On Click handlers for the icons on the dashboard and the title bar(home) as well. In our app we will have to define the handlers to redirect the user to new activities associated with the appropriate image icon. Once done, all your other activities in the application that have representations on the home page will inherit this abstract class. It’s very simple and I am pretty sure you can do this on your own. Just in case, a sample code snippet is available at your disposal as always!!!
Step 3:Create Activities and Layouts
Following are a few codes to help you create your Activities and Layouts.
public class AboutActivity extends DashboardAppActivity
{
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView (R.layout.about);
TextView tv = (TextView) findViewById (R.id.title_text);
if (tv != null)
{
tv.setText(getTitle());
}
}
}
So now your Dashboard is nearly done. All you need to do is create the activities for all functions that you have listed in the dashboard. Along with the activities you will need the XML Layouts as is the case with any basic activity in Android. These activities must extend the dashboard abstract class. Also, you need to write a few lines of code to display the name of the activity in the title bar. You can have a look at the sample code given above.
Step 4:Understanding Styles
Finally, refer to the below given codes to Understand Styles.
<style name="TitleBar">
<item name="android:id">@id/title_container</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">45dip</item>
<item name="android:orientation">horizontal</item>
<item name="android:background">@color/title_background</item>
</style>
<style name="TitleBarOperation">
<item name="android:layout_width">45dip</item>
<item name="android:layout_height">fill_parent</item>
</style>
<style name="TitleBarLogo">
<item name="android:id">@id/title_logo</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">fill_parent</item>
</style>
So now your dashboard is finally up and running. Something that you will come across while going through the code is the regular use of styles. These styles are nothing new, and are very similar to style sheets used for developing web pages. These styles have been defined in the styles.xml file, which is then referred in the app using their ids. A sample of the styles.xml file is given above.
So 4 simple steps and you have your dashboard set up. Now that was unbelievably easy as I had said. Hopefully this tutorial would have provided all the assistance that was required to create your very own creative dashboard.
Source Code
If there are still any problems you always have the complete source code of the app to fall back on Xoriant’s git hub repository. Xoriant- Source code for Android Dashboard UI Pattern
Also you can post your comments here and I will be more than happy to answer them.
I will soon be writing about yet another effective and easy design pattern, “The Action Bar” in my next blog. But till then keep experimenting with your dashboards!!!!