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.

Download Code

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.

Android dashboard screen design

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.

<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>

⇒ Designing Actionbar (Header)

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

Android action bar and logo

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.

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

Android dashboard icons facebook

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.

package com.androidhive.dashboard;
/*
 * Copyright 2011 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

/**
 * Custom layout that arranges children in a grid-like manner, optimizing for even horizontal and
 * vertical whitespace.
 */
public class DashboardLayout extends ViewGroup {

    private static final int UNEVEN_GRID_PENALTY_MULTIPLIER = 10;

    private int mMaxChildWidth = 0;
    private int mMaxChildHeight = 0;

    public DashboardLayout(Context context) {
        super(context, null);
    }

    public DashboardLayout(Context context, AttributeSet attrs) {
        super(context, attrs, 0);
    }

    public DashboardLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        mMaxChildWidth = 0;
        mMaxChildHeight = 0;

        // Measure once to find the maximum child size.

        int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(
                MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.AT_MOST);
        int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(
                MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.AT_MOST);

        final int count = getChildCount();
        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }

            child.measure(childWidthMeasureSpec, childHeightMeasureSpec);

            mMaxChildWidth = Math.max(mMaxChildWidth, child.getMeasuredWidth());
            mMaxChildHeight = Math.max(mMaxChildHeight, child.getMeasuredHeight());
        }

        // Measure again for each child to be exactly the same size.

        childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(
                mMaxChildWidth, MeasureSpec.EXACTLY);
        childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(
                mMaxChildHeight, MeasureSpec.EXACTLY);

        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }

            child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
        }

        setMeasuredDimension(
                resolveSize(mMaxChildWidth, widthMeasureSpec),
                resolveSize(mMaxChildHeight, heightMeasureSpec));
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int width = r - l;
        int height = b - t;

        final int count = getChildCount();

        // Calculate the number of visible children.
        int visibleCount = 0;
        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }
            ++visibleCount;
        }

        if (visibleCount == 0) {
            return;
        }

        // Calculate what number of rows and columns will optimize for even horizontal and
        // vertical whitespace between items. Start with a 1 x N grid, then try 2 x N, and so on.
        int bestSpaceDifference = Integer.MAX_VALUE;
        int spaceDifference;

        // Horizontal and vertical space between items
        int hSpace = 0;
        int vSpace = 0;

        int cols = 1;
        int rows;

        while (true) {
            rows = (visibleCount - 1) / cols + 1;

            hSpace = ((width - mMaxChildWidth * cols) / (cols + 1));
            vSpace = ((height - mMaxChildHeight * rows) / (rows + 1));

            spaceDifference = Math.abs(vSpace - hSpace);
            if (rows * cols != visibleCount) {
                spaceDifference *= UNEVEN_GRID_PENALTY_MULTIPLIER;
            }

            if (spaceDifference < bestSpaceDifference) {
                // Found a better whitespace squareness/ratio
                bestSpaceDifference = spaceDifference;

                // If we found a better whitespace squareness and there's only 1 row, this is
                // the best we can do.
                if (rows == 1) {
                    break;
                }
            } else {
                // This is a worse whitespace ratio, use the previous value of cols and exit.
                --cols;
                rows = (visibleCount - 1) / cols + 1;
                hSpace = ((width - mMaxChildWidth * cols) / (cols + 1));
                vSpace = ((height - mMaxChildHeight * rows) / (rows + 1));
                break;
            }

            ++cols;
        }

        // Lay out children based on calculated best-fit number of rows and cols.

        // If we chose a layout that has negative horizontal or vertical space, force it to zero.
        hSpace = Math.max(0, hSpace);
        vSpace = Math.max(0, vSpace);

        // Re-use width/height variables to be child width/height.
        width = (width - hSpace * (cols + 1)) / cols;
        height = (height - vSpace * (rows + 1)) / rows;

        int left, top;
        int col, row;
        int visibleIndex = 0;
        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }

            row = visibleIndex / cols;
            col = visibleIndex % cols;

            left = hSpace * (col + 1) + width * col;
            top = vSpace * (row + 1) + height * row;

            child.layout(left, top,
                    (hSpace == 0 && col == cols - 1) ? r : (left + width),
                    (vSpace == 0 && row == rows - 1) ? b : (top + height));
            ++visibleIndex;
        }
    }
}

