Modern Dashboard UI design in Android

In this article, we are going to learn how to create a modern dashboard UI design in Android.

In the below image you can see that what are we going to build.

Hope so you are interested to know how to make the above modern dashboard UI design in Android, so now without wasting much time let’s start.

You can also refer our video tutorial for same.

So let’s start with this tutorial :

Modern Dashboard UI design in Android

1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and provide a name to your project. By default activity name is MainActivity.java.

2. Now open res => values => styles.xml file and paste the below code.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

3. Now to apply custom font, create a new resource directory by navigating res => New => Android Resource Directory and give the directory name as “font” and select “font” from resource type.

4. Now download this folder and copy all drawable resources from the drawable folder and paste all in res => drawable and copy all fonts from the font folder and paste in the font res => font.

5. Now create a new drawable res file by navigating res => drawable => New => Drawable resource file =>searchbar.xml and put the below line of codes to make the search bar.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
    android:color="#2CFFFFFF"
    />
    <corners
        android:radius="50dp"
        />
</shape>

6. Now again create a new drawable res file by navigating res => drawable => New => Drawable resource file =>main_back.xml and put the below line of codes.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
    android:color="#77FFFFFF"
    />
    <corners
        android:topRightRadius="50dp"
        android:topLeftRadius="50dp"
        />
</shape>

7. Now create a new layout res file by navigating res => layout=> New => Layout resource file =>row.xml and put the below line of codes to make the row design for recycleview.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    app:cardCornerRadius="10dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    app:cardElevation="5dp"
    android:layout_marginBottom="10dp"
    android:layout_marginTop="10dp">
    <RelativeLayout
        android:layout_width="match_parent"
        android:id="@+id/card"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/image"
            android:scaleType="centerCrop"
            android:layout_centerInParent="true"
            android:src="@drawable/download"
            />
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:background="#C6E53935"
        android:id="@+id/back"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@drawable/blooddonar"
            android:id="@+id/image1"
            android:padding="20dp"
            android:tint="#fff"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Donate Blood every year"
            android:textSize="16sp"
            android:textColor="#F3FFFFFF"
            android:id="@+id/text"
            android:lineSpacingExtra="-8dp"
            android:fontFamily="@font/baloo2_regular"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="20dp"
            android:paddingRight="10dp"
            android:paddingLeft="10dp"
            />
    </RelativeLayout>
</androidx.cardview.widget.CardView>


8. Now Finally go to your activity_main.xml file to make the main user interface of modern dashboard UI design and paste the below lines of codes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="#25F783AF"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginRight="20dp"
        android:id="@+id/layout1"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="20dp"
        android:background="@drawable/searchbar_back"
        android:layout_height="50dp">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/backarrow"
            android:layout_centerVertical="true"
            android:paddingLeft="20dp"
            android:tint="#807D7D"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/searchicon"
            android:layout_alignParentRight="true"
            android:paddingRight="20dp"
            android:layout_centerVertical="true"
            android:tint="#807D7D"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAlignment="center"
            android:layout_centerVertical="true"
            android:textColor="#3F3E3E"
            android:textSize="16sp"
            android:fontFamily="@font/baloo2_semibold"
            android:text="@string/text1"
            />

    </RelativeLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/layout1"
        android:layout_marginLeft="30dp"
        android:textSize="17sp"
        android:layout_marginTop="20dp"
        android:text="@string/text2"
        android:textColor="#3F3E3E"
        android:id="@+id/text2"
        android:fontFamily="@font/baloo2_semibold"
        />
    <RelativeLayout
        android:layout_width="match_parent"
        app:layout_constraintTop_toBottomOf="@+id/text2"
        android:layout_marginTop="190dp"
        android:background="@drawable/main_back"
        android:id="@+id/layout2"
        android:layout_height="match_parent">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_marginLeft="40dp"
            android:layout_alignParentBottom="true"
            android:layout_marginRight="40dp"
            android:layout_marginBottom="200dp"
            android:layout_height="wrap_content">
        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:id="@+id/recyclerView"
            />
        </RelativeLayout>
        <androidx.cardview.widget.CardView
            android:layout_width="250dp"
            app:cardCornerRadius="25dp"
            app:cardElevation="10dp"
            app:cardBackgroundColor="#E53935"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="30dp"
            android:layout_centerHorizontal="true"
            android:layout_height="50dp">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Donate"
                android:textColor="#F0FFFFFF"
                android:drawableLeft="@drawable/donate"
                android:drawablePadding="10dp"
                android:drawableTint="#E8FFFFFF"
                android:gravity="center"
                android:layout_gravity="center|center_vertical"
                android:fontFamily="@font/baloo2_semibold"
                android:textSize="17sp"
                />

        </androidx.cardview.widget.CardView>
    </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

9. Now open MainActivity.java file and paste the below lines of code to implement RecyclerView.

package com.thecodingshef.beautifuldashboardui;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
RecyclerView recyclerView;
Adapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView=findViewById(R.id.recyclerView);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new GridLayoutManager(MainActivity.this,2));
        adapter=new Adapter(this);
        recyclerView.setAdapter(adapter);

    }
}

10. Now create a adapter class Adapter.java and paste the below lines of code.

package com.thecodingshef.beautifuldashboardui;

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class Adapter extends RecyclerView.Adapter<Adapter.MyAdapter> {
    Context context;

    public Adapter(Context context) {
        this.context = context;
    }

    @NonNull
    @Override
    public MyAdapter onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.row,parent,false);
        return new MyAdapter(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyAdapter holder, int position) {
        if(position==0)
        {
            holder.image.setImageResource(R.drawable.download);
            holder.image1.setImageResource(R.drawable.blooddonate);
            holder.back.setBackgroundColor(Color.parseColor("#E6E53935"));
            holder.text.setText("Donate blood every year");
        }
        if(position==1)
        {
            holder.image.setImageResource(R.drawable.volunteering);
            holder.image1.setImageResource(R.drawable.volunteer);
            holder.back.setBackgroundColor(Color.parseColor("#F236883A"));
            holder.text.setText("Large local volunteers");
        }
        if(position==2){
            holder.image.setImageResource(R.drawable.door);
            holder.image1.setImageResource(R.drawable.doortodoor);
            holder.back.setBackgroundColor(Color.parseColor("#F2AF4576"));
            holder.text.setText("Everyday door to door visit");
        }
        if(position==3)
        {
            holder.image.setImageResource(R.drawable.localevent);
            holder.image1.setImageResource(R.drawable.localeventorg);
            holder.back.setBackgroundColor(Color.parseColor("#F2EEAA45"));
            holder.text.setText("Organize local events");
        }
    }
    @Override
    public int getItemCount() {
        return 4;
    }
   public class MyAdapter extends RecyclerView.ViewHolder {
        ImageView image,image1;
        TextView text;
        RelativeLayout back;
        public MyAdapter(@NonNull View itemView) {
            super(itemView);
            image=itemView.findViewById(R.id.image);
            image1=itemView.findViewById(R.id.image1);
            text=itemView.findViewById(R.id.text);
            back=itemView.findViewById(R.id.back);
        }
    }
}

11. Finally, run the app and you will get the output as shown in the demo image.

If you found this post useful, don’t forget to share this with your friends, and if you have any query feel free to comment it in the comment section.

Thank you 🙂 Keep Learning !

Leave a Comment

Your email address will not be published. Required fields are marked *