How to Show Dashboards in Android

Android dashboard screen is an important element in android apps which provides easy navigation to prior functionalities of app. In this tutorial i am going to discuss how to build a dashboard screen for your app.

1. Create a new project by going to File ⇒ New Android Project. Fill all the details and name your activity as AndroidDashboardDesignActivity.
2. In this project i am separating dashboard screen into Action Bar(Header), Dashboard and Footer. Finally i will merge all layouts together.
3. Under res/values create a new xml file and name it as styles.xml
( Right Click on res/layout ⇒ New ⇒ Android XML File) and fill it with following code.

styles.xml
<resources>
    <style name="ActionBarCompat">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">50dp</item>
        <item name="android:orientation">horizontal</item>
        <item name="android:background">@drawable/actionbar_background</item>
    </style>
       
    <style name="DashboardButton">
        <item name="android:layout_gravity">center_vertical</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:drawablePadding">2dp</item>
        <item name="android:textSize">16dp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">#ff29549f</item>
        <item name="android:background">@null</item>
    </style>   
    
   <style name="FooterBar">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">40dp</item>
        <item name="android:orientation">horizontal</item>
        <item name="android:background">#dedede</item>
    </style>    
</resources>

4. Create new xml file under res/layouts and name it as actionbar_layout.xml
( Right Click on res/layout ⇒ New ⇒ Android XML File) and type the following code.

actionbar_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/ActionBarCompat" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:clickable="false"
        android:paddingLeft="15dip"
        android:scaleType="center"
        android:src="@drawable/facebook_logo" />

</LinearLayout>

⇒ Designing Dashboard

For dashboard design your icons using some graphic editor software (i used Photoshop to create icons). Design each icon for three stages Default State, Hover state and Selected state. Create all icons with 90px height.

1.activity_home.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/db1_root"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout style="@style/TitleBar">
        <ImageView style="@style/TitleBarLogo"
            android:contentDescription="@string/description_logo"
            android:src="@drawable/title_logo" />

        <ImageView style="@style/TitleBarSeparator" />
        <TextView style="@style/TitleBarText" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_about"
            android:src="@drawable/title_about"
            android:onClick="onClickAbout" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_search"
            android:src="@drawable/title_search"
            android:onClick="onClickSearch" />
</LinearLayout>
<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:padding="6dip">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <Button android:id="@+id/home_btn_feature1"
            style="@style/HomeButton"
            android:onClick="onClickFeature"
            android:text="@string/title_feature1"
            android:drawableTop="@drawable/home_button1"/>
        <Button android:id="@+id/home_btn_feature2"
            style="@style/HomeButton"
            android:onClick="onClickFeature"
            android:text="@string/title_feature2"
            android:drawableTop="@drawable/home_button2"/>
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <Button android:id="@+id/home_btn_feature3"
            style="@style/HomeButton"
            android:onClick="onClickFeature"
            android:text="@string/title_feature3"
            android:drawableTop="@drawable/home_button3"/>
        <Button android:id="@+id/home_btn_feature4"
            style="@style/HomeButton"
            android:onClick="onClickFeature"
            android:text="@string/title_feature4"
            android:drawableTop="@drawable/home_button4"/>
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <Button android:id="@+id/home_btn_feature5"
            style="@style/HomeButton"
            android:onClick="onClickFeature"
            android:text="@string/title_feature5"
            android:drawableTop="@drawable/home_button5"/>
        <Button android:id="@+id/home_btn_feature6"
            style="@style/HomeButton"
            android:onClick="onClickFeature"
            android:text="@string/title_feature6"
            android:drawableTop="@drawable/home_button6"/>
    </LinearLayout>

</LinearLayout>

</LinearLayout>

2.main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
</LinearLayout>

3.activity_search.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <LinearLayout style="@style/TitleBar">
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_home"
            android:src="@drawable/title_home"
            android:onClick="onClickHome" />

        <ImageView style="@style/TitleBarSeparator" />
        <TextView style="@style/TitleBarText" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_about"
            android:src="@drawable/title_about"
            android:onClick="onClickAbout" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_search"
            android:src="@drawable/title_search"
            android:onClick="onClickSearch" />
    </LinearLayout>
<TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/search_intro"
    />
</LinearLayout>
 

4 activity_about.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <LinearLayout style="@style/TitleBar">
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_home"
            android:src="@drawable/title_home"
            android:onClick="onClickHome" />

        <ImageView style="@style/TitleBarSeparator" />
        <TextView style="@style/TitleBarText" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_about"
            android:src="@drawable/title_about"
            android:onClick="onClickAbout" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_search"
            android:src="@drawable/title_search"
            android:onClick="onClickSearch" />
    </LinearLayout>
<TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/about_intro"
    />
</LinearLayout>

5.activityf1.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <LinearLayout style="@style/TitleBar">
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_home"
            android:src="@drawable/title_home"
            android:onClick="onClickHome" />

        <ImageView style="@style/TitleBarSeparator" />
        <TextView style="@style/TitleBarText" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_about"
            android:src="@drawable/title_about"
            android:onClick="onClickAbout" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_search"
            android:src="@drawable/title_search"
            android:onClick="onClickSearch" />
    </LinearLayout>
<TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/feature1_intro"
    />
</LinearLayout>

6.activityf2.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <LinearLayout style="@style/TitleBar">
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_home"
            android:src="@drawable/title_home"
            android:onClick="onClickHome" />

        <ImageView style="@style/TitleBarSeparator" />
        <TextView style="@style/TitleBarText" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_about"
            android:src="@drawable/title_about"
            android:onClick="onClickAbout" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_search"
            android:src="@drawable/title_search"
            android:onClick="onClickSearch" />
    </LinearLayout>
<TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/feature2_intro"
    />
</LinearLayout>
 

7activityf3.xml:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <LinearLayout style="@style/TitleBar">
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_home"
            android:src="@drawable/title_home"
            android:onClick="onClickHome" />

        <ImageView style="@style/TitleBarSeparator" />
        <TextView style="@style/TitleBarText" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_about"
            android:src="@drawable/title_about"
            android:onClick="onClickAbout" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_search"
            android:src="@drawable/title_search"
            android:onClick="onClickSearch" />
    </LinearLayout>
<TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/feature3_intro"
    />
</LinearLayout>

7activityf4.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <LinearLayout style="@style/TitleBar">
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_home"
            android:src="@drawable/title_home"
            android:onClick="onClickHome" />

        <ImageView style="@style/TitleBarSeparator" />
        <TextView style="@style/TitleBarText" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_about"
            android:src="@drawable/title_about"
            android:onClick="onClickAbout" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_search"
            android:src="@drawable/title_search"
            android:onClick="onClickSearch" />
    </LinearLayout>
<TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/feature4_intro"
    />
</LinearLayout>
 

8 activityf5.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <LinearLayout style="@style/TitleBar">
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_home"
            android:src="@drawable/title_home"
            android:onClick="onClickHome" />

        <ImageView style="@style/TitleBarSeparator" />
        <TextView style="@style/TitleBarText" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_about"
            android:src="@drawable/title_about"
            android:onClick="onClickAbout" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_search"
            android:src="@drawable/title_search"
            android:onClick="onClickSearch" />
    </LinearLayout>
<TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/feature5_intro"
    />
</LinearLayout>

8 activity f6.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <LinearLayout style="@style/TitleBar">
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_home"
            android:src="@drawable/title_home"
            android:onClick="onClickHome" />

        <ImageView style="@style/TitleBarSeparator" />
        <TextView style="@style/TitleBarText" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_about"
            android:src="@drawable/title_about"
            android:onClick="onClickAbout" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_search"
            android:src="@drawable/title_search"
            android:onClick="onClickSearch" />
    </LinearLayout>
<TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/feature6_intro"
    />
</LinearLayout>

1.HomeActivity.java

import android.os.Bundle;

/**
 * This is a simple activity that demonstrates the dashboard user interface pattern.
 *
 */

public class HomeActivity extends DashboardActivity
{

/**
 * onCreate - called when the activity is first created.
 * Called when the activity is first created.
 * This is where you should do all of your normal static set up: create views, bind data to lists, etc.
 * This method also provides you with a Bundle containing the activity's previously frozen state, if there was one.
 *
 * Always followed by onStart().
 *
 */

protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_home);
}
   
