Post
Ask Question

Navigation Drawer In Android

Introduction

The Navigation drawer is the most used feature in android. It is mostly used for performing actions such as changing user profiles, changing settings, etc.  The navigation drawer slides in from the left and contains the navigation destinations for the app.

A toggle button (like a hamburger icon) is there where the user can open the navigation drawer by tapping it. The user can also swipe a finger from the left of it on the home activity to open the navigation drawer. Below is an example of the Navigation drawer.

Steps for implementing Navigation Drawer in Android

Step 1 - Create a new Android Studio project

Step 2 - Adding the dependency to the build.Gradle(:app) file

Navigation Drawer is available in the Material library. So, we need to import the material library, which we can do by adding the following dependency in our app-level build Gradle file.

implementation ‘com.google.android.material:material:1.1.0’

Step 3 - Designing Navigation Drawer

Go to the res folder and create a new Android Resouce Directory. Name the directory menu, select the resource type menu, and click on OK.

Now, go to the menu and create a menu resource file. Name file nav_menu then click on OK.

After creating the nav_menu.xml file. add a title, id, and icon as below:

<?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/login"
            android:title="login"
            />
        <item android:id="@+id/Myaddress"
            android:title="My address"
            />
        <item android:id="@+id/Myorders"
            android:title="My orders"
            />
        <item android:id="@+id/mycart"
            android:title="mycart"
            />
    </group>
    <group android:checkableBehavior="single" >
        <item android:title="other">
            <menu>
                <item android:title="bulk order"/>
                <item android:title="FAQ"/>
                <item android:title="Rate Us"/>
            </menu>
        </item>
    </group>
</menu>

Again, go to the layout and create a layout resource file. Name file nav_header then click on OK.

After creating the nav_header.xml file. add as below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#E40B8311"
    android:orientation="vertical"
    android:paddingBottom="10dp"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="welcome:"
        android:paddingLeft="10dp"
        android:textColor="@color/white"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Guest"
        android:textSize="20dp"
        android:padding="10dp"
        android:textColor="@color/white"
        />
</LinearLayout>

Step 4 - Adding Navigation Drawer to MainActivity

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/mydrawerLayout">
        <com.google.android.material.navigation.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:menu="@menu/nav_menu"
            app:headerLayout="@layout/nav_header"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            >
        </com.google.android.material.navigation.NavigationView>
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#E40B8311"
                    android:padding="10dp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    >
                        <androidx.appcompat.widget.Toolbar
                            android:id="@+id/mytoolbar"
                            android:layout_width="35sp"
                            android:layout_height="match_parent"
                            android:minHeight="?actionBarSize"
                            app:navigationIcon="@drawable/hamburger_icon"
                            />
                </LinearLayout>
        </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.drawerlayout.widget.DrawerLayout>

After adding the following code, our navigation drawer will look like this:

Step 5 - Adding action to the Navigation Drawer

Here we are almost finished with the steps. Lastly, we must connect the navigation to our MainActivity and set the onNavigationItemSelectedListener.

First, we will implement our MainActvity to onNavigationItemSelectedListener and implements its methods like the below:

public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener

Now here we have to define four controls as below:

public DrawerLayout drawerLayout;
public NavigationView navigationView;
Toolbar toolbar;
ActionBarDrawerToggle toggle;

onNavigationItemSelected() and onBackPressed() Methods give functionality to the Navigation Drawer and onNavigationItemSelectedListener works for the clicks on the drawer layout items.

Below is the full Code of MainActivity.java:

package com.ravisahu.online.gopureex;

import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import android.os.Bundle;
import android.view.MenuItem;
import com.google.android.material.navigation.NavigationView;
import com.ravisahu.online.gopureex.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
    ActivityMainBinding binding;
    public DrawerLayout drawerLayout;
    public NavigationView navigationView;
    Toolbar toolbar;
    ActionBarDrawerToggle toggle;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());
        navfunc();
    }
    private void navfunc() {
        //setSupportActionBar(binding.mytoolbar);
        //define
        navigationView = findViewById(R.id.nav_view);
        drawerLayout = findViewById(R.id.mydrawerLayout);
        toolbar = findViewById(R.id.mytoolbar);
        //set
        setSupportActionBar(toolbar);
        //navigation drawer menu
        navigationView.bringToFront();
        toggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.nav_open, R.string.nav_close);
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();
        //        navigationView.setCheckedItem(R.id.navHome);
        navigationView.setNavigationItemSelectedListener(this);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        if (toggle.onOptionsItemSelected(item)) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
    @Override
    public void onBackPressed() {
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
            drawerLayout.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        return true;
    }
}

Output

Conclusion

In this article, we have discussed what Navigation Drawer in Android is and how it is used. All the steps are simple and contain all descriptions needed. Please comment for more details.


Similar Articles