Dashboard UI Design in Android

Last Updated : 24 Jan, 2021

The Dashboard design is one of the key elements which engages the user with the functionality of the application. It provides information about the overall functionality of the application in one place. The dashboard designing is like putting all the application features on a single page. Designing the dashboard needs a bit of effort in choosing the right kind of color, creating icons (to not get copyright issues), placing the things at the right position of the screen, managing the user account, etc. In this article, it’s been discussed how we can implement the beautiful dashboard for the application. Have a look at the following image to get an idea about the entire discussion.

Steps to Implement the Materialistic Modern Dashboard in Android

Step 1: Create an empty activity project

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

Step 2: Adding the required dependency

Add the following material design dependency to the app level gradle file. And click on the “Sync Now” button which appears in the top right corner.
Make sure the system is connected to the network so that Android Studio can download all the required files.

implementation ‘com.google.android.material:material:1.2.1’

Note: Before proceeding further it’s suggested to make your own icons so as not to get any of the copyright issues. And add all the images and icons to the drawable folder.

Step 3: Working with the activity_main.xml file

In the main layout of the application itself, the dashboard is designed (for demonstration purposes only).
The following layout contains the material design components like cardview.
The main things which are to be invoked are the company title or logo, the profile of the user, the logout button, main features of the application.
Designing the Dashboard layout depends on the individual’s thinking and creativity, on how the developer can simplify the dashboard and present all the functionality of the application in one place.
The main thing here is the constraint layout which makes the building complex UI easily for the developer.
One important thing here is that the tactile feedback in each of the elements is very important. Because it enhances the User Experience and also gives confidence to the user that the element has been touched.
Refer to Ripple Effect on Android Button, to know how to implement the touch feedbacks, that is ripple effect when an element is touched.
The green view behind the text heading GEEKSFORGEEKS is created using the following code. Which needs to be put under the drawable folder as file name “custom_rectangle“.

XML

<?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>

Invoke the following code inside the activity_main.xml file to implement the UI. Which contains the entire dashboard user interface(it’s only for reference purposes. However, one can design the UI according to his choice).

XML