/**
 * onDestroy
 * The final call you receive before your activity is destroyed.
 * This can happen either because the activity is finishing (someone called finish() on it,
 * or because the system is temporarily destroying this instance of the activity to save space.
 * You can distinguish between these two scenarios with the isFinishing() method.
 *
 */

protected void onDestroy ()
{
   super.onDestroy ();
}

/**
 * onPause
 * Called when the system is about to start resuming a previous activity.
 * This is typically used to commit unsaved changes to persistent data, stop animations
 * and other things that may be consuming CPU, etc.
 * Implementations of this method must be very quick because the next activity will not be resumed
 * until this method returns.
 * Followed by either onResume() if the activity returns back to the front,
 * or onStop() if it becomes invisible to the user.
 *
 */

protected void onPause ()
{
   super.onPause ();
}

/**
 * onRestart
 * Called after your activity has been stopped, prior to it being started again.
 * Always followed by onStart().
 *
 */

protected void onRestart ()
{
   super.onRestart ();
}

/**
 * onResume
 * Called when the activity will start interacting with the user.
 * At this point your activity is at the top of the activity stack, with user input going to it.
 * Always followed by onPause().
 *
 */

protected void onResume ()
{
   super.onResume ();
}

/**
 * onStart
 * Called when the activity is becoming visible to the user.
 * Followed by onResume() if the activity comes to the foreground, or onStop() if it becomes hidden.
 *
 */

protected void onStart ()
{
   super.onStart ();
}

/**
 * onStop
 * Called when the activity is no longer visible to the user
 * because another activity has been resumed and is covering this one.
 * This may happen either because a new activity is being started, an existing one
 * is being brought in front of this one, or this one is being destroyed.
 *
 * Followed by either onRestart() if this activity is coming back to interact with the user,
 * or onDestroy() if this activity is going away.
 */

protected void onStop ()
{
   super.onStop ();
}

/**
 */
// Click Methods


/**
 */
// More Methods

} // end class
 

2.DashboardActivity.java

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

/**
 * This is the base class for activities in the dashboard application.
 * It implements methods that are useful to all top level activities.
 * That includes: (1) stub methods for all the activity lifecycle methods;
 * (2) onClick methods for clicks on home, search, feature 1, feature 2, etc.
 * (3) a method for displaying a message to the screen via the Toast class.
 *
 */

public abstract class DashboardActivity extends Activity
{

/**
 * onCreate - called when the activity is first created.
 *
 * Called when the activity is first created.
 * This is where you should do all of your normal static set up: create views, bind data to lists, etc.
 * This method also provides you with a Bundle containing the activity's previously frozen state, if there was one.
 *
 * Always followed by onStart().
 *
 */

protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    //setContentView(R.layout.activity_default);
}
   
/**
 * onDestroy
 * The final call you receive before your activity is destroyed.
 * This can happen either because the activity is finishing (someone called finish() on it,
 * or because the system is temporarily destroying this instance of the activity to save space.
 * You can distinguish between these two scenarios with the isFinishing() method.
 *
 */

protected void onDestroy ()
{
   super.onDestroy ();
}

/**
 * onPause
 * Called when the system is about to start resuming a previous activity.
 * This is typically used to commit unsaved changes to persistent data, stop animations
 * and other things that may be consuming CPU, etc.
 * Implementations of this method must be very quick because the next activity will not be resumed
 * until this method returns.
 * Followed by either onResume() if the activity returns back to the front,
 * or onStop() if it becomes invisible to the user.
 *
 */

protected void onPause ()
{
   super.onPause ();
}

/**
 * onRestart
 * Called after your activity has been stopped, prior to it being started again.
 * Always followed by onStart().
 *
 */

protected void onRestart ()
{
   super.onRestart ();
}

/**
 * onResume
 * Called when the activity will start interacting with the user.
 * At this point your activity is at the top of the activity stack, with user input going to it.
 * Always followed by onPause().
 *
 */

protected void onResume ()
{
   super.onResume ();
}

