Modern dashboard design with source code tutorial in android studio

by | Feb 15, 2020 | Android, Android Material Design Tutorials, Android UI/UX Tutorials, Layouts in Android Studio, UI UX | 0 comments

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

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

COURSES

Android firebase app - android app 2022 - firebase android app - bulls rent app - coding with t app - android app
android complete login signup product by taimoor sikander free for any type of android app
Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorial

How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design