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 by Step Implementation
Step 1: Create an empty activity project
To create a new project in the Android Studio, please refer to How to Create/Start a New Project in Android Studio?
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.
dependencies {
...
implementation ("com.google.android.material:material:1.12.0")
}
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 "Dashboard" is created using the following code. Which needs to be put under the drawable folder as file name "custom_rectangle.xml".
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 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:text="Dashboard"
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="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:elevation="12dp"
app:cardCornerRadius="16dp"
app:layout_constraintEnd_toEndOf="parent"
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="James Smith"
android:textColor="@color/colorPrimary"
android:textSize="24sp"
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="Indian Institute of Technology"
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_marginTop="16dp"
android:layout_marginBottom="8dp"
android:text="TODO LIST"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView3" />
<com.google.android.material.button.MaterialButton
android:id="@+id/editProfileB"
style="@style/Widget.Material3.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="EDIT PROFILE"
android:textColor="@color/colorPrimary"
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="32dp"
android:background="?attr/selectableItemBackground"
android:src="@drawable/person"
app:layout_constraintBottom_toBottomOf="@+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/textView2"
app:tint="@color/colorPrimary" />
</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="16dp"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="16dp">
<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/colorPrimary"
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="16dp"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="16dp">
<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/colorPrimary"
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="16dp"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="16dp">
<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/colorPrimary"
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="16dp"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="16dp">
<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/colorPrimary"
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="16dp"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="16dp">
<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/colorPrimary"
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="16dp"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="16dp">
<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/colorPrimary"
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>
<?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>
Design 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.
package org.geeksforgeeks.demo;
import android.os.Bundle;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Register ImageButtons with IDs
ImageButton backB = findViewById(R.id.backB);
ImageButton logOutB = findViewById(R.id.logOutB);
ImageButton profileB = findViewById(R.id.profileB);
// Register Buttons with IDs
Button todoB = findViewById(R.id.todoB);
Button editProfileB = findViewById(R.id.editProfileB);
// Register CardViews with IDs
CardView contributeCard = findViewById(R.id.contributeCard);
CardView practiceCard = findViewById(R.id.practiceCard);
CardView learnCard = findViewById(R.id.learnCard);
CardView interestsCard = findViewById(R.id.interestsCard);
CardView helpCard = findViewById(R.id.helpCard);
CardView settingsCard = findViewById(R.id.settingsCard);
// Handle ImageButton Clicks
backB.setOnClickListener(v ->
Toast.makeText(MainActivity.this, "Back Button", Toast.LENGTH_SHORT).show());
logOutB.setOnClickListener(v ->
Toast.makeText(MainActivity.this, "Logout Button", Toast.LENGTH_SHORT).show());
profileB.setOnClickListener(v ->
Toast.makeText(MainActivity.this, "Profile Image", Toast.LENGTH_SHORT).show());
// Handle Button Clicks
todoB.setOnClickListener(v ->
Toast.makeText(MainActivity.this, "TODO LIST", Toast.LENGTH_SHORT).show());
editProfileB.setOnClickListener(v ->
Toast.makeText(MainActivity.this, "Editing Profile", Toast.LENGTH_SHORT).show());
// Handle CardView Clicks
contributeCard.setOnClickListener(v ->
Toast.makeText(MainActivity.this, "Contribute Articles", Toast.LENGTH_SHORT).show());
practiceCard.setOnClickListener(v ->
Toast.makeText(MainActivity.this, "Practice Programming", Toast.LENGTH_SHORT).show());
learnCard.setOnClickListener(v ->
Toast.makeText(MainActivity.this, "Learn Programming", Toast.LENGTH_SHORT).show());
interestsCard.setOnClickListener(v ->
Toast.makeText(MainActivity.this, "Filter your Interests", Toast.LENGTH_SHORT).show());
helpCard.setOnClickListener(v ->
Toast.makeText(MainActivity.this, "Anything Help you want?", Toast.LENGTH_SHORT).show());
settingsCard.setOnClickListener(v ->
Toast.makeText(MainActivity.this, "Change the settings", Toast.LENGTH_SHORT).show());
}
}
package org.geeksforgeeks.demo
import android.os.Bundle
import android.widget.Button
import android.widget.ImageButton
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
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()
}
}
}