In this tutorial we will be creating a custom Modern Dashboard UI design in android studio. This tutorial will also be covering Dashboard design source code and you can easily get the source code down below in the post.

We will be using a Constraint layout as a parent layout to design dashboard in android studio and we will be creating:

How to create a modern dashboard UI design?

For Creating a Modern Dashboard UI design in android studio. We have to simply follow these steps one by one and our design will be ready in minutes.

  1. Open Project in android studio
  2. Change the default action bar to NoActionBar in style file
  3. Add a toolbar at the top with menu icon
  4. Add text and Image(Responsive Image)
  5. Place a Linear Layout (Horizontal) below text and image
  6. Inside Linear layout, add two card views
  7. Duplicate the linear layout 2 times and set their positions

Dashboard UI design in Android Studio with Source Code

<?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="match_parent"
        android:background="#FFFFFF">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="#00008577"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:navigationIcon="@drawable/menu" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="24dp"
            android:text="Traveling"
            android:textSize="30sp"
            app:fontFamily="@font/baloo"
            app:layout_constraintEnd_toStartOf="@+id/imageView"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/toolbar" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:text="Start a new Journey"
            app:layout_constraintEnd_toStartOf="@+id/imageView"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="160dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/textView"
            app:layout_constraintTop_toBottomOf="@+id/toolbar"
            app:srcCompat="@drawable/icons8_cycling_500" />

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

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

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

                    <TextView
                        android:id="@+id/textView3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/bus"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:text="Walking"
                        android:textSize="24sp"
                        app:fontFamily="@font/aclonica" />

                    <ImageView
                        android:id="@+id/bus"
                        android:layout_width="75dp"
                        android:layout_height="75dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        app:srcCompat="@drawable/icons8_walking_500" />
                </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">

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

                    <TextView
                        android:id="@+id/textView4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/imageView3"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:text="Boating"
                        android:textSize="24sp"
                        app:fontFamily="@font/aclonica" />

                    <ImageView
                        android:id="@+id/imageView3"
                        android:layout_width="75dp"
                        android:layout_height="75dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        app:srcCompat="@drawable/icons8_sail_boat_500" />
                </RelativeLayout>
            </androidx.cardview.widget.CardView>
        </LinearLayout>

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

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

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

                    <TextView
                        android:id="@+id/textView6"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/bus1"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:text="Bus"
                        android:textSize="24sp"
                        app:fontFamily="@font/aclonica" />

                    <ImageView
                        android:id="@+id/bus1"
                        android:layout_width="75dp"
                        android:layout_height="75dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        app:srcCompat="@drawable/icons8_bus_500" />
                </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">

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

                    <TextView
                        android:id="@+id/textView7"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/train"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:text="Train"
                        android:textSize="24sp"
                        app:fontFamily="@font/aclonica" />

                    <ImageView
                        android:id="@+id/train"
                        android:layout_width="75dp"
                        android:layout_height="75dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        app:srcCompat="@drawable/icons8_train_500" />
                </RelativeLayout>
            </androidx.cardview.widget.CardView>
        </LinearLayout>

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

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

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

                    <TextView
                        android:id="@+id/textView8"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/cycle"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:text="Bus"
                        android:textSize="24sp"
                        app:fontFamily="@font/aclonica" />

                    <ImageView
                        android:id="@+id/cycle"
                        android:layout_width="75dp"
                        android:layout_height="75dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        app:srcCompat="@drawable/icons8_cycling_500" />
                </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">

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

                    <TextView
                        android:id="@+id/textView9"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/airplane"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:text="Train"
                        android:textSize="24sp"
                        app:fontFamily="@font/aclonica" />

                    <ImageView
                        android:id="@+id/airplane"
                        android:layout_width="75dp"
                        android:layout_height="75dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        app:srcCompat="@drawable/icons8_airplane_take_off_500" />
                </RelativeLayout>
            </androidx.cardview.widget.CardView>
        </LinearLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Get Complete Source code for Bull’s Rent App