Modern dashboard design with source code tutorial in android studio

Android, Android Material Design Tutorials, Android UI/UX Tutorials, Layouts in Android Studio, UI UX

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:

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

Let's Connect

Videos are always a better source for in-depth knowledge. So, connect with me at YouTube.

Download Project

Flutter Login App UI Source Code- How to Create a complete Flutter app - Flutter education app - Flutter app UI Design - Flutter Course - Flutter Complete App 2022
Dashboard Source COde - Dashboard design in flutter - flutter dashoard - flutter app design 2022 - Flutter UI - Flutter homepage

Latest Courses

Flutter Login App UI Source Code- How to Create a complete Flutter app - Flutter education app - Flutter app UI Design - Flutter Course - Flutter Complete App 2022
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorials

Flutter Profile page UI Design - Flutter app design 2023 - Profile Screen Flutter UI - Flutter 2023
Flutter Firebase phone authentication - Firebase Phone auth tutorial in flutter - Flutter Firebase phone number authentication 2022
Firebase Authentication in flutter - Flutter firebase authentication 2022 - firebase auth tutorial 2022 - firebase flutter auth
How to setup firebase in flutter 2022 - Flutter firebase setup
Dashboard Source COde - Dashboard design in flutter - flutter dashoard - flutter app design 2022 - Flutter UI - Flutter homepage

Join Our Mailing List

Join our mailing list to receive the latest, Free Courses, Video Tutorials, free codes and updates regarding Tutorials and services. You will also start getting coupons on the related services.

You have Successfully Subscribed!

FLUTTER APP

Learn Flutter App development from scratch. Create LOGIN APP that can be used with any application which requires Login Sign Up functionality.

You can watch it on YouTube or read and get source code from Blog Post.

You have Successfully Subscribed!