Create a Navigation Drawer Material Design in Android Studio tutorial

by | Feb 15, 2020 | Android, Android for Beginners, Android Material Design Tutorials, Android UI/UX Tutorials, Basics, UI UX | 0 comments

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

We will also learn

  1. Create a Navigation Drawer with the Hamburger menu icon.
  2. Design menu header in the navigation bar.
  3. Hide navigation menu item android action bar.

What is 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 travel application in android studio.

So, this tutorial is about making Navigation Drawer and we have made 3 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, simply click this playlist.

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 ViewsButtons, Check Boxes and much more.

let’s get started without wasting time.

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. As you have seen it in title image or video thumbnail.

And if you like it and want to know how to make it just click this link Material Dashboard Design in Android Studio

Now get back to the Navigation Drawer.

 

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

Steps to create a Navigation Drawer Material Design

  1. Create a new android studio project if you have not already created it.
  2. And Design the main activity.
  3. Add Icons you want to use in project.
  4. Create Menu Resource File.
  5. Make menu header layout
  6. Design the MainActivity

Step #1: Create a new project

For the creation of a new android studio project, click on Start a new Android Studio project as shown in the picture.

Or if you have already created a project, you have to open it.

After creating a project you have to select an activity. So we suggest you to select an empty activity.

Name your activity in the Name field. And select the language Java in the Language field.

Then click on the finish button.

Step #2: Add icons to the android project

There are two ways to use icons in your android studio project. 

1. Upload icons to your project.

To upload an icon in your project copy your downloaded icon and right-click on drawable and paste your icon. “app>res>drawable”

2. Use default icons of the android studio.

Go to app>res>drawable

right-click on drawable select New>VectorAsset.

After that, a form will open, from where you can select the icon and change the color or size of that icon.

Therefore choose icon, next change the name and select color you want to use then select “Next”.

Then select Finish

Step #3: Create menu Resource file for Navigation drawer

In the first place, make a folder/directory in which we can put menu resource file.

So for that, make a new folder by right-clicking on res->new->Android resource directory.

In the meantime choose resource type to “menu”. if you want to change directory name change it but in this case, we will leave as it is.

Then select “OK”. As shown in the picture.

Subsequently, a new resource folder/directory has been added in your res directory named as “menu”.

Right-click on menu->new and select “Menu resource file”.

Name the file name as main_menu.

Make sure the “source set” is main.

then click on the ok button.

Design Menu Resource File

In the first place, open menu resource file “main_menu.xml”

In the meantime, the design file will open. Now, click on the text tab at the bottom with the design tab.

To make the menu in groups needs group tag is used.

Therefore if we want to make a menu of more than one category then we will have to make different groups.

In addition to it, the question arises here is how to use a group tag.

So the <group> tag is used the same as other tags. Such as in the code below.

<group android:checkableBehavior="single">
</group>

As you have seen that in the group tag we write checkable behavior = single.

Thus this means that one menu item of the group is selected at one time.

In between the group tag, we have to place item tag with id, icon, and title of the item.

Code given below

<group>   
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/home_icon"
            android:title="Home" />

        <item
            android:id="@+id/nav_cycle"
            android:icon="@drawable/icons8_cycling_500"
            android:title="Cycling" />

        <item
            android:id="@+id/nav_bus"
            android:icon="@drawable/icons8_bus_500"
            android:title="Bus" />

        <item
            android:id="@+id/nav_plane"
            android:icon="@drawable/icons8_airplane_take_off_500"
            android:title="Plane" />
    </group>

    <item android:title="Profile">

        <menu>

            <group android:checkableBehavior="single">

                <item
                    android:id="@+id/nav_login"
                    android:icon="@drawable/login_icon"
                    android:title="Login" />

                <item
                    android:id="@+id/nav_profile"
                    android:icon="@drawable/profile_icon"
                    android:title="Profile" />

                <item
                    android:id="@+id/nav_logout"
                    android:icon="@drawable/logout_icon"
                    android:title="Logout" />
            </group>
        </menu>
    </item>

    <item android:title="Communicate">

        <menu>

            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/share_icon"
                android:title="Share" />

            <item
                android:id="@+id/nav_rate"
                android:icon="@drawable/rate_icon"
                android:title="Rate Us" />
        </menu>
    </item>
</menu>

Step #4: Create a menu header file of Navigation drawer

After making a menu of navigation drawer now create the header of that menu.

Hence make a new layout resource file for the header in the navigation drawer menu.

So, Right-click on res->layout->new and select “Layout resource file”.