<?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="#e4e4e4"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText"> 
  
    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="128dp"
        android:background="@drawable/custom_rectangle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" /> 
  
    <ImageButton
        android:id="@+id/backB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:background="?attr/selectableItemBackground"
        android:padding="8dp"
        android:src="@drawable/ic_back"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" /> 
  
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:gravity="center_horizontal"
        android:letterSpacing="0.025"
        android:text="GEEKSFORGEEKS"
        android:textColor="@color/white"
        android:textSize="28sp"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/backB"
        app:layout_constraintTop_toTopOf="parent" /> 
  
    <ImageButton
        android:id="@+id/logOutB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:background="?attr/selectableItemBackground"
        android:padding="8dp"
        android:src="@drawable/ic_logout"
        app:layout_constraintCircleRadius="24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" /> 
  
    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="128dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:elevation="12dp"
        app:cardCornerRadius="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"> 
  
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"> 
  
            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:text="FIRSTNAME LASTNAME"
                android:textAllCaps="true"
                android:textColor="@color/green_500"
                android:textSize="16sp"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" /> 
  
            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="College Name"
                android:textColor="@android:color/black"
                android:textSize="14sp"
                app:layout_constraintStart_toStartOf="@+id/textView2"
                app:layout_constraintTop_toBottomOf="@+id/textView2" /> 
  
            <com.google.android.material.button.MaterialButton
                android:id="@+id/todoB"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginBottom="8dp"
                android:text="TODO LIST"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent" /> 
  
            <com.google.android.material.button.MaterialButton
                android:id="@+id/editProfileB"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:text="EDIT PROFILE"
                android:textColor="@color/green_500"
                app:layout_constraintBottom_toBottomOf="@+id/todoB"
                app:layout_constraintStart_toEndOf="@+id/todoB" /> 
  
            <ImageButton
                android:id="@+id/profileB"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="16dp"
                android:background="?attr/selectableItemBackground"
                android:padding="8dp"
                android:src="@drawable/profile"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" /> 
  
        </androidx.constraintlayout.widget.ConstraintLayout> 
  
    </androidx.cardview.widget.CardView> 
  
    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        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/cardView"> 
  
        <androidx.cardview.widget.CardView
            android:id="@+id/contributeCard"
            android:layout_width="128dp"
            android:layout_height="128dp"
            android:layout_margin="8dp"
            android:layout_marginEnd="16dp"
            android:clickable="true"
            android:elevation="12dp"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="8dp"> 
  
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"> 
  
                <ImageView
                    android:id="@+id/image_view1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:src="@drawable/write"
                    app:layout_constraintBottom_toTopOf="@+id/textView1"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" /> 
  
                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="CONTRIBUTE"
                    android:textAllCaps="true"
                    android:textColor="@color/green_500"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/image_view1" /> 
  
            </androidx.constraintlayout.widget.ConstraintLayout> 
  
        </androidx.cardview.widget.CardView> 
  
        <androidx.cardview.widget.CardView
            android:id="@+id/practiceCard"
            android:layout_width="128dp"
            android:layout_height="128dp"
            android:layout_margin="8dp"
            android:layout_marginStart="16dp"
            android:clickable="true"
            android:elevation="12dp"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="8dp"> 
  
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"> 
  
                <ImageView
                    android:id="@+id/image_view20"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:src="@drawable/practice"
                    app:layout_constraintBottom_toTopOf="@+id/textView20"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" /> 
  
                <TextView
                    android:id="@+id/textView20"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="PRACTICE"
                    android:textAllCaps="true"
                    android:textColor="@color/green_500"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/image_view20" /> 
  
            </androidx.constraintlayout.widget.ConstraintLayout> 
  
        </androidx.cardview.widget.CardView> 
  
    </LinearLayout> 
  
    <LinearLayout
        android:id="@+id/linearLayout2"
        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/linearLayout"> 
  
        <androidx.cardview.widget.CardView
            android:id="@+id/learnCard"
            android:layout_width="128dp"
            android:layout_height="128dp"
            android:layout_margin="8dp"
            android:layout_marginEnd="16dp"
            android:clickable="true"
            android:elevation="12dp"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="8dp"> 
  
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"> 
  
                <ImageView
                    android:id="@+id/image_view21"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:src="@drawable/learn"
                    app:layout_constraintBottom_toTopOf="@+id/textView21"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" /> 
  
                <TextView
                    android:id="@+id/textView21"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="LEARN"
                    android:textAllCaps="true"
                    android:textColor="@color/green_500"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/image_view21" /> 
  
            </androidx.constraintlayout.widget.ConstraintLayout> 
  
        </androidx.cardview.widget.CardView> 
  
        <androidx.cardview.widget.CardView
            android:id="@+id/interestsCard"
            android:layout_width="128dp"
            android:layout_height="128dp"
            android:layout_margin="8dp"
            android:layout_marginStart="16dp"
            android:clickable="true"
            android:elevation="12dp"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="8dp"> 
  
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"> 
  
                <ImageView
                    android:id="@+id/image_view22"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:src="@drawable/interests"
                    app:layout_constraintBottom_toTopOf="@+id/textView22"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" /> 
  
                <TextView
                    android:id="@+id/textView22"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="INTERESTS"
                    android:textAllCaps="true"
                    android:textColor="@color/green_500"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/image_view22" /> 
  
            </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/linearLayout2"> 
  
        <androidx.cardview.widget.CardView
            android:id="@+id/helpCard"
            android:layout_width="128dp"
            android:layout_height="128dp"
            android:layout_margin="8dp"
            android:layout_marginEnd="16dp"
            android:clickable="true"
            android:elevation="12dp"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="8dp"> 
  
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"> 
  
                <ImageView
                    android:id="@+id/image_view23"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:src="@drawable/help"
                    app:layout_constraintBottom_toTopOf="@+id/textView23"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" /> 
  
                <TextView
                    android:id="@+id/textView23"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="HELP"
                    android:textAllCaps="true"
                    android:textColor="@color/green_500"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/image_view23" /> 
  
            </androidx.constraintlayout.widget.ConstraintLayout> 
  
        </androidx.cardview.widget.CardView> 
  
        <androidx.cardview.widget.CardView
            android:id="@+id/settingsCard"
            android:layout_width="128dp"
            android:layout_height="128dp"
            android:layout_margin="8dp"
            android:layout_marginStart="16dp"
            android:clickable="true"
            android:elevation="12dp"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="8dp"> 
  
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"> 
  
                <ImageView
                    android:id="@+id/image_view"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:src="@drawable/settings"
                    app:layout_constraintBottom_toTopOf="@+id/textView4"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" /> 
  
                <TextView
                    android:id="@+id/textView4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="SETTINGS"
                    android:textAllCaps="true"
                    android:textColor="@color/green_500"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/image_view" /> 
  
            </androidx.constraintlayout.widget.ConstraintLayout> 
  
        </androidx.cardview.widget.CardView> 
  
    </LinearLayout> 
  
