Modern Dashboard UI Design in Android Studio – City Guide App – Part 4

by | Mar 15, 2020 | Android for Beginners, Android Material Design Tutorials, Android UI/UX Tutorials, Basics, City Guide App, UI UX | 0 comments

Dashboard Design in android studio - City guide app - get a way app - Taimoor Sikander - Coding with Tea

In this tutorial, we will learn how to create a modern dashboard design in android studio. The dashboard is the main screen of our application that describes what is the functionality of an app. Hence we will create three different designs of recyclerview and cardview in our modern dashboard UI design in android studio of the City Guide app.

 

To get the complete project, click on the following button.

Get Complete Code

As you all know we are creating a city guide application that tracks all the locations of our city.

So for that, we have learned how to download and install an android studio, after that we will learn how to professionally set up android studio.

Furthermore, we have created a Splash Screen and then onboarding or walkthrough slider that appears for only one time.

Lastly, we are creating a Modern Dashboard UI design in android studio that has a menu icon and adding new location button on top.

After that, we have a search bar that will animate to the search page which we will create in the next tutorial.

As told we will use 3 designs of recyclerview and cardview for better understanding.

So lets get started with the code.

Subscribe us on Youtube

Steps to Create Modern Dashboard UI Design 

To create a modern dashboard UI design in the android studio we have to follow these points:

 

  1. Create an empty activity for Dashboard Design
  2. Remove status bar
  3. Design the XML files
  4. Create Adapter Classes of RecyclerViews
  5. Assign values to the card views

Step#1- Create an empty activity

If you are following our tutorials then go to app->java->first folder->user

Then right-click on the user, click on New and then click on Empty Activity.

As we are creating a dashboard thus give the name of the activity as UserDashboard.

In the meantime copy and paste all the images to your drawable folder, and gives color and string to your application.

If you don’t know how to do that just check our tutorial of how to setup an android studio.

Step#2- How to remove status bar

After creating a new activity open java file of name UserDashboard. 

Write the below code, before setContentView and after super.onCreate.

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

Step#3- Design the xml file

So then after removal of the status bar, design the XML file of userdashboard named “activity_user_dashboard”.

 

1- Design the top bar

In the first place, change the parent layout to a Linear Layout.

After that give the orientation of the linear layout as vertical and assign the background color or image to it as you want.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/home_background"
    android:orientation="vertical">
</LinearLayout>

Now create a relative layout in between linear layout with the width of match parent and height of wrap content.

<RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:padding="20dp">
</RelativeLayout>

In that relative layout add hamburger icon to right and “+” icon on the right side, to add a new location. To add these we have to create two imageView components as shown in the code.

<ImageView
    android:layout_centerVertical="true"
    android:layout_height="40dp"
    android:layout_width="40dp"
    android:src="@drawable/menu_icon" />

<ImageView
    android:background="@color/banner_background"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_height="40dp"
    android:layout_width="40dp"
    android:padding="5dp"
    android:src="@drawable/add_missing_place_icon" />

Thus the first section is ready. Now move to the second section having the search bar and Logo.

So first of all, create a Scroll bar for the page and after that create a linear layout between it.

Thus all the remaining code is created in that linear layout.

<ScrollView
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:orientation="vertical">
    </LinearLayout>
</ScrollView>

Therefore, create a text view for logo. After that, we have to design a search bar.

Simply copy and paste the following code inside the linear layout we have created before.

<RelativeLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent">

    <TextView
        android:fontFamily="@font/brandon_grotesque_black"
        android:id="@+id/app_name"
        android:layout_centerHorizontal="true"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="@string/logo_name"
        android:textColor="@color/colorAccent"
        android:textSize="28sp" />

    <RelativeLayout
        android:background="@color/white"
        android:elevation="8dp"
        android:layout_below="@id/app_name"
        android:layout_height="40dp"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_marginTop="20dp"
        android:layout_width="match_parent">

        <TextView
            android:layout_centerVertical="true"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_width="wrap_content"
            android:text="@string/search_text" />

        <ImageView
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_height="30dp"
            android:layout_marginRight="15dp"
            android:layout_width="30dp"
            android:src="@drawable/search_icon" />

    </RelativeLayout>

</RelativeLayout>
2- Design the General Category Section

Designing the general category section needs card view design. So to make a card we have to create a new layout file in drawable named “card1”.

 

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

