Navigation Drawer menu in Android Studio – City Guide App – Part 5

by taimoor | Mar 30, 2020 | Android, City Guide App | 0 comments

Navigation Drawer in android studio - City guide app - get a way app - Taimoor Sikander - Coding with Tea

In this tutorial series, we will be creating an Android Navigation Drawer Material design in android studio.

We will also learn

Create a Navigation Drawer with the Hamburger menu icon.
Use of Side Drawer Animation for navigation drawer.
How to use a custom background color.
Custom menu icon.
Design menu header in the navigation bar.
Hide navigation menu item android action bar.

What is Android Navigation Drawer Menu?

Navigation Drawer is the main menu in android applications that slides from the side of the application by clicking on the hamburger icon.

Navigation is how people move from one activity to another in our application.

Therefore navigation plays an important role in increasing the usability of an application. Thus for navigation, menus are used.

However, to navigate in our application we have to make menus and the right place for placing menus in android is Navigation Drawer.

As we all know we are making a city guide application in the android studio.

So, this tutorial is about making Navigation Drawer and we have made 2 videos of it.

Worry?? Don’t be upset we will make the Navigation drawer menu in less than 30 minutes. But for that, you have to stay with us. And if you want to see videos, check our Youtube Video.

As you see, we have mentioned material design in the title of this tutorial. First question first, what is it?

What is Material Design?

Material design is a language that designs components using new and innovative technology.

Why to use Material Design in android?

Designing is an important factor to make an application attractive and good looking.

As we all know everyone wants to design his/her application that leaves an impact on the user.

But as we all know, designing an application takes a lot more time than functionality.

So developers do less designing.

Material design helps us in designing applications very quickly.

It provides Visual design, motion design and interaction design across different platforms.

You can design Text Views, Buttons, Check Boxes and much more.

let’s get started without wasting time.

Subscribe us on Youtube

The dashboard is the main activity of an application and to design that, takes much time than designing other activities.

We had made a Dashboard in the previous tutorial.

And if you want to make it just click this link Material Dashboard Design in Android Studio.

Now get back to the Navigation Drawer.

To create a Android Navigation Drawer using material design in android studio you have to follow some steps.

Steps to create a Navigation Drawer Material Design

Create a Dashboard design.
Design the main menu.
Design the header of the Android navigation drawer.
Write the code for click functions and animations.

Step# 1: Create a Modern Dashboard Design.

As you know we have created a modern dashboard design in android studio for our city guide app.

Hence first create your dashboard design before starting with a navigation drawer.

If you have created our dashboard design then make some following changes in activity_user_dashboard.xml.

But if you don’t want to design a dashboard first and want to start with the navigation drawer then create an activity with the name of UserDashboard.

As we are creating a Navigation Drawer, therefore, change the main layout to DrawerLayout with the width and height of match-parent.

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".User.UserDashboard"
    android:id="@+id/drawer_layout">
</androidx.drawerlayout.widget.DrawerLayout>

Then add the navigation view in the drawer layout, because we are creating a navigation drawer for our android app.

<com.google.android.material.navigation.NavigationView
    android:id="@+id/navigation_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/lightWhite"
    android:theme="@style/navigationTheme"
    android:layout_gravity="start"

After the navigation view, add the Linear Layout in which we have to add all the design our dashboard which we have created before.

After creating this linear layout, just copy and paste the Relative Layout and ScrollView of Dashboard design between this linear layout.

<LinearLayout
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/home_background"
    android:orientation="vertical">
</LinearLayout>

If you are not following our tutorials then simply create a hamburger icon. So that if we click on that icon, the navigation drawer will open.

<RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginLeft="10dp"
      android:layout_marginRight="10dp"
      android:padding="20dp">

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

Step# 2: Design the main menu of Android Navigation Drawer.

To design the main menu, we have to create a new resource file.

Therefore to create a layout file first we will create a new directory in which we will place that file.

Hence, on the left side of the android studio open project.

Then open the app and right-click on it. Goto new->directory and then give the directory name as a menu then click ok. Make sure the name of directory must have small letters.

A new directory is created. Now right-click on that menu directory that we have just created and go to the new->menu resource file.

Here give the name of the resource file as main_menu.

So then open the newly created resource file named main_menu.xml and click on the split view of design on the right side of android studio.

After that design the menu with the use of group tag having checkable behavior single.

<group android:checkableBehavior="single">
    <item
        android:icon="@drawable/menu_dashboard_icon"
        android:id="@+id/nav_home"
        android:title="@string/home" />
    <item
        android:icon="@drawable/menu_search_icon"
        android:id="@+id/nav_search"
        android:title="@string/search" />
    <item
        android:icon="@drawable/menu_categories_icon"
        android:id="@+id/nav_all_categories"
        android:title="@string/all_categories" />
    <item
        android:icon="@drawable/menu_add_missing_place_icon"
        android:id="@+id/nav_add_missing_place"
        android:title="@string/add_missing_place" />
