Introduction :
Dashboard screen is an important component in android apps which provides easy navigation to functionalities of app. In this tutorial i am going to explain you how to build a dashboard screen for your app.
DashboardLayout is a ViewGroup extended class.
Reason for using DashboardLayout :
We can also achieve dashboard by using grid view in android. But by using DashboardLayout we can drop elements in a elegant manner. As i said in introduction DashboardLayout is a ViewGroup extended class it is capable of holding child Views (so DashboardLayout is a container like LinearLayout and RelativeLayout).
As we add child Views to the class the DashboardLayout measures the height and width of the individual child and the device height and width then the child views are aligned and scaled automatically.
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.
As we are going to create an application which uses our own custom action bar we need to remove the default actionbar from the application. This is done by applying a custom theme to activity. Declare a theme named noTitleTheme inside the style.xml file. The code is as follows
<style name = "noTitleTheme">
<item name = "android:windowNoTitle">true</item>
</style>
and use this theme in manifest of your application as android:theme = "@style/noTitleTheme"
by doing this the application will use a NoTitle theme.
1. Create a new project by going to File ⇒ New Android Project. Fill all the details and name your activity as AndroidDashboardActivity.
2. In this project i am separating dashboard screen into Action Bar(Header) and Dashboard. Finally i will merge both layouts together.
3. Under res/values create a new xml file and name it as styles.xml
( Right Click on res/values ⇒ New ⇒ Android XML File) and fill it with following code.
Dashboard screen is an important component in android apps which provides easy navigation to functionalities of app. In this tutorial i am going to explain you how to build a dashboard screen for your app.
DashboardLayout is a ViewGroup extended class.
Reason for using DashboardLayout :
We can also achieve dashboard by using grid view in android. But by using DashboardLayout we can drop elements in a elegant manner. As i said in introduction DashboardLayout is a ViewGroup extended class it is capable of holding child Views (so DashboardLayout is a container like LinearLayout and RelativeLayout).
As we add child Views to the class the DashboardLayout measures the height and width of the individual child and the device height and width then the child views are aligned and scaled automatically.
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.
As we are going to create an application which uses our own custom action bar we need to remove the default actionbar from the application. This is done by applying a custom theme to activity. Declare a theme named noTitleTheme inside the style.xml file. The code is as follows
<style name = "noTitleTheme">
<item name = "android:windowNoTitle">true</item>
</style>
and use this theme in manifest of your application as android:theme = "@style/noTitleTheme"
by doing this the application will use a NoTitle theme.
1. Create a new project by going to File ⇒ New Android Project. Fill all the details and name your activity as AndroidDashboardActivity.
2. In this project i am separating dashboard screen into Action Bar(Header) and Dashboard. Finally i will merge both layouts together.
3. Under res/values create a new xml file and name it as styles.xml
( Right Click on res/values ⇒ 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:textSize">14dp</item > <item name = "android:textStyle">bold</item > <item name = "android:textColor">@drawable/login_colorstate</item > <item name = "android:gravity">center_horizontal</item > <item name = "android:layout_gravity">center_vertical</item > <item name = "android:background">@null</item > <item name = "android:layout_width">wrap_content</item > <item name = "android:layout_height">wrap_content</item > </style> <</resources>
|
<RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android" style = "@style/ActionBarCompat" > <ImageView <ImageView android:clickable = "true" android:visibility = <TextView</RelativeLayout> |
⇒ Designing Logout Button
For Logout we are going to design a custom button with the size of 50X39 using any of your desired image editing software. And name icon as logout_pressed and logout_default.
We got the button ready now we are going to write the selector for the logout button.
4.2 Create a new xml file under res/drawable. Right Click on res/drawable folder ⇒ New ⇒ Android XML File and name it as logout_selector.xml and fill it with following code.
|
⇒ Designing Dashboard
For designing dashboard icons you have to use some image editing software (i
used Photoshop and Illustrator to create icons). Design each icon for three stages Default State, Hover state and Selected state. You can design for different device densities like hdpi, ldpi, mdpi, xhdpi. For time being i am designing only for hdpi all icons with 160px 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.
package com.androiddelight.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); } super(context, attrs, 0); } public DashboardLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); }@Overrideprotected 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)); }@Overrideprotected 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 col // 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; } }}( Right Click on res/layout ⇒ New ⇒ Android XML File) |
<!-- Your package folder --><com.androiddelight.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 = "@drawable/dashboard_bg" > <!-- Make order Button --> <Button <!-- Check update Button --> <Button <Button <!-- Make payment Button --> <Button </com.androiddelight.dashboard.DashboardLayout> |
The output of above code will be
⇒ Merging both layout together
So far we designed Action bar and Dashboard. Finally we need to merge both 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"/> </LinearLayout > |
The final output will be
Check out this live demo :
That's it! This tutorial is to demonstrate a neat and standard looking dashboard. While following this tutorial if you find any of the resources are missing you can click here to get the source code. Share this tutorial if it is useful.
Tq for sharing valuable information with us about study bible
ReplyDeleteTo recover lost files click on: android data recovery
android data recovery apk without root
android data recovery software
android data recovery app
android data recovery free
android recovery
diskdigger for android