Modern Material Dashboard in 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
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