</group>

So then create a drop-down item for the profile in which we will add login, profile, and logout.

<item android:title="Profile">
    <menu>
        <group android:checkableBehavior="single">
            <item
                android:icon="@drawable/menu_login_icon"
                android:id="@+id/nav_login"
                android:title="@string/login" />
            <item
                android:icon="@drawable/menu_profile_icon"
                android:id="@+id/nav_profile"
                android:title="@string/profile" />
            <item
                android:icon="@drawable/menu_logout_icon"
                android:id="@+id/nav_logout"
                android:title="@string/logout" />
        </group>
    </menu>
</item>

Do the same for categories and share.

<item android:title="Categories">
    <menu>
        <group android:checkableBehavior="single">
            <item
                android:icon="@drawable/restaurant_icon"
                android:id="@+id/nav_restaurants"
                android:title="@string/restaurants" />
            <item
                android:icon="@drawable/bank_icon"
                android:id="@+id/nav_bank"
                android:title="@string/banks" />
            <item
                android:icon="@drawable/school_icon"
                android:id="@+id/nav_education"
                android:title="@string/education" />
            <item
                android:icon="@drawable/shop_icon"
                android:id="@+id/nav_shop"
                android:title="@string/shops" />
        </group>
    </menu>
</item>

<item android:title="Share">
    <menu>
        <group android:checkableBehavior="none">
            <item
                android:icon="@drawable/menu_share_icon"
                android:id="@+id/nav_share"
                android:title="@string/share" />
            <item
                android:icon="@drawable/menu_rate_us_icon"
                android:id="@+id/nav_rate_us"
                android:title="@string/rate_us" />
        </group>
    </menu>
</item>

Finally, our menu is ready. Now create a header for our Android Navigation Drawer.

Hence we have created our menu, now go to the activity_user_dashboard.xml and add this menu in the navigation view.

app:menu="@menu/main_menu"

Your code will be look alike.

<com.google.android.material.navigation.NavigationView
    android:background="@color/lightWhite"
    android:id="@+id/navigation_view"
    android:layout_gravity="start"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:theme="@style/navigationTheme"
    app:menu="@menu/main_menu" />

Step# 3: Design the header of Android Navigation Drawer.

To make the header of the Android navigation drawer firstly we have to create a new resource file.

Hence to create that go-to app->res and right-click on layout directory then go to new->Layout resource file.

After that give the name of the file as menu_header.xml.

Now open that resource file. Here we will change the layout to the Relative layout with a width of match parent and height of 200dp.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@color/lightWhite"
    android:paddingLeft="15dp">
</RelativeLayout>

Lastly, add the text and images to it.

<TextView
    android:id="@+id/menu_slogan"
    android:layout_alignParentBottom="true"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:layout_width="wrap_content"
    android:text="@string/slogan_name" />

<TextView
    android:fontFamily="@font/brandon_grotesque_black"
    android:id="@+id/app_name"
    android:layout_above="@id/menu_slogan"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="@string/logo_name"
    android:textColor="@color/black"
    android:textSize="24sp" />

<ImageView
    android:layout_above="@id/app_name"
    android:layout_height="40dp"
    android:layout_width="40dp"
    android:src="@drawable/menu_menulogo_icon" />

<ImageView
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_height="175dp"
    android:layout_width="160dp"
    android:src="@drawable/half_bicycle" />

After the creation of the header, assign the header file to the navigation view in activity_user_dashboard.xml

app:headerLayout="@layout/menu_header"

You code will be look alike.

<com.google.android.material.navigation.NavigationView
    android:background="@color/lightWhite"
    android:id="@+id/navigation_view"
    android:layout_gravity="start"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:theme="@style/navigationTheme"
    app:headerLayout="@layout/menu_header"
    app:menu="@menu/main_menu" />

Step# 3: Write code to run Android Navigation Drawer.

After creating the design of an android navigation drawer open UserDashboard.java.

Add the variables

//Drawer Menu
DrawerLayout drawerLayout;
NavigationView navigationView;
ImageView menuIcon;
LinearLayout contentView;

Now make the hooks.

//Menu Hooks
drawerLayout = findViewById(R.id.drawer_layout);
navigationView = findViewById(R.id.navigation_view);

menuIcon = findViewById(R.id.menu_icon);
contentView = findViewById(R.id.content);

After creating the hooks implement the class with Navigation views item selected. Our code will look alike:

public class UserDashboard extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener

It shows the error because we have to implement methods. So click on red bulb error icon, it says implement methods, click on that. (Or click on ALT+ENTER)

