Android Dashboard Design Example

This tutorial is for designing the dashboard page in android just like image looking in gridview.This is something like designing android icon based menues.
Thanks to Ravi Tamada for his wonderful tutorial at (http://www.androidhive.info/2011/12/android-dashboard-design-tutorial/).
As a reference i am using the code from Google I/O app and the above url.


1.MainClass.java
=======================================
package com.p1;


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


public class MainClass extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        Button facebook = (Button) findViewById(R.id.facebook);      
        facebook.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
System.out.println("facebook button clicked");
}
});
    }
}


2.DashboardLayout.java
==========================================
package com.p1;




/*
 * 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;
        }
    }
}


3.layout/main.xml
=========================================
<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 Header Bar -->
    <include layout="@layout/header_layout"/>
   
    <!--  Include Content dashboard -->
<include layout="@layout/content_layout"/>

<!--  Include Footer -->
<include layout="@layout/footer_layout"/>
       
</LinearLayout>


4.layout/header_layout.xml
===========================================================
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent"
    android:layout_height="50dp" 
    android:orientation="horizontal"
    android:background="@drawable/bg">


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


</LinearLayout>


5.layout/content_layout.xml
========================================
<com.p1.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:orientation="vertical"
    android:background="#FFC0CB" >
<!--  Facebook Button -->
    <Button
        android:id="@+id/facebook"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/fb"
        android:text="Facebook" />
    
<!--  Twitter Button -->
    <Button
        android:id="@+id/twitter"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/twitter"
        android:text="Twitter" />
    
<!--  Flicker Button -->
    <Button
        android:id="@+id/flicker"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/flicker"
        android:text="Flicker" />

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


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


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


</com.p1.DashboardLayout >


6.layout/footer_layout.xml
=========================================================
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="40dp" 
    android:orientation="horizontal"
    android:background="#800080">
<TextView android:text="www.rajuandroid.blogspot.com"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:autoLink="web"
    android:gravity="center"    
    android:paddingTop="10dip"/>
</LinearLayout>


7.values/styles.xml
=========================================================
<resources>
    <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>        
</resources>

and.png

bg.png

fb.png

flicker.png

logo.png

myspace.png

twitter.png

youtube.png