6. Now we need to create a layout file dashboard screen. Create a new xml file under src/layouts and name it as fragment_layout.xml
( Right Click on res/layout ⇒ New ⇒ Android XML File)

<!-- Your package folder -->
<com.androidhive.dashboard.DashboardLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:background="#f8f9fe" >
	<!--  News Feed Button -->
    <Button
        android:id="@+id/btn_news_feed"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/btn_newsfeed"
        android:text="News Feed" />
    
	<!--  Friends Button -->
    <Button
        android:id="@+id/btn_friends"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/btn_friends"
        android:text="Friends" />
    
	<!--  Messages Button -->
    <Button
        android:id="@+id/btn_messages"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/btn_messages"
        android:text="Messages" />
	
    <!--  Places Button -->
    <Button
        android:id="@+id/btn_places"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/btn_places"
        android:text="Places" />

    <!--  Events Button -->
    <Button
        android:id="@+id/btn_events"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/btn_events"
        android:text="Events" />

    <!--  Photos Button -->
    <Button
        android:id="@+id/btn_photos"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/btn_photos"
        android:text="Photos" />

</com.androidhive.dashboard.DashboardLayout>

The output of above code will be

Android dashboard design facebook

⇒ Designing Footer

7. Create a new xml file under res/layout and name it as footer_layout.xml and type the following code.

⇒ Merging all layout together

So far we designed Action bar, Dashboard and Footer. Finally we need to merge all layouts in one xml file.

8. Create a new xml file under src/layouts and name it as dashboard_layout.xml and type following code.
( Right Click on res/layout ⇒ New ⇒ Android XML File)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/home_root"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    	<!-- Include Action Bar -->
    	<include layout="@layout/actionbar_layout"/>
    	
    	<!--  Include Fragmented dashboard -->	
		<include layout="@layout/fragment_layout"/>	
		
		<!--  Include Footer -->
		<include layout="@layout/footer_layout"/>
    	    
</LinearLayout>

⇒ Switching between dashboard activities.

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.

Android dashboard screen design

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

package com.androidhive.dashboard;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import androidhive.dashboard.R;

public class AndroidDashboardDesignActivity extends Activity {
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.dashboard_layout);
        
        /**
         * Creating all buttons instances
         * */
        // Dashboard News feed button
        Button btn_newsfeed = (Button) findViewById(R.id.btn_news_feed);
        
        // Dashboard Friends button
        Button btn_friends = (Button) findViewById(R.id.btn_friends);
        
        // Dashboard Messages button
        Button btn_messages = (Button) findViewById(R.id.btn_messages);
        
        // Dashboard Places button
        Button btn_places = (Button) findViewById(R.id.btn_places);
        
        // Dashboard Events button
        Button btn_events = (Button) findViewById(R.id.btn_events);
        
        // Dashboard Photos button
        Button btn_photos = (Button) findViewById(R.id.btn_photos);
        
        /**
         * Handling all button click events
         * */
        
        // Listening to News Feed button click
        btn_newsfeed.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View view) {
				// Launching News Feed Screen
				Intent i = new Intent(getApplicationContext(), NewsFeedActivity.class);
				startActivity(i);
			}
		});
        
       // Listening Friends button click
        btn_friends.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View view) {
				// Launching News Feed Screen
				Intent i = new Intent(getApplicationContext(), FriendsActivity.class);
				startActivity(i);
			}
		});
        
        // Listening Messages button click
        btn_messages.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View view) {
				// Launching News Feed Screen
				Intent i = new Intent(getApplicationContext(), MessagesActivity.class);
				startActivity(i);
			}
		});
        
        // Listening to Places button click
        btn_places.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View view) {
				// Launching News Feed Screen
				Intent i = new Intent(getApplicationContext(), PlacesActivity.class);
				startActivity(i);
			}
		});
        
        // Listening to Events button click
        btn_events.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View view) {
				// Launching News Feed Screen
				Intent i = new Intent(getApplicationContext(), EventsActivity.class);
				startActivity(i);
			}
		});
        
        // Listening to Photos button click
        btn_photos.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View view) {
				// Launching News Feed Screen
				Intent i = new Intent(getApplicationContext(), PhotosActivity.class);
				startActivity(i);
			}
		});
    }
}

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 create
NewsFeedActivity.java
FriendsActivity.java
MessagesActivity.java
PlacesActivity.java
EventsActivity.java
PhotosActivity.java