Now click on onNavigationItemSelected and click OK.

Then change its return to true.

public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    return true;
}

To show the navigation drawer make a function and call it after the hooks we have created earlier as shown in the code below:

//Menu Hooks
drawerLayout = findViewById(R.id.drawer_layout);
navigationView = findViewById(R.id.navigation_view);

naviagtionDrawer();

Navigation Drawer function

private void naviagtionDrawer(){

    //Naviagtion Drawer
    navigationView.bringToFront();
    navigationView.setNavigationItemSelectedListener(this);
    navigationView.setCheckedItem(R.id.nav_home);

    menuIcon.setOnClickListener(new View.OnClickListener(){
    @Override
    public void onClick(View view){
        if(drawerLayout.isDrawerVisible(GravityCompat.START))
        drawerLayout.closeDrawer(GravityCompat.START);
        else drawerLayout.openDrawer(GravityCompat.START);
        }
        });

        animateNavigationDrawer();
}

Here you will see we have called animateNavigationDrawer function to animate android navigation drawer. So then create it

private void animateNavigationDrawer() {

        //Add any color or remove it to use the default one!
        //To make it transparent use Color.Transparent in side setScrimColor();
        //drawerLayout.setScrimColor(Color.TRANSPARENT);
        drawerLayout.addDrawerListener(new DrawerLayout.SimpleDrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {

                // Scale the View based on current slide offset
                final float diffScaledOffset = slideOffset * (1 - END_SCALE);
                final float offsetScale = 1 - diffScaledOffset;
                contentView.setScaleX(offsetScale);
                contentView.setScaleY(offsetScale);

                // Translate the View, accounting for the scaled width
                final float xOffset = drawerView.getWidth() * slideOffset;
                final float xOffsetDiff = contentView.getWidth() * diffScaledOffset / 2;
                final float xTranslation = xOffset - xOffsetDiff;
                contentView.setTranslationX(xTranslation);
            }
        });

    }

Add a variable on top to remove the error.

static final float END_SCALE = 0.7f;

Now our android Navigation Drawer is ready. But when the drawer is open and we pressed the back button, our app closes.

So finally we have to write the function to avoid that.

public void onBackPressed() {
    if (drawerLayout.isDrawerVisible(GravityCompat.START)) {
       drawerLayout.closeDrawer(GravityCompat.START);
    } else
       super.onBackPressed();
}

To remove the string name errors copy and paste the code in app->res->values->strings.xml

<!--      Menu Names      -->
    <string name="home">HOME</string>
    <string name="search">SEARCH</string>
    <string name="all_categories">ALL CATEGORIES</string>
    <string name="add_missing_place">ADD MISSING PLACE</string>

    <string name="login">Login</string>
    <string name="profile">Profile</string>
    <string name="logout">Logout</string>

    <string name="share">Share</string>
    <string name="rate_us">Rate Us</string>

To add the colors goto app->res->values->colors.xml and add the code like this.

<color name="anyName">#00000</color>

Get Complete Code

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".User.UserDashboard"
    android:id="@+id/drawer_layout">

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/lightWhite"
        android:theme="@style/navigationTheme"
        android:layout_gravity="start"
        app:headerLayout="@layout/menu_header"
        app:menu="@menu/main_menu"/>

    <LinearLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/home_background"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:padding="20dp">

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

        </RelativeLayout>

    </LinearLayout>

</androidx.drawerlayout.widget.DrawerLayout>

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:title="@string/home"
            android:icon="@drawable/menu_dashboard_icon"/>
        <item
            android:id="@+id/nav_search"
            android:title="@string/search"
            android:icon="@drawable/menu_search_icon"/>
        <item
            android:id="@+id/nav_all_categories"
            android:title="@string/all_categories"
            android:icon="@drawable/menu_categories_icon"/>
        <item
            android:id="@+id/nav_add_missing_place"
            android:title="@string/add_missing_place"
            android:icon="@drawable/menu_add_missing_place_icon"/>
    </group>

    <item android:title="Profile">
        <menu>

            <group android:checkableBehavior="single">
                <item
                    android:id="@+id/nav_login"
                    android:title="@string/login"
                    android:icon="@drawable/menu_login_icon"/>
                <item
                    android:id="@+id/nav_profile"
                    android:title="@string/profile"
                    android:icon="@drawable/menu_profile_icon"/>
                <item
                    android:id="@+id/nav_logout"
                    android:title="@string/logout"
                    android:icon="@drawable/menu_logout_icon"/>
            </group>

        </menu>
    </item>

    <item android:title="Categories">
        <menu>

            <group android:checkableBehavior="single">
                <item
                    android:id="@+id/nav_restaurants"
                    android:title="@string/restaurants"
                    android:icon="@drawable/restaurant_icon"/>
                <item
                    android:id="@+id/nav_bank"
                    android:title="@string/banks"
                    android:icon="@drawable/bank_icon"/>
                <item
                    android:id="@+id/nav_education"
                    android:title="@string/education"
                    android:icon="@drawable/school_icon"/>
                <item
                    android:id="@+id/nav_shop"
                    android:title="@string/shops"
                    android:icon="@drawable/shop_icon"/>
            </group>

        </menu>
    </item>

    <item android:title="Share">
        <menu>

            <group android:checkableBehavior="none">
                <item
                    android:id="@+id/nav_share"
                    android:title="@string/share"
                    android:icon="@drawable/menu_share_icon"/>
                <item
                    android:id="@+id/nav_rate_us"
                    android:title="@string/rate_us"
                    android:icon="@drawable/menu_rate_us_icon"/>
            </group>

        </menu>
    </item>