/**
 * onStart
 * Called when the activity is becoming visible to the user.
 * Followed by onResume() if the activity comes to the foreground, or onStop() if it becomes hidden.
 *
 */

protected void onStart ()
{
   super.onStart ();
}

/**
 * onStop
 * Called when the activity is no longer visible to the user
 * because another activity has been resumed and is covering this one.
 * This may happen either because a new activity is being started, an existing one
 * is being brought in front of this one, or this one is being destroyed.
 *
 * Followed by either onRestart() if this activity is coming back to interact with the user,
 * or onDestroy() if this activity is going away.
 */

protected void onStop ()
{
   super.onStop ();
}

/**
 */
// Click Methods

/**
 * Handle the click on the home button.
 *
 * @param v View
 * @return void
 */

public void onClickHome (View v)
{
    goHome (this);
}

/**
 * Handle the click on the search button.
 *
 * @param v View
 * @return void
 */

public void onClickSearch (View v)
{
    startActivity (new Intent(getApplicationContext(), SearchActivity.class));
}

/**
 * Handle the click on the About button.
 *
 * @param v View
 * @return void
 */

public void onClickAbout (View v)
{
    startActivity (new Intent(getApplicationContext(), AboutActivity.class));
}

/**
 * Handle the click of a Feature button.
 *
 * @param v View
 * @return void
 */

public void onClickFeature (View v)
{
    int id = v.getId ();
    switch (id) {
      case R.id.home_btn_feature1 :
           startActivity (new Intent(getApplicationContext(), F1Activity.class));
           break;
      case R.id.home_btn_feature2 :
           startActivity (new Intent(getApplicationContext(), F2Activity.class));
           break;
      case R.id.home_btn_feature3 :
           startActivity (new Intent(getApplicationContext(), F3Activity.class));
           break;
      case R.id.home_btn_feature4 :
           startActivity (new Intent(getApplicationContext(), F4Activity.class));
           break;
      case R.id.home_btn_feature5 :
           startActivity (new Intent(getApplicationContext(), F5Activity.class));
           break;
      case R.id.home_btn_feature6 :
           startActivity (new Intent(getApplicationContext(), F6Activity.class));
           break;
      default:
           break;
    }
}

/**
 */
// More Methods

/**
 * Go back to the home activity.
 *
 * @param context Context
 * @return void
 */

public void goHome(Context context)
{
    final Intent intent = new Intent(context, HomeActivity.class);
    intent.setFlags (Intent.FLAG_ACTIVITY_CLEAR_TOP);
    context.startActivity (intent);
}

/**
 * Use the activity label to set the text in the activity's title text view.
 * The argument gives the name of the view.
 *
 * <p> This method is needed because we have a custom title bar rather than the default Android title bar.
 * See the theme definitons in styles.xml.
 *
 * @param textViewId int
 * @return void
 */

public void setTitleFromActivityLabel (int textViewId)
{
    TextView tv = (TextView) findViewById (textViewId);
    if (tv != null) tv.setText (getTitle ());
} // end setTitleText

/**
 * Show a string on the screen via Toast.
 *
 * @param msg String
 * @return void
 */

public void toast (String msg)
{
    Toast.makeText (getApplicationContext(), msg, Toast.LENGTH_SHORT).show ();
} // end toast

/**
 * Send a message to the debug log and display it using Toast.
 */
public void trace (String msg)
{
    Log.d("Demo", msg);
    toast (msg);
}

} // end class

 

3.SearchActivity.java

import android.os.Bundle;

/**
 * This is the Search activity in the dashboard application.
 * It displays some text and provides a way to get back to the home activity.
 *
 */

public class SearchActivity extends DashboardActivity
{

/**
 * onCreate
 *
 * Called when the activity is first created.
 * This is where you should do all of your normal static set up: create views, bind data to lists, etc.
 * This method also provides you with a Bundle containing the activity's previously frozen state, if there was one.
 *
 * Always followed by onStart().
 *
 * @param savedInstanceState Bundle
 */

protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView (R.layout.activity_search);
    setTitleFromActivityLabel (R.id.title_text);
}
   
} // end class