package com.androidhive.dashboard;

import android.app.Activity;
import android.os.Bundle;
import androidhive.dashboard.R;

public class NewsFeedActivity extends Activity {
	 /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.news_feed_layout);
    }
}

11. Also create a layout xml files for all your activities.
news_feed_layout.xml
friends_layout.xml
messages_layout.xml
places_layout.xml
events_layout.xml
photos_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f8f9fe"
    android:orientation="vertical" >

    <include layout="@layout/actionbar_layout" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:padding="15dip"
            android:text="News Feed Screen"
            android:textColor="#ff29549f"
            android:textSize="25dip"
            android:textStyle="bold" />
    </LinearLayout>

</LinearLayout>

Adding Activity entries in AndroidManifest.xml

12. Dont’t forget to add an entry of all activities in your AndroidManifest.xml file. Open you AndroidManifest.xml file and modify the code as below

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="androidhive.dashboard"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="8" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:label="@string/app_name"
            android:name="com.androidhive.dashboard.AndroidDashboardDesignActivity" >
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <!-- News Feed Activity -->
        <activity android:name="com.androidhive.dashboard.NewsFeedActivity" ></activity>

        <!-- Friends Activity -->
        <activity android:name="com.androidhive.dashboard.FriendsActivity" ></activity>

        <!-- Messages Activity -->
        <activity android:name="com.androidhive.dashboard.MessagesActivity" ></activity>

        <!-- Places Activity -->
        <activity android:name="com.androidhive.dashboard.PlacesActivity" ></activity>

        <!-- Events Activity -->
        <activity android:name="com.androidhive.dashboard.EventsActivity" ></activity>
        
        <!-- Photos Activity -->
        <activity android:name="com.androidhive.dashboard.PhotosActivity" ></activity>
    </application>

</manifest>

Run your project by right clicking on your project folder ⇒ Run As ⇒ 1 Android Application.

This image is for thumbnail purpose.android dashboard screen design
Subscribe
Notify of
guest
126 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback

[…] Android Dashboard Design Tutorial | AndroidHive | Tutorials, Games, Apps, Tips Tutorial about creating android dashboard screen design. An example of facebook dashboard screen is explained. Also added some functionality like launching new activity on selecting icon on dashboard. Source: http://www.androidhive.info […]

trackback

[…] Tutorial about creating android dashboard screen design. An example of facebook dashboard screen is explained. Also added some functionality like launching new activity on selecting icon on dashboard.    Mobile Read the original post on DZone… […]

zaheer
zaheer
7 years ago

I am getting not available libraries in dashboard application

selva
selva
7 years ago

Hi Ravi thanks for your post. It is very helpful. I have one question will it compatible if I used this code in android development for 2.3.3? I had follow this tutorial but at the end the icons are not align in grid layout. I wonder why.
I really appreciate if can get some advice from you. Thanks.

Singh Arjun30
Singh Arjun30
7 years ago

please give ur code

Rodrigo Venancio
Rodrigo Venancio
7 years ago

First of all, thanks a lot for this tutorial! I’d like to know how can I make the buttons bigger. I did this dashboard in an app i’m developing for tablets and they look so small in 10″ screens.. Thanks!

KaZzchang
KaZzchang
7 years ago

Great tut! Really helpful…