</menu>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@color/lightWhite"
    android:paddingLeft="15dp">

    <TextView
        android:id="@+id/menu_slogan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/slogan_name"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"/>

    <TextView
        android:id="@+id/app_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/logo_name"
        android:fontFamily="@font/brandon_grotesque_black"
        android:textSize="24sp"
        android:layout_above="@id/menu_slogan"
        android:textColor="@color/black"/>

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/menu_menulogo_icon"
        android:layout_above="@id/app_name"/>

    <ImageView
        android:layout_width="160dp"
        android:layout_height="175dp"
        android:src="@drawable/half_bicycle"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>

import android.graphics.Color;
import android.graphics.drawable.GradientDrawable;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.LinearLayout;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import com.google.android.material.navigation.NavigationView;
import com.taimoorsikander.cityguide.HelperClasses.HomeAdapter.CategoriesAdapter;
import com.taimoorsikander.cityguide.HelperClasses.HomeAdapter.CategoriesHelperClass;
import com.taimoorsikander.cityguide.HelperClasses.HomeAdapter.FeaturedAdpater;
import com.taimoorsikander.cityguide.HelperClasses.HomeAdapter.FeaturedHelperClass;
import com.taimoorsikander.cityguide.HelperClasses.HomeAdapter.MostViewedAdapter;
import com.taimoorsikander.cityguide.HelperClasses.HomeAdapter.MostViewedHelperClass;
import com.taimoorsikander.cityguide.R;

import java.util.ArrayList;

public class UserDashboard extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

    //Variables
    static final float END_SCALE = 0.7f;

    ImageView menuIcon;
    LinearLayout contentView;

    //Drawer Menu
    DrawerLayout drawerLayout;
    NavigationView navigationView;

    @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
        menuIcon = findViewById(R.id.menu_icon);
        contentView = findViewById(R.id.content);

        //Menu Hooks
        drawerLayout = findViewById(R.id.drawer_layout);
        navigationView = findViewById(R.id.navigation_view);

        naviagtionDrawer();

    }

    //Navigation Drawer Functions
    private void naviagtionDrawer() {

        //Naviagtion Drawer
        navigationView.bringToFront();
        navigationView.setNavigationItemSelectedListener(this);
        navigationView.setCheckedItem(R.id.nav_home);

        menuIcon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (drawerLayout.isDrawerVisible(GravityCompat.START))
                    drawerLayout.closeDrawer(GravityCompat.START);
                else drawerLayout.openDrawer(GravityCompat.START);
            }
        });

        animateNavigationDrawer();

    }

    private void animateNavigationDrawer() {

        //Add any color or remove it to use the default one!
        //To make it transparent use Color.Transparent in side setScrimColor();
        //drawerLayout.setScrimColor(Color.TRANSPARENT);
        drawerLayout.addDrawerListener(new DrawerLayout.SimpleDrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {

                // Scale the View based on current slide offset
                final float diffScaledOffset = slideOffset * (1 - END_SCALE);
                final float offsetScale = 1 - diffScaledOffset;
                contentView.setScaleX(offsetScale);
                contentView.setScaleY(offsetScale);

                // Translate the View, accounting for the scaled width
                final float xOffset = drawerView.getWidth() * slideOffset;
                final float xOffsetDiff = contentView.getWidth() * diffScaledOffset / 2;
                final float xTranslation = xOffset - xOffsetDiff;
                contentView.setTranslationX(xTranslation);
            }
        });

    }

    @Override
    public void onBackPressed() {

        if (drawerLayout.isDrawerVisible(GravityCompat.START)) {
            drawerLayout.closeDrawer(GravityCompat.START);
        } else
            super.onBackPressed();
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        return true;
    }

}

Related Articles that you might want to check out.

Our Projects Make Us Proud

My Latest Work

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!

Download City Guide

Download Bulls Rent