</androidx.constraintlayout.widget.ConstraintLayout>

Output UI:

Dashboard UI Design in Android

Step 4: Working with the MainActivity.kt file

Here, for demonstration purposes, all the elements are handled using the OnClickListener method, which displays a toast message upon clicking them.
However, in actual real-world implementation for each of the card views the separate activities are needed to be created and implement the functionalities.
Refer to the following code and its output for better understanding.

Kotlin

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) 
  
        // register all the ImageButtons with their appropriate IDs 
        val backB: ImageButton = findViewById(R.id.backB) 
        val logOutB: ImageButton = findViewById(R.id.logOutB) 
        val profileB: ImageButton = findViewById(R.id.profileB) 
  
        // register all the Buttons with their appropriate IDs 
        val todoB: Button = findViewById(R.id.todoB) 
        val editProfileB: Button = findViewById(R.id.editProfileB) 
  
        // register all the card views with their appropriate IDs 
        val contributeCard: CardView = findViewById(R.id.contributeCard) 
        val practiceCard: CardView = findViewById(R.id.practiceCard) 
        val learnCard: CardView = findViewById(R.id.learnCard) 
        val interestsCard: CardView = findViewById(R.id.interestsCard) 
        val helpCard: CardView = findViewById(R.id.helpCard) 
        val settingsCard: CardView = findViewById(R.id.settingsCard) 
  
  
        // handle each of the image buttons with the OnClickListener 
        backB.setOnClickListener { 
            Toast.makeText(this, "Back Button", Toast.LENGTH_SHORT).show() 
        } 
        logOutB.setOnClickListener { 
            Toast.makeText(this, "Logout Button", Toast.LENGTH_SHORT).show() 
        } 
        profileB.setOnClickListener { 
            Toast.makeText(this, "Profile Image", Toast.LENGTH_SHORT).show() 
        } 
  
  
        // handle each of the buttons with the OnClickListener 
        todoB.setOnClickListener { 
            Toast.makeText(this, "TODO LIST", Toast.LENGTH_SHORT).show() 
        } 
        editProfileB.setOnClickListener { 
            Toast.makeText(this, "Editing Profile", Toast.LENGTH_SHORT).show() 
        } 
  
  
        // handle each of the cards with the OnClickListener 
        contributeCard.setOnClickListener { 
            Toast.makeText(this, "Contribute Articles", Toast.LENGTH_SHORT).show() 
        } 
        practiceCard.setOnClickListener { 
            Toast.makeText(this, "Practice Programming", Toast.LENGTH_SHORT).show() 
        } 
        learnCard.setOnClickListener { 
            Toast.makeText(this, "Learn Programming", Toast.LENGTH_SHORT).show() 
        } 
        interestsCard.setOnClickListener { 
            Toast.makeText(this, "Filter your Interests", Toast.LENGTH_SHORT).show() 
        } 
        helpCard.setOnClickListener { 
            Toast.makeText(this, "Anything Help you want?", Toast.LENGTH_SHORT).show() 
        } 
        settingsCard.setOnClickListener { 
            Toast.makeText(this, "Change the settings", Toast.LENGTH_SHORT).show() 
        } 
    } 
}