Dashboard UI Design in Android - GeeksforGeeks

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.
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:
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.AppCompatActivityimport android.os.Bundleimport android.widget.Buttonimport android.widget.ImageButtonimport android.widget.Toastimport 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()        }    }}
GitHub Link: https://github.com/AdityaShidlyali/Dashboard_design_GFG
android
Technical Scripter 2020
Android
Kotlin
Technical Scripter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Create and Add Data to SQLite Database in Android?
Broadcast Receiver in Android With Example
Resource Raw Folder in Android Studio
Services in Android with Example
Android RecyclerView in Kotlin
Broadcast Receiver in Android With Example
Android UI Layouts
Kotlin Array
Services in Android with Example
Android RecyclerView in Kotlin