Logo

Dashboard UI Design in Android

One of the essential components that draw the user’s attentions into the application's operation is the dashboard design. It offers details on the application's general functionality in one location. Imagine compiling all of the application functionality onto a single page when developing a dashboard.

The creation of icons (to avoid copyright issues), positioning items in the proper locations on the screen, managing user accounts, and other design aspects of the dashboard take some time and work. How to implement the stunning dashboard for the application has been covered in this post. To get a sense of the entire discussion, look at the following image.

Steps for using the Material Design Modern Dashboard in Android

Step 1: Set up a blank activity project.

To learn how to create an empty activity Android Studio project, visit Android | How to Create/Start a New Project in Android Studio. We are using Android Studio to build the application.

Step 2: Including the necessary dependence

  • The app level gradle file should be updated to include the following material design dependency. The "Sync Now" button is located in the top right corner. Click it.
  • In order for Android Studio to download all the necessary files, make sure the system is connected to the internet.

Note: To avoid any copyright issues, it is advised that you create your own icons before moving ahead. Select the drawable folder, and then add all the images and icons.

Step 3: modifying the activity main.xml file

  • The dashboard is developed in the application's primary layout (just for illustration purposes).
  • The material design elements like card view are present in the following layout.
  • The corporate name or logo, the user's profile, the logout button, and the key functions of the application are the major things that need to be invoked.
  • Designing the dashboard layout depends on the thinking and creativity of the individual, as well as how the developer can streamline the dashboard and consolidate all of the application's functions in one location.
  • The major factor in this case is the constrained layout, which enables developers to create complicated user interfaces with ease.
  • The tactile feedback in each of the pieces is crucial in this situation, which is one key point. because it improves the user's experience and gives the user a sense of assurance that the element has been tinkered with.
  • To learn how to implement the touch feedbacks—the ripple effect when an element is touched—refer to Ripple Effect on Android Button.
  • The code below generates the green view which will be visible behind the text "MYAPPLICATION1." It must be saved as a file with the name "custom rectangle" in the drawable folder.

XML Code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<solid android:color="@color/green_500" />
	<corners
		android:bottomLeftRadius="24dp"
		android:bottomRightRadius="24dp" />
</shape>
  • To implement the UI, run the following code within the activity main.xml file. which includes the complete dashboard user interface (this is just for reference). One can, however, customise the UI to his or her liking.

XML Code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
xmlns:app = "http://schemas.android.com/apk/res-auto"
xmlns:tools = "http://schemas.android.com/tools"
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:background = "#e5e5e5"
tools:context = ".MainActivity"
tools:ignore = "HardcodedText">


<View
android:id = "@+id/view1"
android:layout_width = "match_parent"
android:layout_height = "130dp"
android:background = "@drawable/shape1"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toTopOf = "parent" />


<Button
android:id="@+id/backB1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:padding="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />


<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="20dp"
android:gravity="center_horizontal"
android:letterSpacing="0.03"
android:text="APPLICATION1"
android:textColor="@color/white"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="@+id/backB1"
app:layout_constraintTop_toTopOf="parent" />


<Button
android:id="@+id/logOutB1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:padding="10dp"
app:layout_constraintCircleRadius="26dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />


<androidx.cardview.widget.CardView
android:id = "@+id/cardView1"
android:layout_width = "match_parent"
android:layout_height = "130dp"
android:layout_marginStart = "20dp"
android:layout_marginTop = "20dp"
android:layout_marginEnd = "20dp"
android:elevation = "15dp"
app:cardCornerRadius = "10dp"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintHorizontal_bias = "0.0"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/textView1">


<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent">


<TextView
android:id="@+id/textView2a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:text="FIRSTNAME And LASTNAME"
android:textAllCaps="true"
android:textColor="@color/purple_700"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />


<TextView
android:id = "@+id/textView3a"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginTop = "5dp"
android:text = "Name of the College"
android:textColor = "@android:color/black"
android:textSize = "15sp"
app:layout_constraintStart_toStartOf = "@+id/textView2a"
app:layout_constraintTop_toBottomOf = "@+id/textView2a" />


