Skip to main content

Dashboard UI Design for Android App

https://www.viralandroid.com/2016/02/dashboard-ui-design-for-android-app.html


In this tutorial, you will learn to create a material design dashboard for android application with progressing status. Making dashboard user interface is not much difficult in android but making actual working dashboard is not easy. In this dashboard I have used ProgressBar to show progress activity.

Here I have created two different XML files in drawable folder to make circular progress using ProgressBar and I have added RelativeLayout, LinearLayout, ProgressBar, TextView, ScrollView, etc in XML layout file with different attributes.

Related:
Android Material Design Login Form XML UI Design
Android Progress Bar Example
Android Custom Vertical Dropdown Icons Menu

Android Example: Material Design Dashboard UI Design for Android App


Let’s start by creating new android project with project name: Dashboard UI Design For Android.

Firstly, add the following color values in your project res/values/colors.xml file.

res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#009688</color>
<color name="colorPrimaryDark">#00796B</color>
<color name="colorAccent">#FF4081</color>
<color name="light_black">#504f4f</color>
<color name="black">#000000</color>
<color name="blue">#0737d4</color>
</resources>
view rawcolors.xml hosted with ❤ by GitHub

Now, create two XML files in drawable folder of your project to make circular progress bar. Following is the complete content of two XML files of drawable folder.

res/drawable/ circular_progress_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="2.3"
android:shape="ring"
android:thickness="5dp"
android:useLevel="true">
<solid android:color="@color/colorPrimary" />
</shape>
view rawcircular_progress_bar.xml hosted with ❤ by GitHub

res/drawable/ circle_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="2.5"
android:thickness="1dp"
android:useLevel="false">
<solid android:color="#CCC" />
</shape>
view rawcircle_shape.xml hosted with ❤ by GitHub

XML Layout File


In XML layout file I have added different RelativeLayout, LinearLayout, ProgressBar, TextView etc. Following is the complete content of XML layout file.

res/layout/ dashboard_xml_ui_design.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ddd">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#fff"
android:gravity="center_horizontal"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:text="Storage"
android:textSize="18sp"
android:textStyle="bold" />
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="26dp"
android:background="@drawable/circle_shape"
android:indeterminate="false"
android:max="100"
android:progress="10"
android:progressDrawable="@drawable/circular_progress_bar" />
<TextView
android:id="@+id/progress_circle_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@android:color/transparent"
android:gravity="center"
android:text="15%"
android:textColor="@color/colorPrimary"
android:textSize="30sp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:background="#fff"
android:gravity="center_horizontal"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:text="Battery"
android:textSize="18sp"
android:textStyle="bold" />
<ProgressBar
android:id="@+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="26dp"
android:background="@drawable/circle_shape"
android:indeterminate="false"
android:max="100"
android:progress="75"
android:progressDrawable="@drawable/circular_progress_bar" />
<TextView
android:id="@+id/progress_circle_text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@android:color/transparent"
android:gravity="center"
android:text="75%"
android:textColor="@color/colorPrimary"
android:textSize="30sp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#fff"
android:gravity="center_horizontal"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:text="RAM"
android:textSize="18sp"
android:textStyle="bold" />
<ProgressBar
android:id="@+id/progressBar3"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="26dp"
android:background="@drawable/circle_shape"
android:indeterminate="false"
android:max="100"
android:progress="60"
android:progressDrawable="@drawable/circular_progress_bar" />
<TextView
android:id="@+id/progress_circle_text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@android:color/transparent"
android:gravity="center"
android:text="60%"
android:textColor="@color/colorPrimary"
android:textSize="30sp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:background="#fff"
android:gravity="center_horizontal"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:text="Performance"
android:textSize="18sp"
android:textStyle="bold" />
<ProgressBar
android:id="@+id/progressBar4"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="26dp"
android:background="@drawable/circle_shape"
android:indeterminate="false"
android:max="100"
android:progress="85"
android:progressDrawable="@drawable/circular_progress_bar" />
<TextView
android:id="@+id/progress_circle_text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@android:color/transparent"
android:gravity="center"
android:text="85%"
android:textColor="@color/colorPrimary"
android:textSize="30sp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:text="ViralAndroid.com"
android:textSize="22sp"
android:textStyle="bold" />
</LinearLayout>
</ScrollView>
view rawdashboard_xml_ui_design.xml hosted with ❤ by GitHub



Java Activity File


Following is the complete code of java activity file.

src/ DashboardForAndroidApp.java
//Dashboard/FrontPage XML UI Design For Android App and Game with Source Code
package viralandroid.com.androidxmluserinterfacetutorial;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.widget.ProgressBar;
import android.widget.TextView;
public class DashboardForAndroidApp extends AppCompatActivity {
ProgressBar myprogressBar;
TextView progressingTextView;
Handler progressHandler = new Handler();
int i = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.dashboard_xml_ui_design);
myprogressBar = (ProgressBar) findViewById(R.id.progressBar);
progressingTextView = (TextView) findViewById(R.id.progress_circle_text);
new Thread(new Runnable() {
public void run() {
while (i < 100) {
i += 2;
progressHandler.post(new Runnable() {
public void run() {
myprogressBar.setProgress(i);
progressingTextView.setText("" + i + " %");
}
});
try {
Thread.sleep(300);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();
}
}
view rawDashboardForAndroidApp.java hosted with ❤ by GitHub

Strings.xml File


res/values/strings.xml
<resources>
<string name="app_name">Android App Dashboard UI Design</string>
</resources>
view rawstrings.xml hosted with ❤ by GitHub

Android Example: Material Design Dashboard UI Design for Android App

Now, run your Dashboard UI Design for Android application, you will see four different progresses for different topics: storage, battery, RAM, performance in progress bar.

Comments

Post a Comment

Popular posts from this blog

web2apk

http://web2apk.com/create.aspx Create App   Intro   About   Changes   MalWare ?   Contact   Privacy Useful Links Bluetooth Mini Keyboards Android Mini PC Reset Android URL App Title Icon or
Post a Comment
Read more

Android Bar Chart Using MpAndroidChart Library Tutorial

https://www.numetriclabz.com/android-bar-chart-using-mpandroidchart-library-tutorial/ Android Bar Chart Using MpAndroidChart Library Tutorial Objective In this tutorial we learn how to implement Bar Chart using MpAndroidChart Library in your Android App. Download Source Code       Step 1 Contents ·        1  Introduction ·        2  Creating Bar chart o    2.1  Create a new Project o    2.2  Adding library in Project o    2.3  Create Layout o    2.4  To Plot Bar Chart §   2.4.1  Initialize the graph id §   2.4.2  Creating a Dataset §   2.4.3  Defining X-axis labels §   2.4.4  Set the data §   2.4.5  Add the description to the chart §   2.4.6  Run your App § ...
2 comments
Read more

how to retrieve image from sqlite database in android and display in listview

 Android platform provides several ways to store data in our application. 1. SQLite database 2. SharedPreferences etc For our post, we will only work with SQLite database. First and foremost, we need to understand what an SQLite database is? SQLite database  is an open source SQL database that stores data to a text file on a device. It executes SQL Commands to perform a set of functions, that is, create, read, update and delete operations. On my previous post, I showed how to  store data in SQLite database from edit text, retrieve and populate it in a listview . For this post, I will show the SQLite CRUD operations with images from gallery and text from EditText. We need to understand this; images are stored in SQLite database as BLOB data type. A BLOB is a large binary object that can hold a variable amount of data.  Note, we can only store images in the database as BLOB data type. We need to convert our image path to a bitmap th...
1 comment
Read more