Then create a linear layout with the horizontal orientation and the gravity will be center.

<LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:orientation="horizontal">
</LinearLayout>

Now add another linear layout for a category card with orientation vertical.

<LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
 </LinearLayout>

After that create a category using image view and text view and add that category to linear layout having a vertical orientation.

<RelativeLayout
    android:background="@drawable/card_1"
    android:elevation="8dp"
    android:layout_height="60dp"
    android:layout_margin="10dp"
    android:layout_width="60dp">

    <ImageView
        android:layout_centerInParent="true"
        android:layout_height="30dp"
        android:layout_width="30dp"
        android:src="@drawable/restaurant_icon" />

</RelativeLayout>

<TextView
    android:gravity="center_horizontal"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:text="@string/restaurants"
    android:textAlignment="center" />

Now create the three other categories the same as the first category by just copy and paste linear layout having a vertical orientation.
3- Create Recyclerview and Cardview of All-Featured-Location’s

Now we have to create a recycler view for our featured locations.

Before making the recycler view we have to create a card view.

 

a- Create an XML File for cardview

Thus to create a card view we have to make a new layout with a name of “featured_card_design.xml”

Now go the Split view of that XML file to design the card.

Change the first tag to CardView as shown in the following code.

<?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:layout_width="160dp"
    android:layout_height="300dp"
    android:layout_margin="10dp"
    app:cardCornerRadius="2dp"
    app:cardElevation="8dp">
</androidx.cardview.widget.CardView>

In between the card, view add the linear layout of vertical orientation.

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="15dp">
</LinearLayout>

As we have to create a card that has an image, text, and rating bar.

So for that add imageView, textView, and rating bar in between the linear layout we have already created.

For image:

<ImageView
            android:id="@+id/featured_image"
            android:layout_width="match_parent"
            android:layout_height="140dp"
            android:scaleType="centerCrop"
            android:src="@drawable/mcdonald_img" />

for title

<TextView
            android:id="@+id/featured_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/baloo"
            android:lineHeight="23dp"
            android:text="McDonald's"
            android:textColor="@color/colorAccent"
            android:textSize="20sp" />

for rating bar

<RatingBar
            style="@style/Widget.AppCompat.RatingBar.Small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rating="3.5" />

for Description

<TextView
            android:id="@+id/featured_desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="asbkd asudhlasn saudnas jasdjasl hisajdl asjdlnas" />

 

b- Create the recycler view in activity_user_dashboard.xml

Now our card view is ready and to add that card view we have to create recycler view.

So to create that recycler view we have to go to again in activity_user_dashboard.

After the linear layout of categories, we have to use the relative layout first with a width of match parent and height of wrap content. Also, give the background-color to it.

<RelativeLayout    android:background="@color/lightWhite"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="20dp"
    android:layout_width="match_parent">
</RelativeLayout>

 

In between the relative layout, we have to create a linear Layout for the banner. So create it, by using the following code:

<LinearLayout
    android:background="@color/banner_background_light"
    android:id="@+id/featured_background"
    android:layout_height="300dp"
    android:layout_marginBottom="10dp"
    android:layout_marginEnd="10dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="10dp"
    android:layout_width="170dp"
    android:orientation="vertical">

    <TextView
        android:fontFamily="@font/brandon_grotesque_black"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="50dp"
        android:layout_width="wrap_content"
        android:lineHeight="24sp"
        android:text="@string/featured_locations"
        android:textAllCaps="true"
        android:textColor="@color/colorAccent"
        android:textSize="25sp" />

    <TextView
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:text="@string/featured_locations_description" />

</LinearLayout>

Lastly, we have to add the recycler view after banner.

<androidx.recyclerview.widget.RecyclerView
    android:background="@color/home_background"
    android:id="@+id/featured_recycler"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/featured_background"
    android:layout_width="match_parent" />

Finally, we have created our recycler view for all featured locations. So then we have to add the card view using code in java file.

But first, we have to make other two recycler views the same as above.

4- Create a RecyclerView and CardView of Most Viewed

 

As we have created the cardview and recyclerview of all-featured-locations now we will create a recycler view for most viewed.

To create a recycler view of the new design for most-viewed we have to only change the design of card view.

Thus we have to create a new layout named most_viewed_card_design.xml

Firstly change the main layout to cardview.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="2dp"
    app:cardElevation="8dp"
    android:layout_margin="10dp">
</androidx.cardview.widget.CardView>