<com.google.android.material.button.MaterialButton
android:id="@+id/todoB1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:text="TODO LISTS"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />


<com.google.android.material.button.MaterialButton
android:id = "@+id/editProfileB1"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginStart = "10dp"
android:text = "EDIT YOUR PROFILE"
android:textColor = "@color/purple_700"
app:layout_constraintBottom_toBottomOf = "@+id/todoB1"
app:layout_constraintStart_toEndOf = "@+id/todoB1" />


<Button
android:id="@+id/profileB1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.253" />


</androidx.constraintlayout.widget.ConstraintLayout>


</androidx.cardview.widget.CardView>


<LinearLayout
android:id = "@+id/linearLayout1"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_marginTop = "15dp"
android:gravity = "center_horizontal"
android:orientation = "horizontal"
android:weightSum = "2"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/cardView1">


<androidx.cardview.widget.CardView
android:id = "@+id/contributeCard1"
android:layout_width = "130dp"
android:layout_height="130dp"
android:layout_margin="10dp"
android:layout_marginEnd="20dp"
android:clickable="true"
android:elevation="15dp"
android:focusable="true"
app:cardCornerRadius="10dp">


<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


<ImageView
android:id="@+id/image_view1a"
android:layout_width="87dp"
android:layout_height="100dp"
android:src="@drawable/one"
app:layout_constraintBottom_toTopOf="@+id/textView1a"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />


<TextView
android:id="@+id/textView1a"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="CONTRIBUTE"
android:textAllCaps="true"
android:textColor="@color/purple_700"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/image_view1a" />


</androidx.constraintlayout.widget.ConstraintLayout>


</androidx.cardview.widget.CardView>


<androidx.cardview.widget.CardView
android:id="@+id/practiceCard1"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_margin="10dp"
android:layout_marginStart="18dp"
android:clickable="true"
android:elevation="15dp"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="10dp">


<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


<ImageView
android:id="@+id/image_view20a"
android:layout_width="96dp"
android:layout_height="100dp"
android:src="@drawable/two"
app:layout_constraintBottom_toTopOf="@+id/textView20a"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />


<TextView
android:id="@+id/textView20a"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="PRACTICES"
android:textAllCaps="true"
android:textColor="@color/purple_700"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/image_view20a" />


</androidx.constraintlayout.widget.ConstraintLayout>


</androidx.cardview.widget.CardView>


</LinearLayout>


<LinearLayout
android:id="@+id/linearLayout2a"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:weightSum="2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayout1">


<androidx.cardview.widget.CardView
android:id="@+id/learnCard1"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_margin="10dp"
android:layout_marginEnd="18dp"
android:clickable="true"
android:elevation="15dp"
android:focusable="true"
app:cardCornerRadius="10dp">


<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


<ImageView
android:id="@+id/image_view21a"
android:layout_width="93dp"
android:layout_height="89dp"
android:src="@drawable/three"
app:layout_constraintBottom_toTopOf="@+id/textView21a"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />


<TextView
android:id="@+id/textView21a"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="LEARNS"
android:textAllCaps="true"
android:textColor="@color/purple_700"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/image_view21a" />


</androidx.constraintlayout.widget.ConstraintLayout>


</androidx.cardview.widget.CardView>


<androidx.cardview.widget.CardView
android:id="@+id/interestsCard1"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_margin="10dp"
android:layout_marginStart="18dp"
android:clickable="true"
android:elevation="15dp"
android:focusable="true"
app:cardCornerRadius="10dp">


<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


<ImageView
android:id="@+id/image_view22a"
android:layout_width="87dp"
android:layout_height="94dp"
android:src="@drawable/four"
app:layout_constraintBottom_toTopOf="@+id/textView22a"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />


<TextView
android:id="@+id/textView22a"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="INTEREST"
android:textAllCaps="true"
android:textColor="@color/purple_700"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/image_view22a" />


</androidx.constraintlayout.widget.ConstraintLayout>


</androidx.cardview.widget.CardView>


</LinearLayout>


<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:weightSum="2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayout2a">


