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:
- Custom Toolbar with a custom menu icon
- Some heading and subheading text
- Responsive image for all type of screen sizes using a plugin Batch Drawable Import
- Design card views for each menu icon
- Make our design scroll-able and responsive
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.
- Open Project in android studio
- Change the default action bar to NoActionBar in style file
- Add a toolbar at the top with menu icon
- Add text and Image(Responsive Image)
- Place a Linear Layout (Horizontal) below text and image
- Inside Linear layout, add two card views
- 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
Related Articles that you might want to check out.
- How to create a Splash Screen with Animations
- Create a new project in android studio for beginners?
- How to create an Account on Fiverr and start earning?
- Create a Gig ob Fiverr and start selling specific services.
- How To Start Blogging and Make Money?
Our Projects Make Us Proud
- Building and Construction Company
- Chakwal.CO | Group Of Companies
- Online Buying and Selling Of Properties
My Latest Work