It might just be me though, but I’m not sure I’m seeing the buttons chance from default to hover to selected state?

Darshan Shah
7 years ago

niceee

Darshan Shah
7 years ago

very good tutorial……

Salma Allouche
Salma Allouche
7 years ago

thanks ! good work

Marwa
Marwa
7 years ago
Reply to  Salma Allouche

Yes good work

Salma Allouche
Salma Allouche
7 years ago
Reply to  Marwa

anti houna :p

Bla
Bla
7 years ago

Is there any way to make the whole thing (image and text) support visual feedback for onClick (e.g. add a highlight when clicking on it)?

sabin
sabin
7 years ago

Good Work.

Samuel
Samuel
7 years ago

Thanks for the tutorial! Question though, how do I use my selector files for the menu icons so they can switch between states of pressed,focused, etc?

pknjinjesto
pknjinjesto
7 years ago

What am i suppose to do if i want to add more button? Where am am i suppose to adjust in code?

pknjinjesto
pknjinjesto
7 years ago

i mean in DashboardLayout class

Muskaan Sharma
Muskaan Sharma
6 years ago

I got an error in my application for android:drawableTop property;
It gives an error

No Resource found that matches given name(at android:drawableTop with value “@drawable/……)

Muskaan Sharma
Muskaan Sharma
6 years ago

My target API is 10 and target sdk version is 2.3.3

Gaurav
Gaurav
6 years ago

Nice tutorial very helpful
but i have one problem ..i want to add detail user in header part or i can say in action bar.. like name state district and other info on action layout.. and that is display on all activities…
but i am unable to bind the details in action bar layout file.
Help Me

Kashif Ahmed
Kashif Ahmed
6 years ago

i have a query i have created a separate java file for dashboard. and my main activity is having a layout for authentication. or simply i want to call it in an if else condition.

Vignaraj Manoj
Vignaraj Manoj
6 years ago