<androidx.cardview.widget.CardView
android:id="@+id/helpCard1"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_margin="10dp"
android:layout_marginEnd="18dp"
android:clickable="true"
android:elevation="15dp"
android:focusable="true"
app:cardCornerRadius="10dp">


<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


<ImageView
android:id="@+id/image_view23a"
android:layout_width="93dp"
android:layout_height="80dp"
android:src="@drawable/five"
app:layout_constraintBottom_toTopOf="@+id/textView23a"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />


<TextView
android:id="@+id/textView23a"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="HELPS"
android:textAllCaps="true"
android:textColor="@color/purple_700"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/image_view23a" />


</androidx.constraintlayout.widget.ConstraintLayout>


</androidx.cardview.widget.CardView>


<androidx.cardview.widget.CardView
android:id="@+id/settingsCard1"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_margin="10dp"
android:layout_marginStart="18dp"
android:clickable="true"
android:elevation="15dp"
android:focusable="true"
app:cardCornerRadius="10dp">


<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


<ImageView
android:id="@+id/image_view1"
android:layout_width="90dp"
android:layout_height="84dp"
android:src="@drawable/one"
app:layout_constraintBottom_toTopOf="@+id/textView4a"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />


<TextView
android:id="@+id/textView4a"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="SETTING"
android:textAllCaps="true"
android:textColor="@color/purple_700"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/image_view1" />


</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: MainActivity.kt file manipulation

  • Here, for demonstrational purposes, the OnClickListener method is used to handle each element, which when clicked, causes a toast message to appear.
  • However, distinct activities must be developed and put into place for each of the card views in order for the functions to be used in the real world.
  • For a better understanding, refer to the output of the code that follows.

Kotlin Code:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ImageButton
import android.widget.Toast
import androidx.cardview.widget.CardView


class MainActivity :AppCompatActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(R.layout.activity_main)


		// registering  allImageButtons with their respective IDs
		val backB1: ImageButton = findViewById(R.id.backB1)
		val logOutB1: ImageButton = findViewById(R.id.logOutB1)
		val profileB1: ImageButton = findViewById(R.id.profileB1)


		// registering all Buttons with their respective IDs
		val todoB1: Button = findViewById(R.id.todoB1)
		val editProfileB1: Button = findViewById(R.id.editProfileB1)


		// registering  all card views with their respective IDs
		val contributeCard1: CardView = findViewById(R.id.contributeCard1)
		val practiceCard1: CardView = findViewById(R.id.practiceCard1)
		val learnCard1: CardView = findViewById(R.id.learnCard1)
		val interestsCard1: CardView = findViewById(R.id.interestsCard1)
		val helpCard1: CardView = findViewById(R.id.helpCard1)
		val settingsCard1: CardView = findViewById(R.id.settingsCard1)




		// handling each of the image buttons with the OnClickListener
		backB1.setOnClickListener {
			Toast.makeText(this, "Back Buttons", Toast.LENGTH_SHORT).show()
		}
		logOutB1.setOnClickListener {
			Toast.makeText(this, "Logout Buttons", Toast.LENGTH_SHORT).show()
		}
		profileB1.setOnClickListener {
			Toast.makeText(this, "Profile Picture", Toast.LENGTH_SHORT).show()
		}




		// handling each of the buttons with the OnClickListener
		todoB1.setOnClickListener {
			Toast.makeText(this, "TODO LISTS", Toast.LENGTH_SHORT).show()
		}
		editProfileB1.setOnClickListener {
			Toast.makeText(this, "Editing the Profile", Toast.LENGTH_SHORT).show()
		}




		// handling each of the cards with the OnClickListener
		contributeCard1.setOnClickListener {
			Toast.makeText(this, "Contributing on the Articles", Toast.LENGTH_SHORT).show()
		}
		practiceCard1.setOnClickListener {
			Toast.makeText(this, "Practicing Programming", Toast.LENGTH_SHORT).show()
		}
		learnCard1.setOnClickListener {
			Toast.makeText(this, "Learning Programming", Toast.LENGTH_SHORT).show()
		}
		interestsCard1.setOnClickListener {
			Toast.makeText(this, "Filtering  your Choices", Toast.LENGTH_SHORT).show()
		}
		helpCard1.setOnClickListener {Toast.makeText(this, "Do want any help?", Toast.LENGTH_SHORT).show()
		}
		settingsCard1.setOnClickListener {Toast.makeText(this, "Changing the settings", Toast.LENGTH_SHORT).show()
		}
	}
}