Then in between that card view tag, create a relative layout of width 300dp and height of 150dp.

<RelativeLayout
        android:layout_width="300dp"
        android:layout_height="150dp"
        android:padding="10dp">
    </RelativeLayout>

After that create the text view, rating bar and image view as shown in the code.

<ImageView
            android:id="@+id/mv_image"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:src="@drawable/mcdonald_img"
            android:scaleType="centerCrop"/>

        <TextView
            android:id="@+id/mv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Amjad General Store"
            android:layout_toRightOf="@id/mv_image"
            android:layout_marginLeft="10dp"
            android:textSize="20sp"
            android:textColor="@color/colorAccent"
            android:lineHeight="20dp"
            android:fontFamily="@font/baloo"
            android:layout_marginStart="10dp"
            android:layout_toEndOf="@id/mv_image" />

        <RatingBar
            android:id="@+id/mv_rating"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/Widget.AppCompat.RatingBar.Small"
            android:layout_below="@id/mv_title"
            android:layout_toRightOf="@id/mv_image"
            android:layout_marginLeft="10dp"
            android:rating="4"/>

        <TextView
            android:id="@+id/mv_desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="asbkd asudhlasn saudnas jasdjasl hisajdl asjdlnas"
            android:layout_below="@id/mv_rating"
            android:layout_toRightOf="@id/mv_image"
            android:padding="10dp"/>

Now our card is ready. Go back again to activity_user_dashboard.xml and add the following code below the featured recyclerview.

<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:orientation="vertical"
                android:paddingLeft="20dp"
                android:paddingTop="20dp"
                android:paddingBottom="20dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:fontFamily="@font/brandon_grotesque_black"
                        android:text="@string/most_viewed_locations"
                        android:textAllCaps="true"
                        android:textColor="@color/colorAccent"
                        android:textSize="20sp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="15dp"
                        android:text="@string/view_all" />


                </RelativeLayout>

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/most_viewed_recycler"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>
5- Create a RecyclerView and CardView of All Categories

 

As we have created the cardview and recyclerview of Most Viewed, now we will create a recycler view for all Categories.

Similarly, to create a recycler view of the new design for Categories we have to only change the design of the card view.

Thus we have to create a new layout named categories_card_design.xml and open that file.

Firstly change the main layout to card view.

<?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:layout_width="250dp"
    android:layout_height="150dp"
    android:layout_margin="12sp"
    app:cardCornerRadius="0dp"
    app:cardElevation="8dp">
</androidx.cardview.widget.CardView>

Then in between that card view tag, create a relative layout of width and height of matchparent.

<RelativeLayout
        android:id="@+id/background_gradient"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/card_2"
        android:padding="15dp">
    </RelativeLayout>

After that create the text view, and image view as shown in the code.

<TextView
            android:id="@+id/categories_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/baloo"
            android:text="Restaurant"
            android:textAllCaps="true"
            android:textColor="@color/colorAccent"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/categories_image"
            android:layout_width="110dp"
            android:layout_height="110dp"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:src="@drawable/restaurant_image" />

Now our card is ready. Go back again to activity_user_dashboard.xml and add the following code below the Most VIewed recyclerview.

<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:orientation="vertical"
                android:padding="20dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:fontFamily="@font/brandon_grotesque_black"
                        android:text="@string/categories"
                        android:textAllCaps="true"
                        android:textColor="@color/colorAccent"
                        android:textSize="20sp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:text="@string/view_all" />


                </RelativeLayout>

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/categories_recycler"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>

Dashboard UI Design Complete Project with Source code

Get Complete Code

Step#4- Create Adapter Classes

Now create three adapter classes to assign the image, title, description, and ratings after getting from the firebase.

As we will do firebase setup in our next tutorials, therefore, we will give dummy values to our card views.

Here in the first place, we have to create a java class namely FeaturedAdapter.

FeaturedAdapter class extends

RecyclerView.Adapter<FeaturedAdapter.FeaturedViewHolder>

 

Here we have to create ArrayList and make constructor where we have to assign the array.

ArrayList<FeaturedHelperClass> featuredLocations;

    public FeaturedAdapter(ArrayList<FeaturedHelperClass> featuredLocations) {
        this.featuredLocations = featuredLocations;
    }

Now create a static class in between FeaturedAdapter class.

public static class FeaturedViewHolder extends RecyclerView.ViewHolder {