In XHDPI screen resolutions (720×1280, its shows vertically. Not shown like dashboard. Can you help me, how to solve this?

waseem ahmad
waseem ahmad
6 years ago

how to use tab with dashboard ………plzzzz rply with an example

mho938
mho938
6 years ago

hi, tnx for tutorial,
i have a question :
how can do it for 8 button , or 7 button fragment_layout ?

Creative Mentor
6 years ago
Reply to  mho938

Hi
I am asking for the same question. Have you done it? If yes, how to do this. Please share it

Zohaib Ahmed
Zohaib Ahmed
6 years ago

how to add images with round corner in dashboard

abhi
abhi
6 years ago

The application closes on pressing back button. I want to return to the dashboardActivity after back button button is pressed. What changes are required to be made?

Simon
Simon
6 years ago

Hi,

Can you please help me with suggestion on how to adapt this example, so that this dashboard is scrollable once the items are to close together (too many of them) or scrollable all the time (dimensions and number of colums are fixed)

Thank you.

Best regards,
Simon

Martin
Martin
5 years ago

Hi,

How do you remove the grey beam with the text “AndroidDashboardDesign”? So when you open this app you will only see the Facebook-icon at the top of the app. I presume adding some code to the styles.xml?

Grtz,

Martin

saish neugi
saish neugi
5 years ago

Hello,

How can i have this layout to be presented in 3*3 format.

Please reply

Binh Vova
Binh Vova
5 years ago

I think no need to extend Views Groups, can use RelativeLayout to design DashBoard layout.

Dharti Pitroda
Dharti Pitroda
5 years ago

Hi,
How can i create dynamic dashboard using json data in android????

Ankur Shukla
Ankur Shukla
5 years ago

hello,
i am using this code in android studio and its saying that error inflating class in dashboard layout
can you tell me what i might be getting wrong

Amit Dayma
Amit Dayma
4 years ago
Reply to  Ankur Shukla

i am also facing same how did u sortout this error

sathya narayanan
sathya narayanan
4 years ago

how to add sliding navigation along with dashboard ,working separate

Romaan
Romaan
4 years ago

Hay Sir.

can you explain this one ?

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import androidhive.dashboard.R;

-import androidhive.dashboard.R;- ??
how can I import androidhive ?
can I change it into other ?

any help will be so apreciated. 🙂

Null Pointer
Null Pointer
4 years ago

When button are more then 10 then how can i scroll the menu , also problem is dashboard are came closer padding are not working.

Ravi Tamada
4 years ago
Reply to  Null Pointer

What is the UI you want to achieve. This is very old way of doing a dashboard. You can use recyclerview with CardView grid to achieve the same.

Amit Dayma
Amit Dayma
4 years ago

hello Ravi i am using Android Studio & i am getting following errors please help me with this

java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.user.dashboard/com.example.user.dashboard.AndroidDashboardDesignActivity}: android.view.InflateException: Binary XML file line #1: Error inflating class com.androidhive.dashboard.DashboardLayout
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2200)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2249)
at android.app.ActivityThread.access$800(ActivityThread.java:141)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1212)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:136)
at android.app.ActivityThread.main(ActivityThread.java:5113)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:515)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:609)
at dalvik.system.NativeStart.main(Native Method)
Caused by: android.view.InflateException: Binary XML file line #1: Error inflating class com.androidhive.dashboard.DashboardLayout
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:710)
at android.view.LayoutInflater.parseInclude(LayoutInflater.java:819)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:748)
at android.view.LayoutInflater.inflate(LayoutInflater.java:495)
at android.view.LayoutInflater.inflate(LayoutInflater.java:400)
at android.view.LayoutInflater.inflate(LayoutInflater.java:353)
at com.android.internal.policy.impl.PhoneWindow.setContentView(PhoneWindow.java:290)
at android.app.Activity.setContentView(Activity.java:1946)
at com.example.user.dashboard.AndroidDashboardDesignActivity.onCreate(AndroidDashboardDesignActivity.java:16)
at android.app.Activity.performCreate(Activity.java:5248)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2164)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2249)
at android.app.ActivityThread.access$800(ActivityThread.java:141)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1212)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:136)
at android.app.ActivityThread.main(ActivityThread.java:5113)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:515)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:609)
at dalvik.system.NativeStart.main(Native Method)
Caused by: java.lang.ClassNotFoundException: Didn’t find class “com.androidhive.dashboard.DashboardLayout” on path: DexPathList[[zip file “/data/app/com.example.user.dashboard-1.apk”],nativeLibraryDirectories=[/data/app-lib/com.example.user.dashboard-1, /vendor/lib, /system/lib]]
at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:56)
at java.lang.ClassLoader.loadClass(ClassLoader.java:497)
at java.lang.ClassLoader.loadClass(ClassLoader.java:457)
at android.view.LayoutInflater.createView(LayoutInflater.java:562)
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:699)
at android.view.LayoutInflater.parseInclude(LayoutInflater.java:819)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:748)
at android.view.LayoutInflater.inflate(LayoutInflater.java:495)
at android.view.LayoutInflater.inflate(LayoutInflater.java:400)
at android.view.LayoutInflater.inflate(LayoutInflater.java:353)
at com.android.internal.policy.impl.PhoneWindow.setContentView(PhoneWindow.java:290)
at android.app.Activity.setContentView(Activity.java:1946)
at com.example.user.dashboard.AndroidDashboardDesignActivity.onCreate(AndroidDashboardDesignActivity.java:16)
at android.app.Activity.performCreate(Activity.java:5248)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2164)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2249)
at android.app.ActivityThread.access$800(ActivityThread.java:141)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1212)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:136)
at android.app.ActivityThread.main(ActivityThread.java:5113)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:515)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:609)
at dalvik.system.NativeStart.main(Native Method)

Shihab Hossain
Shihab Hossain
4 years ago

Very nice tutorial sir, Is it possible put this custom view into scrollview ?

Eliysha243
Eliysha243
8 years ago

Hello Tamada,
thanks for this useful tutorial but I have one request : can you post a link or un tuto or even explain how do can I do to design my own icons like yours ?

