How To Build A Dashboard User Interface In Android

I have been looking into user interface designs and patterns for Android. This note describes what I have learned from building a demo app that illustrates the Dashboard user interface pattern.

The demo app has a main screen with six buttons. Each button takes you to a different section of the app. Each section has a title bar at the top. The title bar tells you where you are and provides actions that are common to all. In this case, there are two action buttons that take you to an About screen and a Search screen. For everything but the main page, there is a link back to the home screen of the app.

My example app is derived from the Schedule app that Google came out with for the 2010 Google IO conference. That app has a lot of interesting features worth studying, but what I was interested in is what it takes to do a dashboard.

The Google IO Schedule app was fully functional. I pared it down to the essential elements related to a dashboard. None of the activities do anything more than display a line or two of text. That makes it a good starting point for building your own dashboard app.

The following screenshots give you a little bit better idea of what the app looks like. The About screen and Feature 1 screen are simple placeholders for whatever the real thing turns out to be in your application. The third figure below shows what the screen looks like as a user presses the “Feature 4″ button.

Full source code for my Dashboard Demo app is available. See the Source Code section below.

How It Works – Image Buttons

Basically what you have is a layout of image buttons. When a button is clicked, the handler starts another activity. The only way back to the home activity is via the Home button that appears in all of the secondary activities.

All the layout of views is done in resources files in folder res/layouts.  I am assuming you are familiar with basic layouts, defining views within them, and connecting them to an activity so I will not cover those things here. (For more on activities, refer to “My Introduction To Android Activities“.)

One of the things I learned doing this demo was how to set up image buttons so the user gets visual feedback as the buttons are touched, selected, or clicked. There are two kinds of image buttons used: (1) the buttons in the title bar area for About and Search; (2) the buttons in the main part of the layout that are used to move to one of the main sections of the app.

Here is how a title bar button works. If you look inside any of the layout files (activity_home.xml, activity_f1.xml, etc.), you will see a LinearLayout definition for the title bar.

<LinearLayout style="@style/TitleBar">
...
</LinearLayout>

Inside of that there is an image button definition for the About screen. It indicates what image is used as the button and indicates what method gets called when the button is clicked.

<ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_about"
            android:src="@drawable/title_about"
            android:onClick="onClickAbout" />

What I learned from the Schedule app is that the drawable does not have to be an image. They used another xml file to define what the drawable looked like in each of the different states it could be in: default, pressed, and selected.  The following xml is in res/drawable/title_about.xml.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true"
          android:state_pressed="true"
          android:drawable="@drawable/title_about_alt"/>
    <item android:state_focused="false"
          android:state_pressed="true"
          android:drawable="@drawable/title_about_alt"/>
    <item android:state_focused="true"
          android:drawable="@drawable/title_about_alt"/>
    <item android:state_focused="false"
          android:state_pressed="false"
          android:drawable="@drawable/title_about_default"/>
</selector>

It looks a bit complicated at first but what it is saying is that there are two images to be used: default and alt. Use alt when the image button is in focus or selected. The two images I used are these:

The second is the one shown when the user presses the button. If you have worked with web applications, you will see this is very similar to the way you do images that show up as the user moves the mouse over an image that is a linked to more information.

Each of the buttons you see for the six different sections of the app are also image buttons. For those, I used three distinct images so that the “pressed” button looks different than the button when it has focus. The three images for Feature 5 (the stars) are shown below.

Here is the xml in home_activity for the Feature 5 button.

<Button android:id="@+id/home_btn_feature1"
            style="@style/HomeButton"
            android:onClick="onClickFeature"
            android:text="@string/title_feature5"
           android:drawableTop="@drawable/home_button5" />

It refers to home_button5 as a drawable. That drawable is defined in its own xml file: home_button5.xml.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true"
          android:state_pressed="true"
          android:drawable="@drawable/stars_pressed"/>
    <item android:state_focused="false"
          android:state_pressed="true"
          android:drawable="@drawable/stars_pressed"/>
    <item android:state_focused="true"
          android:drawable="@drawable/stars_selected"/>
    <item android:state_focused="false"
          android:state_pressed="false"
          android:drawable="@drawable/stars_default"/>
</selector>

