Make a Dashboard app in Android Studio

Make a Dashboard UI in android studio

in this tutorial, I will show you how to make this cool Dashboard UI using XML and Android Studio
it's a very simple tutorial and you will learn by the end of this tutorial many things so let's begin.

installing the required libraries

in this tutorial we will use CardViews and as you know you have to implement the required library inside the Gradle.app file to be able to use it.

for this tutorial, we will use version 28.0.0 I advise you to go to the android developer website and see the latest version by this link: CardView Dependencies library

for the moment you can just copy and paste this line in your Gradle.app file and inside dependencies

dependencies {
    implementation 'com.android.support:cardview-v7:28.0.0'
}

Creating the Main Layout

in your main_layout.xml add this code

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 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"

    android:weightSum="7"

    android:background="#fafafa"

    tools:context=".MainActivity">

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="vertical"

        android:layout_weight="1"

        android:gravity="bottom"

        android:background="@drawable/header_bg"

        android:padding="12dp"

        >

        <TextView

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="Dashboard"

            android:textColor="#fafafa"

            android:textSize="30sp"

            />

        <TextView

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="Welcome,Doctor Code"

            android:textColor="#fafafa"

            android:textSize="25sp"

            />

    </LinearLayout>

    <!--Creating the menu grid button-->

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_weight="6"

        android:orientation="vertical"

        android:weightSum="2"

        android:padding="16dp"

        >

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:weightSum="2"

            android:padding="16dp"

            >

            <androidx.cardview.widget.CardView

                android:layout_width="wrap_content"

                android:layout_height="match_parent"

                android:layout_weight="1"

                app:cardElevation="2dp"

                app:cardCornerRadius="8dp"

                android:layout_margin="12dp"

                android:background="#fff"

                >

                <LinearLayout

                    android:layout_width="match_parent"

                    android:layout_height="match_parent"

                    android:orientation="vertical"

                    android:gravity="center"

                    >

                    <ImageView

                        android:layout_width="match_parent"

                        android:layout_height="wrap_content"

                        android:src="@drawable/ic_attach_money_black_24dp"

                        />

                    <TextView

                        android:layout_width="match_parent"

                        android:layout_height="wrap_content"

                        android:text="Manage your money"

                        android:textAlignment="center"

                        />

                </LinearLayout>

            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView

                android:layout_width="wrap_content"

                android:layout_height="match_parent"

                android:layout_weight="1"

                app:cardElevation="2dp"

                app:cardCornerRadius="8dp"

                android:layout_margin="12dp"

                android:background="#fff"

                >

                <LinearLayout

                    android:layout_width="match_parent"

                    android:layout_height="match_parent"

                    android:orientation="vertical"

                    android:gravity="center"

                    >

                    <ImageView

                        android:layout_width="match_parent"

                        android:layout_height="wrap_content"

                        android:src="@drawable/ic_account_balance_black_24dp"

                        />

                    <TextView

                        android:layout_width="match_parent"

                        android:layout_height="wrap_content"

                        android:text="Contact your bank"

                        android:textAlignment="center"

                        />

                </LinearLayout>

            </androidx.cardview.widget.CardView>

        </LinearLayout>

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:weightSum="2"

            android:padding="16dp"

            >

            <androidx.cardview.widget.CardView

                android:layout_width="wrap_content"

                android:layout_height="match_parent"

                android:layout_weight="1"

                app:cardElevation="2dp"

                app:cardCornerRadius="8dp"

                android:layout_margin="12dp"

                android:background="#fff"

                >

                <LinearLayout

                    android:layout_width="match_parent"

                    android:layout_height="match_parent"

                    android:orientation="vertical"

                    android:gravity="center"

                    >

                    <ImageView

                        android:layout_width="match_parent"

                        android:layout_height="wrap_content"

                        android:src="@drawable/ic_people_black_24dp"

                        />

                    <TextView

                        android:layout_width="match_parent"

                        android:layout_height="wrap_content"

                        android:text="See your Costomers"

                        android:textAlignment="center"

                        />

                </LinearLayout>

            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView

                android:layout_width="wrap_content"

                android:layout_height="match_parent"

                android:layout_weight="1"

                app:cardElevation="2dp"

                app:cardCornerRadius="8dp"

                android:layout_margin="12dp"

                android:background="#fff"

                >

                <LinearLayout

                    android:layout_width="match_parent"

                    android:layout_height="match_parent"

                    android:orientation="vertical"

                    android:gravity="center"

                    >

                    <ImageView

                        android:layout_width="match_parent"

                        android:layout_height="wrap_content"

                        android:src="@drawable/ic_phone_black_24dp"

                        />

                    <TextView

                        android:layout_width="match_parent"

                        android:layout_height="wrap_content"

                        android:text="important contact"

                        android:textAlignment="center"

                        />

                </LinearLayout>

            </androidx.cardview.widget.CardView>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

you also need to add some vector assets to your file, for this choose right-click on your  drawable file and choose to add vector asset.

now create the header background inside the drawable file
right click on drawable > add drawable file > header_bg.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#0295ff"/>

    <corners

        android:bottomRightRadius="16dp"

        android:bottomLeftRadius="16dp"

        />

</shape>

I hope that you have liked this tutorial, as always tell us in the comment what do you want for the next project and we will make it