Output:

Dashboard UI Design in Android

Related Topics

Android TextView

Widgets are user interface (UI) elements that help users to interact with Android applications. It is one of many equipments that can be used to improvise the user interface of...

4 minutes read.

Android ScrollView

A ScrollView is a view group that is used to create vertically scrollable views in an android application. Only a single direct child can be contained by ScrollView. For placing...

5 minutes read.

How to reduce the size of APK in Android

What exactly is an APK file? The full form of APK is Android Package Kit. It is the Android operating system's application file format. We use Android Studio to generate APK...

7 minutes read.

Event Handling in Android

Events are a convenient way to gather data about user interactions with interactive elements of your application. Like a button click or a screen touch. A queue of events on...

3 minutes read.

Content Providers of Android with Example

An essential part of Android that performs the function of a relational database by storing application data is called a content provider. The function of the content provider in the...

13 minutes read.

Jetpack Architecture Components in Android

A collection of software elements, libraries, tools, and instructions is called Android Jetpack. It is available to assist in creating reliable Android applications. Jetpack, which was introduced by Google in...

8 minutes read.

Android Toast

Android is one of the most successful operating systems available in today's world. It is an open-source phone platform, compatible with almost all the devices. There are numerous features and...

3 minutes read.

Difference between android developer and web

From a small business to a big firm, every organization in the world of technology requires a digital market presence and only mobile applications and websites/web applications provide for digital...

4 minutes read.

Android Project Folder Structure

JetBrains community developed Android Studio, the official IDE (Integrated Development Environment) for Android app development and is freely distributed by Google. After the complete Android Architecture setup, we can construct an...

4 minutes read.

Android ListView

A kind of AdapterView that displays a vertical list of scrollable views, each of which is laid out below each other is called ListView. Using adapters, items are inserted into...

4 minutes read.

Android 9.0 Pie vs. Android 10, which one is better

Android smartphone users are always searching for new system upgrades and keep an eye on system updates whenever the next version is published. Android 9 Pie and Android Q 10 are...

5 minutes read.

Dashboard UI Design in Android

One of the essential components that draw the user’s attentions into the application's operation is the dashboard design. It offers details on the application's general functionality in one location. Imagine...

11 minutes read.

Different Ways to Create aar File in Android Studio

A file called an Android archive file (*.aar) can be created using Android Studio and comprises classes and methods that use related files and classes for Android. The Android library...

4 minutes read.

Assets folder in Android

You might have noticed that unlike the Eclipse ADT (App Development Tools), the Android Studio does not have an Assets folder, which is mainly used to store the web resources...

3 minutes read.

Android Studio's Layout Editor

The Layout Editor allows you to efficiently create layouts by dragging UI elements from the Palette into the visual design editor instead of manually creating the layout XML file by...

8 minutes read.

Top 7 Android App Development Books

Do you want to create Android apps but don't know where to start? One should first be familiar with the basics of Android before we discuss these books. With the...

5 minutes read.

Button Widget in Android Tutorial

Explanation: Button is a widget under Buttons section which is used to execute specific code. Example: XML file: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">     <Button         android:id="@+id/button"         android:layout_width="wrap_content"    ...

1 minute read.

How to Update Gradle in Android Studio?

The Android Gradle plugin adds a number of features that are unique to develop Android apps to the Gradle build system, which is the foundation of the Android Studio development...

2 minutes read.

Broadcast Receiver in Android with Example

When a device wakes up, receives a message, receives an incoming call, switches to aeroplane mode, or initiates any other system-wide action, it is said to have been broadcast in...

5 minutes read.

Android Time picker example

How to pick Time from the user in android? Write an android example to pick Time from the user and display the date to the user. Android provides controls for the user...

3 minutes read.