        ImageView image;
        TextView title, desc;

        public FeaturedViewHolder(@NonNull View itemView) {
            super(itemView);

            //Hooks
            image = itemView.findViewById(R.id.featured_image);
            title = itemView.findViewById(R.id.featured_title);
            desc = itemView.findViewById(R.id.featured_desc);

        }
    }

Subsequently hover on the error and click on the red bulb icon and then click implement methods.

After that add the code as shown below.

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

    @Override
    public void onBindViewHolder(@NonNull FeaturedViewHolder holder, int position) {

        FeaturedHelperClass featuredHelperClass = featuredLocations.get(position);

        holder.image.setImageResource(featuredHelperClass.getImage());
        holder.title.setText(featuredHelperClass.getTitle());
        holder.desc.setText(featuredHelperClass.getDescription());

    }

    @Override
    public int getItemCount() {
        return featuredLocations.size();
    }

Now create two more adapter classes with names as CategoriesAdapter and MostViewedAdpater. 

And make changes similar to FeaturedAdapter.


import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

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

import com.taimoorsikander.userdashboarddesign.HomeAdaptersHelperClasses.MostViewedHelperClass;
import com.taimoorsikander.userdashboarddesign.R;

import java.util.ArrayList;

public class MostViewedAdpater extends RecyclerView.Adapter<MostViewedAdpater.MostViewedViewHolder> {

    ArrayList<MostViewedHelperClass> mostViewedLocations;

    public MostViewedAdpater(ArrayList<MostViewedHelperClass> mostViewedLocations) {
        this.mostViewedLocations = mostViewedLocations;
    }

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

    @Override
    public void onBindViewHolder(@NonNull MostViewedViewHolder holder, int position) {
        MostViewedHelperClass helperClass = mostViewedLocations.get(position);

        holder.imageView.setImageResource(helperClass.getImageView());
        holder.textView.setText(helperClass.getTextView());
    }

    @Override
    public int getItemCount() {
        return mostViewedLocations.size();
    }

    public static class MostViewedViewHolder extends RecyclerView.ViewHolder {

        ImageView imageView;
        TextView textView;

        public MostViewedViewHolder(@NonNull View itemView) {
            super(itemView);

            imageView = itemView.findViewById(R.id.mv_image);
            textView = itemView.findViewById(R.id.mv_title);
        }
    }
}

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;

import com.taimoorsikander.userdashboarddesign.HomeAdaptersHelperClasses.CategoriesHelperClass;
import com.taimoorsikander.userdashboarddesign.R;

import java.util.ArrayList;

public class CategoriesAdapter extends RecyclerView.Adapter<CategoriesAdapter.AdapterAllCategoriesViewHolder> {

    ArrayList<CategoriesHelperClass> mostViewedLocations;

    public CategoriesAdapter(ArrayList<CategoriesHelperClass> mostViewedLocations) {
        this.mostViewedLocations = mostViewedLocations;
    }

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

    @Override
    public void onBindViewHolder(@NonNull AdapterAllCategoriesViewHolder holder, int position) {

        CategoriesHelperClass helperClass = mostViewedLocations.get(position);
        holder.imageView.setImageResource(helperClass.getImage());
        holder.textView.setText(helperClass.getTitile());
        holder.relativeLayout.setBackground(helperClass.getGradient());
    }

    @Override
    public int getItemCount() {
        return mostViewedLocations.size();
    }

    public static class AdapterAllCategoriesViewHolder extends RecyclerView.ViewHolder {

        RelativeLayout relativeLayout;
        ImageView imageView;
        TextView textView;

        public AdapterAllCategoriesViewHolder(@NonNull View itemView) {
            super(itemView);

            relativeLayout = itemView.findViewById(R.id.background_gradient);
            imageView = itemView.findViewById(R.id.categories_image);
            textView = itemView.findViewById(R.id.categories_title);
        }
    }
}

Step#5- Assign Values to the card views

Go to java file of UserDashboard.

Copy and paste the following code.

package com.taimoorsikander.userdashboarddesign;

import android.graphics.drawable.GradientDrawable;
import android.os.Bundle;
import android.view.WindowManager;

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