I never used Photoshop or other designing software, that’s why I need some help

thanks

Ravi Tamada
8 years ago
Reply to  Eliysha243

Hi Eliy,

For designing icons learn Pen Tool in photoshop. I am giving link from youtube.
http://www.youtube.com/watch?v=gattVKlx27M

search in youtube lot of tutorials are there.

Eliysha243
Eliysha243
8 years ago
Reply to  Ravi Tamada

thanks for the quick reply 🙂

Kamleshgaonkar
Kamleshgaonkar
8 years ago

Great, Thanks Ravi it is really helpful for me and everyone. only thing is after open any page that content is not scrollable. can you please help me with this.
Thanks.

Ravi Tamada
8 years ago
Reply to  Kamleshgaonkar

Hi Kamlesh,

Use element as parent element for your xml layout.

Thank You

Ilias Tsagklis
Ilias Tsagklis
8 years ago

Hi Ravi,

Nice blog! Is there an email address I can contact you in private?

Ravi Tamada
8 years ago
Reply to  Ilias Tsagklis

Ya Ilias,

You can contact me through this email

ravi8x@gmail.com

Thank You

Jayamohan J
Jayamohan J
8 years ago

Loved it. Nice post.. Exactly what I wanted.

Fresh83
Fresh83
8 years ago

Your scadalous my friend, zuckerberg has to hate you lol

Faron Domenic
Faron Domenic
8 years ago

This is GREAT post! This is godsend tutorial! Have been trying to find one that actually does make sense but I haven’t found even a single one until this post! Thanks, Ravi.

Ravi Tamada
8 years ago
Reply to  Faron Domenic

Thank You Faron.

teddy
teddy
8 years ago

ravi this is very useful info u r providin us.. thnks a lot.. very usefull….!!!

Alee
8 years ago

Hi Ravi, Great Article as always.
Do you have any Iphone Development Blog for beginners? or any reference will do the job 🙂

Ravi Tamada
8 years ago
Reply to  Alee

Hi Alee,

I don’t have any iPhone development blog, but i can give you links which are useful to learn iPhone dev. Check the links below

Its free course by Standford:
http://itunes.apple.com/itunes-u/ipad-iphone-application-development/id473757255

Course from lynda.com – if you can’t buy find other ways to download these
http://www.lynda.com/iPhone-3-tutorials/iphone-sdk-essential-training/48369-2.html

And the books i studied for starting are
Wei Meng Lee – Beginning iOS 4 Application Development – 2010
Apress – Beginning iPhone 4 Development-Exploring the iOS SDK

I think these are enough for a start

Thank You

Faron Domenic
Faron Domenic
8 years ago

Just thought I’d do a quick “heads up”. I have shared this resources to my students as I am also teaching “crash course” in programming. I wanted to say that I am very pleased with this post, because all of my students just suddenly are picking up on this awful fast, even faster than me. I ended up hired two students (the ones that are fastest out of others) and we are set to soar off…. all because of this single post. Thousand of thanks!

Ravi Tamada
8 years ago
Reply to  Faron Domenic

That’s a Great appreciation Faron, Thanks a lot.

Nitin Bansal
Nitin Bansal
8 years ago

Wow…dude…u rockd again…………supperlyk

Santos
Santos
8 years ago

How do I add more items besides the 6 there, I’m not getting

Santos
Santos
8 years ago
Reply to  Santos

I want to add items 8 and possible? how?

Santos
Santos
8 years ago

Lack complete this tutorial with the layout change and delete

Kish Imss
Kish Imss
8 years ago

Nice dude…
Its great

Kishore ...
Kishore ...
8 years ago

Nice dude….

Its great….

Ravi Tamada
8 years ago
Reply to  Kishore ...

Thank You Kishore 🙂

Ramki
Ramki
8 years ago

Hai very excellent tutorial… check ur tags of this site… they not work properly..

how i access ur old posts?… there is no links provided

126
0
Would love your thoughts, please comment.x
()
x