Android Dashboard Design

Android Dashboard Design Example

Here I am already assuming that you are aware about how to create "Android App".

This blog is meant to help those android developer who are looking to know how to make a dashboard in an Android app.
"Dashboard"...if it sounds familiar to you, great ! For rest, let me briefly tell you a bit about it.

We can say Dashboard is a page containing large and clear symbols of main functionality and optionally an area for relevant new information.

 So, in our Dashboard, we will have 5 buttons to access five different app's modules - news, events, photos, friends and message. On clicking any of these buttons, their respective tasks should be performed.

Here I took five buttons for news, events, photos, friends and messages sections. They are performing their perspective action.

strings.xml -

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

    <string name="dashboard">DashBoard</string>
    <string name="news">News</string>
    <string name="events">Events</string>
    <string name="photos">Photos</string>
    <string name="friends">Friends</string>
    <string name="messages">Messages</string>

</resources>

dashboard_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:orientation="vertical" >

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

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/btn_news"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:gravity="center"
                    android:text="@string/news" />

                <Button
                    android:id="@+id/btn_events"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:gravity="center"
                    android:layout_marginLeft="10dp"
                    android:text="@string/events" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center_horizontal"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/btn_photos"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:gravity="center"
                    android:text="@string/photos" />

                <Button
                    android:id="@+id/btn_friends"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:gravity="center"
                    android:layout_marginLeft="10dp"
                    android:text="@string/friends" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center_horizontal"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/btn_messages"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:text="@string/messages" />
            </LinearLayout>
        </LinearLayout>
    </ScrollView>

</LinearLayout>

header_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="wrap_content"
    android:orientation="vertical"
     >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/dashboard"
        android:textSize="20sp"
        android:background="#4863A0"
        android:gravity="center_horizontal"
        android:textColor="#ffffff" />

</LinearLayout>

AndroidManifest.xml - 

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

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

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.demoapp.DashBoardActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

    </application>

</manifest>

DashBoardActivity.java - 

package com.demoapp;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class DashBoardActivity extends Activity implements OnClickListener{

private Button newsBtn,eventBtn,photosBtn,friendsBtn,messageBtn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.dashboard_layout);

setupView();
}

private void setupView()
{
newsBtn = (Button) findViewById(R.id.btn_news);
eventBtn = (Button) findViewById(R.id.btn_events);
photosBtn = (Button) findViewById(R.id.btn_photos);
friendsBtn = (Button) findViewById(R.id.btn_friends);
messageBtn = (Button) findViewById(R.id.btn_messages);

newsBtn.setOnClickListener(this);
eventBtn.setOnClickListener(this);
photosBtn.setOnClickListener(this);
friendsBtn.setOnClickListener(this);
messageBtn.setOnClickListener(this);
}

@Override
public void onClick(View v) {

switch (v.getId()) {
case R.id.btn_news:
Toast.makeText(this, "News Button Clicked", Toast.LENGTH_SHORT).show();
break;

        case R.id.btn_events:
        Toast.makeText(this, "News Button Clicked", Toast.LENGTH_SHORT).show();
break;

        case R.id.btn_photos:
        Toast.makeText(this, "News Button Clicked", Toast.LENGTH_SHORT).show();
       break;

       case R.id.btn_friends:
       Toast.makeText(this, "News Button Clicked", Toast.LENGTH_SHORT).show();
       break;

       case R.id.btn_messages:
       Toast.makeText(this, "News Button Clicked", Toast.LENGTH_SHORT).show();
       break;
default:
break;
}
}
}


Output -

On Successfully running the sample application, you should be able to see our desired output, shown below as well.

That's it!! I have created a dashboard for an android app.

Hope you like this blog and it was worth reading for you. I would love to hear any suggestions or feedback.

Keep visiting here for more interesting and challenging work.

Happy Coding!!