import com.taimoorsikander.userdashboarddesign.HomeAdapters.CategoriesAdapter;
import com.taimoorsikander.userdashboarddesign.HomeAdapters.FeaturedAdapter;
import com.taimoorsikander.userdashboarddesign.HomeAdapters.MostViewedAdpater;
import com.taimoorsikander.userdashboarddesign.HomeAdaptersHelperClasses.CategoriesHelperClass;
import com.taimoorsikander.userdashboarddesign.HomeAdaptersHelperClasses.FeaturedHelperClass;
import com.taimoorsikander.userdashboarddesign.HomeAdaptersHelperClasses.MostViewedHelperClass;

import java.util.ArrayList;

public class UserDashboard extends AppCompatActivity {

    RecyclerView featuredRecycler, mostViewedRecycler, categoriesRecycler;
    RecyclerView.Adapter adapter;
    private GradientDrawable gradient1, gradient2, gradient3, gradient4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_user_dashboard);

        //Hooks
        featuredRecycler = findViewById(R.id.featured_recycler);
        mostViewedRecycler = findViewById(R.id.most_viewed_recycler);
        categoriesRecycler = findViewById(R.id.categories_recycler);

        //Functions will be executed automatically when this activity will be created
        featuredRecycler();
        mostViewedRecycler();
        categoriesRecycler();

    }

    private void categoriesRecycler() {

        //All Gradients
        gradient2 = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, new int[]{0xffd4cbe5, 0xffd4cbe5});
        gradient1 = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, new int[]{0xff7adccf, 0xff7adccf});
        gradient3 = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, new int[]{0xfff7c59f, 0xFFf7c59f});
        gradient4 = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, new int[]{0xffb8d7f5, 0xffb8d7f5});


        ArrayList<CategoriesHelperClass> categoriesHelperClasses = new ArrayList<>();
        categoriesHelperClasses.add(new CategoriesHelperClass(gradient1, R.drawable.school_image, "Education"));
        categoriesHelperClasses.add(new CategoriesHelperClass(gradient2, R.drawable.hospital_image, "HOSPITAL"));
        categoriesHelperClasses.add(new CategoriesHelperClass(gradient3, R.drawable.restaurant_image, "Restaurant"));
        categoriesHelperClasses.add(new CategoriesHelperClass(gradient4, R.drawable.shopping_image, "Shopping"));
        categoriesHelperClasses.add(new CategoriesHelperClass(gradient1, R.drawable.transport_image, "Transport"));


        categoriesRecycler.setHasFixedSize(true);
        adapter = new CategoriesAdapter(categoriesHelperClasses);
        categoriesRecycler.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
        categoriesRecycler.setAdapter(adapter);

    }

    private void mostViewedRecycler() {

        mostViewedRecycler.setHasFixedSize(true);
        mostViewedRecycler.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));

        ArrayList<MostViewedHelperClass> mostViewedLocations = new ArrayList<>();
        mostViewedLocations.add(new MostViewedHelperClass(R.drawable.mcdonald_img, "McDonald's"));
        mostViewedLocations.add(new MostViewedHelperClass(R.drawable.city_2, "Edenrobe"));
        mostViewedLocations.add(new MostViewedHelperClass(R.drawable.city_1, "J."));
        mostViewedLocations.add(new MostViewedHelperClass(R.drawable.mcdonald_img, "Walmart"));

        adapter = new MostViewedAdpater(mostViewedLocations);
        mostViewedRecycler.setAdapter(adapter);

    }

    private void featuredRecycler() {

        featuredRecycler.setHasFixedSize(true);
        featuredRecycler.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));

        ArrayList<FeaturedHelperClass> featuredLocations = new ArrayList<>();

        featuredLocations.add(new FeaturedHelperClass(R.drawable.mcdonald_img, "Mcdonald's", "asbkd asudhlasn saudnas jasdjasl hisajdl asjdlnas"));
        featuredLocations.add(new FeaturedHelperClass(R.drawable.city_1, "Edenrobe", "asbkd asudhlasn saudnas jasdjasl hisajdl asjdlnas"));
        featuredLocations.add(new FeaturedHelperClass(R.drawable.city_2, "Walmart", "asbkd asudhlasn saudnas jasdjasl hisajdl asjdlnas"));

        adapter = new FeaturedAdapter(featuredLocations);
        featuredRecycler.setAdapter(adapter);


    }
}

Dashboard UI Design Complete Project with Source code

Get Complete Code

To learn in detail just follow our Youtube tutorial..

 

Android Related Videos

Related Articles that you might want to check out.

Our Projects Make Us Proud

Submit a Comment

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