samedi 7 janvier 2012

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.

As a reference i am using some of the code from Google I/O app. In this article i am taking an example of facebook android dashboard screen and below is a screenshot of final output.

The main goal is to achieve dashboard screen layout and provide navigation to related screens on selecting appropriate icon on the dashboard.

So let’s start by creating simple project.

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>

<stylename="ActionBarCompat">

<itemname="android:layout_width">fill_parent</item>

<itemname="android:layout_height">50dp</item>

<itemname="android:orientation">horizontal</item>

<itemname="android:background">@drawable/actionbar_background</item>

</style>

<stylename="DashboardButton">

<itemname="android:layout_gravity">center_vertical</item>

<itemname="android:layout_width">wrap_content</item>

<itemname="android:layout_height">wrap_content</item>

<itemname="android:gravity">center_horizontal</item>

<itemname="android:drawablePadding">2dp</item>

<itemname="android:textSize">16dp</item>

<itemname="android:textStyle">bold</item>

<itemname="android:textColor">#ff29549f</item>

<itemname="android:background">@null</item>

</style>

<stylename="FooterBar">

<itemname="android:layout_width">fill_parent</item>

<itemname="android:layout_height">40dp</item>

<itemname="android:orientation">horizontal</item>

<itemname="android:background">#dedede</item>

</style>

</resources>

⇒ Designing Actionbar (Header)

Design two images for 1. Gradient background for action-bar background, 2. Logo of the application.

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.

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.

5. Create a new class under res/package. Right Click on src/package folder ⇒ New ⇒ Class and name it as DashboardLayout.java and fill it with following code.

So far we created a static dashboard which has no functioning at all. So we need to add some functionality like launching separate activity for each icon on the dashboard. In this case i had 6 icons on my dashboard, so i need 6 Activities one for each icon. In my previous article How to switch between Activities in Android i explained switching between activites.

9. Open your main activity class file and paste following code.(AndroidDashboardDesignActivity.java)

10. Create a new class under res/package. Right Click on src/package folder ⇒ New ⇒ Class and name it as NewsFeedActivity.java and fill it with following code.
You also need to createNewsFeedActivity.java
FriendsActivity.java
MessagesActivity.java
PlacesActivity.java
EventsActivity.java