For more on how to use these state lists, see StateListDrawable.

How It Works: Styles

The other thing new for me was the use of style definitions. In both of the button xml definitions in the preceding section, there were references to styles.

    style="@style/TitleBarAction"
and
    style="@style/HomeButton"

Styles are defined in xml files in the resource folders.  They serve the same purpose as css files in html files. They allow you to separate the design from the content.

In res/values/styles.xml, you will find the following definition.

    <style name="HomeButton">
        <item name="android:layout_gravity">center_vertical</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:textSize">@dimen/text_size_medium</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textColor">@color/foreground1</item>
        <item name="android:background">@null</item>
    </style>

A good description of styles is at android.developer.com: “Applying Styles and Themes“.

How It Works: Click Handlers

If you have already built a few simple apps, building a dashboard app is not too hard. Once you get comfortable with the xml for image buttons, state lists, and styles, all you have left is implementing the onClick handlers that start the appropriate Activity.

Each activity is defined in its own class file. One thing I did was define an abstract superclass (DashboardActivity) so I would have a place to collect code common to all the activities. That means there is only one place to edit the code that starts the activities that make up the app.

It defines methods for starting the different activities. For instance, for the Search activity, it defines

public void onClickSearch (View v)
{
    startActivity (new Intent(getApplicationContext(), SearchActivity.class));
}
Returning to home is a bit different because you are in a secondary activity at the time you click the Home button. 
public void onClickHome (View v)
{
    goHome (this);
}
public void goHome(Context context) 
{
    final Intent intent = new Intent(context, HomeActivity.class);
    intent.setFlags (Intent.FLAG_ACTIVITY_CLEAR_TOP);
    context.startActivity (intent);
}

According to the Android developer documentation on Intents, the extra Intent flags result in taking the user back to the home activity after first closing the activity that was active. That seems like reasonable behavior for a dashboard app, which requires that you return home before moving to another section of the app.


Dashboard User Interface Pattern

One design pattern for user intefaces in Android is the Dashboard. Interest in that pattern is pretty high, starting with the session on Android UI Design Patterns at Google IO 2010.

After seeing that video, I really wanted to try implementing the Dashboard pattern. I searched for the Twitter app that they said would be open source, but I could never find it. Fortunately, the source code for the Schedule App is available. Studying that is what got me here to this blog article.

I like the Dashboard pattern because it matches the way I like to think about applications: web, mobile, or whatever. For websites, the things I like are:

  • Simple. Clean.
  • Make it easy for people to understand what they can do.
  • Information is the interface
  • Use plain English
  • No training required

For websites, I appreciate ones that “Don’t Make Me Think“. For me, a Dashboard is essentially that, as long as I take the time to think about what the important sections are and make those available on the home screen.

For more information about dashboards and other patterns, read “A Closer Look At Android’s Evolving UI Patterns“.

Source Code

The source code for this demo application is available here: download zip from Wglxy.com.  If you find that the app does not build in Eclipse, be sure to do a clean build by using the “Clean” item on the Project menu.

This demo app was built on a MacBook running Eclipse Galileo and Android 2.2. The version listed by Eclipse for the Android Developer Tools is version 8.0.1.v201012062107-82219. The app has been tested in the Android emulator and on an LG Optimus phone.

Examples of Dashboards

I found quite a few examples of dashboards in Android apps. See my post: Android Dashboard Examples.

Update – March 2012 

This note was originally published in March 2011. You might be interested in two recent news items.

An App Based On This Work

I have applied  this dashboard pattern to an Android app. Overall, I am very happy with how it turned out. The dashboard pattern made it easier in many ways. It was so useful to have the basic structure of the app taken care of.

If you would like to have another working example of this work to study, you can try the Gomoku League app, which is a free download on the Android Market.

Dashboard XL Demo On Tablets 

If you want to see how this demo can be expanded to support both phones and tablets, see “My Dashboard User Interface On Android Tablets“.

About Bill Lahti

Bill Lahti is a software engineer building mobile applications and knowledge management solutions. Two of his interests are writing for this blog and building Android apps, with strategy games being an area of particular interest.
This entry was posted in Android and tagged , , , , . Bookmark the permalink.