Likewise, give the name the file as “header”.

Accordingly, make sure that the “source set” is main.

finally, click on the ok button.

Design menu header file

In the meantime Open layout resource file named as header.xml.

The layout used in the header file of the navigation drawer is a Linear Layout.

In this case, we are making the header of a menu so make the layout_height of 200dp and orientation is vertical.

Give the background image and assign the gravity to “bottom”..

After that add the Image view tag and Text view tag as shown in the code

    <ImageView
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:src="@drawable/icons8_cycling_500" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Traveling"
        android:textSize="24sp"
        app:fontFamily="@font/baloo" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="www.taimoorsikander.com"
        android:textSize="14sp"
        app:fontFamily="@font/aclonica" />

Step #5: Design the main activity of our application

Design your main activity according to your will but if you want to get my design the simply go to the Dashboard Design tutorial.

However, if you use our designed dashboard then you have to make some changes in it.

As a result, change the parent layout of the main activity of the dashboard with the following code.

<androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity"
    tools:openDrawer="start">

Add a Navigation View in the layout

Now add a navigation view inside the layout of main-activity.

To use that we have to add a dependency.

There are two ways to add a dependency.

Accordingly paste the dependency in build.gradle file.

implementation 'com.google.android.material:material:1.0.0'

2nd way is to GOTO Design section of activity_main.xml

 

  • In the first place goto the Container in Palette
  • Afterward, Search for Navigation View
  • Finally, click on the downloadable icon which is at the right of Navigation View Widget.

After adding the navigation view, go-to text and add the following code.

<com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:layout_gravity="start"
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    app:headerLayout="@layout/header"
    app:menu="@menu/main_menu" />

“app:headerLayout” and “app:menu” are the layouts we have created before. Thus, name them.

Make sure the layout_gravity is start.

Step #6: Add functionality to MainActivity.java file

Later on, add hooks of the components to be used in further code. As we see in the code below.

1- Add Hooks of the components used in the design.

//Variables
DrawerLayout drawerLayout;
        NavigationView navigationView;
        Toolbar toolbar;
        Menu menu;
        TextView textView;

@Override
protected void onCreate(Bundle savedInstanceState){
        super
        }.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /*---------------------Hooks------------------------*/
        drawerLayout=findViewById(R.id.drawer_layout);
        navigationView=findViewById(R.id.nav_view);
        textView=findViewById(R.id.textView);
        toolbar=findViewById(R.id.toolbar);

2- Add a Navigation drawer Code

After that, add the code of navigation drawer to be visible.

navigationView.bringToFront();
        ActionBarDrawerToggle toggle=new
        ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.navigation_drawer_open,R.string.navigation_drawer_close);
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();
        navigationView.setNavigationItemSelectedListener(this);
        navigationView.setCheckedItem(R.id.nav_home);

3-Handle onBackPressed() method

We will implement this method because we want to close the drawer when a back button is pressed on mobile and the drawer is Open.

So, when we push the back button then our navigation drawer will be closed.

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

Implement onNavigationItemSelected() method

This method helps in the functionality or our navigation drawer.

In this function, we tell that which activity will open when the menu in the navigation drawer is selected.

For that, we have to use “intent” and call the activity we want to open on menu selected.

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
    switch (menuItem.getItemId()) {
        case R.id.nav_home: break; case R.id.nav_bus:
            Intent intent = new Intent(MainActivity.this, Bus.class);
            startActivity(intent);
            break;
        case R.id.nav_login: menu.findItem(R.id.nav_logout).setVisible(true);
            menu.findItem(R.id.nav_profile).setVisible(true);
            menu.findItem(R.id.nav_login).setVisible(false);
            break;
        case R.id.nav_logout: menu.findItem(R.id.nav_logout).setVisible(false);
            menu.findItem(R.id.nav_profile).setVisible(false);
            menu.findItem(R.id.nav_login).setVisible(true);
            break;
        case R.id.nav_share: Toast.makeText(this, "Share", Toast.LENGTH_SHORT).show(); break;
    }
    drawerLayout.closeDrawer(GravityCompat.START); return true;
}

Show or hide Items in navigation drawer

menu = navigationView.getMenu();
menu.findItem(R.id.nav_logout).setVisible(false);
menu.findItem(R.id.nav_profile).setVisible(false);

Get Complete Source code for Bull’s Rent App

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!

COURSES

Android firebase app - android app 2022 - firebase android app - bulls rent app - coding with t app - android app
android complete login signup product by taimoor sikander free for any type of android app
Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorial

How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design