Android Knowledge

Modern Material Dashboard in Android Studio

dashboard android studio

Table of Contents

Modern Dashboard XML Design

We have created a modern material dashboard in android studio using XML design. In the below UI, there is 6 card view inside a linear layout in which one image view and one text view are present.

We have implemented on click listener only on one card view to show you as an example, further you can implement the on-click listener on another card view as well.

Step-by-Step Implementation

Step 1: Open Android Studio, Create New Project, Choose Empty Activity, and Name the Project.

Step 2: colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="lavender">#8692f7</color>
</resources>

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ModernDashboard" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/lavender</item>
        <item name="colorPrimaryVariant">@color/lavender</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/constraintLayout"
        android:layout_marginTop="20dp">

        <TextView
            android:layout_width="0dp"
            android:layout_height="42dp"
            android:id="@+id/amazonName"
            android:text="Amazon"
            android:textSize="40sp"
            android:textColor="@color/lavender"
            android:layout_marginStart="18dp"
            android:layout_marginTop="40dp"
            android:fontFamily="@font/poppins_semibold"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/amazonImage"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/amazonDesc"
            android:text="Shop from A to Z"
            android:textSize="14sp"
            android:layout_marginStart="18dp"
            android:textColor="@color/lavender"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/amazonName"
            app:layout_constraintEnd_toStartOf="@+id/amazonImage"/>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="160dp"
            android:id="@+id/amazonImage"
            android:src="@drawable/amazon"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"
            app:layout_constraintStart_toEndOf="@id/amazonName"/>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="175dp"
            android:id="@+id/row1"
            android:orientation="horizontal"
            android:layout_marginTop="10dp"
            android:padding="10dp"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/amazonImage">

            <androidx.cardview.widget.CardView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:id="@+id/clothingCard"
                android:layout_margin="10dp"
                android:layout_weight="1"
                app:cardElevation="20dp"
                app:cardCornerRadius="20dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/clothingName"
                        android:text="Clothing"
                        android:textSize="20sp"
                        android:textColor="@color/lavender"
                        android:fontFamily="@font/poppins_semibold"
                        android:layout_marginTop="10dp"
                        android:layout_centerHorizontal="true"
                        android:layout_below="@+id/clothingImage"/>

                    <ImageView
                        android:layout_width="70dp"
                        android:layout_height="70dp"
                        android:id="@+id/clothingImage"
                        android:src="@drawable/clothing"
                        android:layout_marginTop="15dp"
                        android:layout_centerHorizontal="true"/>

                </RelativeLayout>
            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:layout_weight="1"
                app:cardElevation="20dp"
                app:cardCornerRadius="20dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/elecName"
                        android:text="Electronics"
                        android:textSize="20sp"
                        android:textColor="@color/lavender"
                        android:fontFamily="@font/poppins_semibold"
                        android:layout_marginTop="10dp"
                        android:layout_centerHorizontal="true"
                        android:layout_below="@+id/elecImage"/>

                    <ImageView
                        android:layout_width="70dp"
                        android:layout_height="70dp"
                        android:id="@+id/elecImage"
                        android:src="@drawable/electronics"
                        android:layout_marginTop="15dp"
                        android:layout_centerHorizontal="true"/>

                </RelativeLayout>
            </androidx.cardview.widget.CardView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="175dp"
            android:id="@+id/row2"
            android:orientation="horizontal"
            android:layout_marginTop="10dp"
            android:padding="10dp"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/row1">

            <androidx.cardview.widget.CardView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:layout_weight="1"
                app:cardElevation="20dp"
                app:cardCornerRadius="20dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/homeName"
                        android:text="Home"
                        android:textSize="20sp"
                        android:textColor="@color/lavender"
                        android:fontFamily="@font/poppins_semibold"
                        android:layout_marginTop="10dp"
                        android:layout_centerHorizontal="true"
                        android:layout_below="@+id/homeImage"/>

                    <ImageView
                        android:layout_width="70dp"
                        android:layout_height="70dp"
                        android:id="@+id/homeImage"
                        android:src="@drawable/home"
                        android:layout_marginTop="15dp"
                        android:layout_centerHorizontal="true"/>

                </RelativeLayout>
            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:layout_weight="1"
                app:cardElevation="20dp"
                app:cardCornerRadius="20dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/beautyName"
                        android:text="Beauty"
                        android:textSize="20sp"
                        android:textColor="@color/lavender"
                        android:fontFamily="@font/poppins_semibold"
                        android:layout_marginTop="10dp"
                        android:layout_centerHorizontal="true"
                        android:layout_below="@+id/beautyImage"/>

                    <ImageView
                        android:layout_width="70dp"
                        android:layout_height="70dp"
                        android:id="@+id/beautyImage"
                        android:src="@drawable/beauty"
                        android:layout_marginTop="15dp"
                        android:layout_centerHorizontal="true"/>

                </RelativeLayout>
            </androidx.cardview.widget.CardView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="175dp"
            android:id="@+id/row3"
            android:orientation="horizontal"
            android:layout_marginTop="10dp"
            android:padding="10dp"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/row2">

            <androidx.cardview.widget.CardView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:layout_weight="1"
                app:cardElevation="20dp"
                app:cardCornerRadius="20dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/pharmName"
                        android:text="Pharmacy"
                        android:textSize="20sp"
                        android:textColor="@color/lavender"
                        android:fontFamily="@font/poppins_semibold"
                        android:layout_marginTop="10dp"
                        android:layout_centerHorizontal="true"
                        android:layout_below="@+id/pharmImage"/>

                    <ImageView
                        android:layout_width="70dp"
                        android:layout_height="70dp"
                        android:id="@+id/pharmImage"
                        android:src="@drawable/pharmacy"
                        android:layout_marginTop="15dp"
                        android:layout_centerHorizontal="true"/>

                </RelativeLayout>
            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:layout_weight="1"
                app:cardElevation="20dp"
                app:cardCornerRadius="20dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/grocName"
                        android:text="Groceries"
                        android:textSize="20sp"
                        android:textColor="@color/lavender"
                        android:fontFamily="@font/poppins_semibold"
                        android:layout_marginTop="10dp"
                        android:layout_centerHorizontal="true"
                        android:layout_below="@+id/grocImage"/>

                    <ImageView
                        android:layout_width="70dp"
                        android:layout_height="70dp"
                        android:id="@+id/grocImage"
                        android:src="@drawable/groceries"
                        android:layout_marginTop="15dp"
                        android:layout_centerHorizontal="true"/>

                </RelativeLayout>
            </androidx.cardview.widget.CardView>
        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</ScrollView>

activity_clothing.xml

<?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"
    android:orientation="vertical"
    tools:context=".ClothingActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/clothTitle"
        android:text="Clothing"
        android:textSize="36sp"
        android:layout_marginTop="40dp"
        android:fontFamily="@font/poppins_semibold"
        android:textColor="@color/lavender"
        android:layout_centerHorizontal="true"/>

    <ImageView
        android:layout_width="500dp"
        android:layout_height="500dp"
        android:id="@+id/clothImage"
        android:layout_below="@id/clothTitle"
        android:src="@drawable/clothing"/>

</RelativeLayout>

MainActivity.java

package com.example.moderndashboard;

import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    CardView clothingCard;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        clothingCard = findViewById(R.id.clothingCard);

        clothingCard.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(MainActivity.this, ClothingActivity.class);
                startActivity(intent);
            }
        });
    }
}

Output

dashboard android studio

AK Bonus Points

If you find this article easy and insightful, please share it with your friends.

If you have any queries or errors related to the above context, please feel free to reach out through the comment section.

For a detailed explanation, please check our YouTube Video: Modern Material Dashboard in Android Studio

Check my other articles on Android Knowledge: https://androidknowledge.com