43 Responses to How To Build A Dashboard User Interface In Android

  1. ida says:

    nice post… Really help to learn how to build app android based. Thanks

  2. KL says:

    Sir, you are a wizard! For couple of hours I searched for dashboard layout that will work out of the box. Finally found it here. Thank you!

  3. Rajkumar says:

    Superb explanation!
    Really i saved lot of time in understanding the dashboard concept by visiting your blog.Congrats very much.keep going.

  4. Alessandro says:

    Good afternoon. I am using the google translator to write this! I’m from Brazil and your tutorial was the best and saved me for a project. I would like to thank you and congratulations. Thank you.

  5. Sergio says:

    Thanks for such a great piece of code. It’s been a lifesaver!

  6. MinceMan says:

    Thanks for the source code. There are more then a few things in there which I really like how you have set up!

  7. John says:

    Awesome! This is exactly what I was looking for from a tutorial / example dashboard. Thank you!!

  8. abhi says:

    Great job man!! Kudos.

  9. Pingback: Tridroid Presentation on Building an Android Dashboard UI « More Is Not Always Better

  10. Pingback: How to Export and Import Android Virtual Devices « More Is Not Always Better

  11. Roberto says:

    Hi Bill,

    I’d like to congratulate you for this great initiative.
    Thanks for sharing your knowledge in such a direct and objective way.
    I would like also to ask you to extend your tutorial just a little bit to explain how can we introduce other elements into the dashboard such as the news area that we see in Tweet application in Android UI Design Patterns at Google IO 2010.
    God bless you.

    • blahti says:

      To add a news area below the buttons, you could add a TextView after the last LinearLayout in activity_home.xml that is used to display the image buttons. Or you might want to remove one row of image buttons and put the TextView there.

      Then somewhere in your activity’s onCreate method, you’d locate that text view and set its text. By the way, putting simple Html text into that view is pretty easy.

      TextView textView = (TextView) findViewById (R.id.recent_news);
      textView.setText (Html.fromHtml (getString (yourResourceIdForTheText)));

      See the answers at StackOverflow for set TextView text from html for more information.

  12. Emmanuel SOMBUGMA says:

    Hi,

    Very good article. But I want to kwnow what should be the size of the icons you use on the dashboard.

    Regards.

    • blahti says:

      The images on the home page are all 144 x 96. As I recall, that size was what was used in the Google IO Schedule app. In a new app I am working on, I am trying a few different sizes and not all the choices work out immediately. Sometimes I have to adjust the definitions in the layouts a bit. So be ready to make a few changes if you choose different sizes.

  13. Aalok Karnik says:

    There seems to be a problem with the project. I keep getting the error
    `R cannot be resolved to a variable`

    After poking I found that the gen folder does not exist when the archive is imported into my workspace.

    Am really dying to see this example in action but then if the project does not compile I cannot. I don’t know how the others have managed to run this project.

    What am I missing here ?

    • blahti says:

      If you find that the app does not build in Eclipse, be sure to do a clean build by using the “Clean” item on the Project menu. That should take care of it.

      • Aalok Karnik says:

        Hey Bill,
        Thank you for the great tutorial. I finally got it to work (don’t ask how). I kept trying every blog post solution possible.

        I am implementing your example on Android 2.1 (since 90% of phones today run 2.1)

        Credit where it’s due … this is by far the easiest example to follow on dashboard development. Took me like 1 hr or so to see how the example behaves and how to play around with it.

        Am now on my way to extend your application. Once again thank you for saving me many many many many many hours of work :)

  14. Pingback: Android Dashboard Examples « More Is Not Always Better

  15. Pingback: Adapting My Android Dashboard UI To Tablets « More Is Not Always Better

  16. Amro says:

    Thank you very much for this tutorial ! I have been looking for some time for something similar and finally found it :)

  17. aanaa says:

    Really it is amazing…thanks a lot.

  18. unicorn says:

    Thanks for giving your knowledge and detail tutorials.
    It is so great useful for me.
    Thank you very very very much!!

  19. Pingback: My Dashboard User Interface On Android Tablets « More Is Not Always Better

  20. Ulquiorra says:

    Thanks dude, this was really helpful, short and well explained example, so thanks alot

  21. condrovic says:

    This is a great tutorial thanks so much for sharing this. Is there any way you could do a small write up on how to add a TabHost within this? I have been trying to get it to work but it breaks the Dashboard navigation. Thanks

    • blahti says:

      I have not ever done a TabHost. What does your layout look like? In what way does it break the navigation?

      I took a quick look at the TabHost tutorial. Does the TabHost layout have to be at the top of the layouts for an activity? Can a TabHost be nested inside the layouts I use? Perhaps it could go right after the title bar layouts. Or it might be that the TabHost code makes an assumption about always being at the top level. I will see if I can give it a try.

  22. myjoby says:

    Good Job , if i wanna change the home logo to right and info to left ?

    • blahti says:

      Find the first LinearLayout inside activity_home.xml. It has a style of TitleBar. Rearrange the elements there, placing the home button and image to the right. Do that for each of the activity layout files. If you start with the updated version of the dashboard demo, which uses an include file to define that section, all you have to do is make the changes in title_bar.xml and activity_home.xml.

      • caraka says:

        Hey, i wanna ask.
        How if i want to put and expandiblelistview in one of the feature?
        since expandiblelistvoew needs to extends ExpandableListActivity , but dashboards needs to extends DashboardActivity , and you can’t extend 2 files here, is there a solution?

      • blahti says:

        In my example, I had all of the activities as subclasses of DashboardActivity for convenience of sharing common code. There is no reason why another activity class couldn’t be used. You just have to arrange for your activity to use a layout that is compatible with action bar / title bar look. You might even choose to have your list activity go full screen without the title bar. I think it can work out.

        I have not looked at ExpandableListActivity so you’d have to verify that it can work. I know that someone pointed out a problem with the tab activity classes and this dashboard layout. I hope ExpandableListActivity is not another one.

  23. Pingback: android tips im using | imjeee | Jie Lian blog

  24. stirringechoes says:

    hey i wanted to understand how your on click functions are getting called? i could not find any onClickListener code on your DashboardActivity. you write functions for onClick, but they are just custom functions. how are they getting called on click of the corresponding views?

    • blahti says:

      All of the activities are subclasses of DashboardActivity. That class defines several onClick methods. Layout file activity_home references onClickFeature for each of the buttons on the home screen. If you look in some of the revised versions of this dashboard demo, I move that into a layout activity_home_button.xml, as part of the move to support larger screen sizes and tablets.

  25. Ron says:

    Hi Bill,
    I was wondering if it’s acceptable by you to use this code as a template to build an app for the market as long as there is a link to your website for the layout credit with the appropriate apache 2.0 license displayed in the title’s aboutActivity? This is really great. Thank you!

    • blahti says:

      Feel free to use the code. No need for the About screen credit. In your source code, you could include the Apache license there indicating the origin of the code. That’s what I have been doing with source code from the Android developer community.

      • Ron says:

        Thanks Bill!
        I have included a copy of the apache license in my assets folder, but is there a need to explicitly inform users that part of the code is licensed under apache 2.0 and a way for users to view it? Just curious how others are handling it especially since I’m not really licensing my code under anything and it’s not an open source project.

      • blahti says:

        I don’t think there is a need to inform users because they usually do not care how something was built. Developers are different, I think. If you ever share portions of your code with other developers, even as examples as I do here, it seems like a good idea to have the license there. You acknowledge the source of sections of code. Nothing wrong with that. That’s a good way for developers to point to other developers that they find helpful. And it seems to me that there is a little bit of a disclaimer for the original developer too. I read it as saying that if something goes wrong, the original developer is not responsible for fixing it. Anyway, that’s my interpretation.

  26. Cedulio Cezar e Silva says:

    nice dashboard.

  27. kunal says:

    I have to develop a android app which work for both phone as well as tablet.
    I searched a lot and come to know to have two folders under res folder one is for simple phone i.e. layout and another is for tablet i.e. layout-large. I placed images accordingly in drawable folder. but when i run this on different AVD all things are messed. I even have given same name for both phone and tablet’s xml file. Other than that now my eclipse is showing content assist is not available. I am totally confused. plz. help me

  28. Sumeda says:

    Good Post….
    thanks….

  29. Felix says:

    thank you :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s