How To Make Navigation Drawer In Android Studio Example

In this example we will learn how to create a navigation drawer in android studio. Mainly it opens from the left or right side when we slide our finger in android mobiles . It is also called sidebar in android studio. This is also called android drawerlayout.

What is navigation drawer in android studio?

Navigation Drawer is part of the screen that contains some data like header and menu items in android. It opens when we click on the toggle button. Usually the toggle button is placed on the toolbar. This also opens when we slide the android device screen from the sidebar as made from left or right.

See the above image, this is an example of a navigation drawer. As i told you it contains some data like header layout and menu items. When we click on any item it will load or redirect to another screen. We can also move to another android screen by clicking on its header layout.

Why do we use the navigation drawer in android?

When we want to load multiple screens at one place and can go to any screen from one place. Then we use navigation drawer in android. The drawer and its items remain the same when we click on its navigation menu items. The desired screen is loaded only and it replaces the previous screen.

How to create a navigation drawer in android studio?

To create a drawerlayout in android, you have to create the following screens and classes. We needed following components :-

DrawerLayout
Toolbar
FrameLayout
Header Layout
Navigation Items
NavigationView

Now we will discuss one by one in brief.

Enable DataBinding in android studio

Please note that I used DataBinding in this project to fetch ids. So first please enable dataBinding. Click here to enable dataBinding in android studio.

1 DrawerLayout

It is the parent widget of the screen in which we want to add the drawer. It contains Toolbar, FrameLayout and NavigationView. We have to create all these three item inside the drawerlayout.

To create navigation drawer in android, we are using androidx library. Material design also provides drawerlayout. There is no big difference between these two. Use following component to create drawerLayout-

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        tools:openDrawer="start">
    </androidx.drawerlayout.widget.DrawerLayout>

Don’t forget to add the following line in this drawerLayout.

tools:openDrawer=”start”

2. Toolbar

Toolbar is fixed at the top of the screen. Navigation drawer toggle in android takes place on it. It can be left side or right side according to us, we are creating it from the left side. By clicking on the toggle icon, the drawer will open from the left side.

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/design_default_color_secondary"/>

To use the toolbar height use the following component in the toolbar.

android:minHeight=”?attr/actionBarSize”

3. FrameLayout

FrameLayout in android is used to load multiple screens in a single place. Generally it loads fragments instead of activity. So we have to create the screen of the fragment type, which we want to load in this layout by clicking on navigation drawer items.

To create FrameLayout use the following code in your project.

<FrameLayout
    android:id="@+id/frameLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

4. Header Layout

Header layout is not any specific layout, this is just a simple layout which is shown in above image. Generally it contains a circular image, name and email id. So this is custom you can create it according to you and set the data.

You can create it in app – > res -> layout. And mouse right click – > new -> Layout Resource File and give a name as you want. After creating this layout copy and paste the following code-

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

<androidx.appcompat.widget.LinearLayoutCompat
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:padding="10dp"
        android:orientation="horizontal">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_weight="1"
            android:src="@drawable/ic_emoji"/>

        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:paddingLeft="10dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Rakesh saini"
                android:textSize="16dp"
                android:textColor="@color/black"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="[email protected]"
                android:textSize="16dp"
                android:textColor="@color/black"/>

        </androidx.appcompat.widget.LinearLayoutCompat>

    </androidx.appcompat.widget.LinearLayoutCompat>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:background="@color/black"/>

</androidx.appcompat.widget.LinearLayoutCompat>
</layout>

5. Navigation Items

To show the items in the navigation drawer we have to create a list of items. With icons and text. These items will be listed below the header layout in drawerLayout in android.

First of all create the menu directory in res using the way – res -> right click -> new – > Android Resource Directory and name it menu.

After that right click on menu directory – > new -> Menu Resource File -> give a name -> Choose menu as Directory name from dropdown. And paste the following code.

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

    <group android:id="@+id/group"
        android:checkableBehavior="single">

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

    <item
        android:id="@+id/nav_contactUs"
        android:icon="@drawable/ic_book"
        android:title="Contact Us" />

    <item
        android:id="@+id/nav_aboutUs"
        android:icon="@drawable/ic_about"
        android:title="About Us" />

    </group>
</menu>

I created only three items you can create here as much as you want. And add the icon from the drawable folder.

6. NavigationView

NavigationView holds the navigation drawer elements like headerLayout and navigation items. We can manage it according to us by giving the padding, margin and other styles. Use the following code for NavigationView –

<com.google.android.material.navigation.NavigationView
    android:id="@+id/navView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:paddingVertical="20dp"
    app:headerLayout="@layout/nav_header_layout"
    app:menu="@menu/navigation_item"
    app:itemHorizontalPadding="40dp"
    app:itemIconPadding="30dp"
    app:itemIconSize="20dp"
    android:fitsSystemWindows="true"
    android:background="@color/white"
    android:theme="@style/AppTheme"
    app:itemBackground="@drawable/item_background_nav_checked"
    app:itemTextAppearance="?android:attr/textAppearanceSmallInverse"/>

Complete Example of Navigation Drawer in android

I combined the above whole code and created an example. You can directly use following code in your project –

activity_main.xml

This is the main layout xml file which contains DrawerLayout, Toolbar, FrameLayout and NavigationView. Cope and paste it to use.

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        tools:openDrawer="start">

        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:minHeight="?attr/actionBarSize"
                android:background="@color/design_default_color_secondary"/>

            <FrameLayout
                android:id="@+id/frameLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        </androidx.appcompat.widget.LinearLayoutCompat>

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/navView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:paddingVertical="20dp"
            app:headerLayout="@layout/nav_header_layout"
            app:menu="@menu/navigation_item"
            app:itemHorizontalPadding="40dp"
            app:itemIconPadding="30dp"
            app:itemIconSize="20dp"
            android:fitsSystemWindows="true"
            android:background="@color/white"
            android:theme="@style/AppTheme"
            app:itemBackground="@drawable/item_background_nav_checked"
            app:itemTextAppearance="?android:attr/textAppearanceSmallInverse"/>

    </androidx.drawerlayout.widget.DrawerLayout>
</layout>

MainActivity.java

For back pressed i created the OnBackPressed interface in MainActivity. When we are in the last Fragment like in About Us Fragment. If we press back button then we will redirect to the home Fragment like in HomeFragment().

I also changed the color of the selected item in the navigation drawer of android. Like if i press on Contact Us item then its background color will be changed. So this feature is already implemented in this.

To load the fragment in frameLayout in navigation drawer in android, FragmentManager and FragmentTransaction are used to call the next drawer item. So I created all these functions inside a CallFragment() and passed the fragment inside it. And this method is calling from onNavigationItemSelectedListener. I used switch() to call different fragments by using id from the menu item.

package com.example.androidtestingproject;

import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.view.GravityCompat;
import androidx.databinding.DataBindingUtil;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.graphics.Color;
import android.os.Bundle;
import android.view.MenuItem;

import com.example.androidtestingproject.Fragment.AboutUsFragment;
import com.example.androidtestingproject.Fragment.ContactUsFragment;
import com.example.androidtestingproject.Fragment.HomeFragment;
import com.example.androidtestingproject.databinding.ActivityMainBinding;
import com.google.android.material.navigation.NavigationView;

public class MainActivity extends AppCompatActivity {
    private ActivityMainBinding binding;
    private ActionBarDrawerToggle toggle;
    private OnBackPressedListener onBackpressedListener;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);

        initView();
    }

    private void initView() {

        setSupportActionBar(binding.toolbar);
        binding.toolbar.setTitleTextColor(Color.WHITE);

        //set default home fragment and its title
        getSupportActionBar().setTitle("Home");
        getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout, new HomeFragment()).commit();
        binding.navView.setCheckedItem(R.id.nav_home);

        toggle = new ActionBarDrawerToggle(this, binding.drawer, binding.toolbar, R.string.open, R.string.close);
        binding.drawer.addDrawerListener(toggle);
        toggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.white));
        toggle.syncState();

        //navigation item click
        binding.navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            Fragment fragment = null;
            @Override
            public boolean onNavigationItemSelected( MenuItem item) {
                switch (item.getItemId()){
                    case R.id.nav_home:
                        fragment = new HomeFragment();
                        binding.drawer.closeDrawer(GravityCompat.START);
                        getSupportActionBar().setTitle("Home");
                        callFragment(fragment);
                        break;

                    case R.id.nav_contactUs:
                        fragment = new ContactUsFragment();
                        binding.drawer.closeDrawer(GravityCompat.START);
                        getSupportActionBar().setTitle("Contact US");
                        callFragment(fragment);
                        break;

                    case R.id.nav_aboutUs:
                        fragment = new AboutUsFragment();
                        binding.drawer.closeDrawer(GravityCompat.START);
                        getSupportActionBar().setTitle("About US");
                        callFragment(fragment);
                        break;

                }
                return true;
            }
        });

    }

    //loading the another fragment in viewPager
    private void callFragment(Fragment fragment){
        FragmentManager manager = getSupportFragmentManager();
        FragmentTransaction transaction = manager.beginTransaction();
        transaction.setCustomAnimations(android.R.anim.slide_in_left, android.R.anim.slide_out_right);
        transaction.replace(R.id.frameLayout, fragment);
        transaction.addToBackStack(null);
        transaction.commit();
    }

    //on backpress
    @Override
    public void onBackPressed() {
        if (onBackpressedListener !=null){
            getSupportActionBar().setTitle("Home");
            binding.navView.setCheckedItem(R.id.nav_home);
            onBackpressedListener.doBack();
            binding.drawer.closeDrawer(GravityCompat.START);
        }else if(onBackpressedListener == null){
            finish();
            super.onBackPressed();
        }
    }

    public interface OnBackPressedListener {
        void doBack();
    }
    public void setOnBackPressedListener(OnBackPressedListener onBackPressedListener){
        this.onBackpressedListener = onBackPressedListener;
    }

    @Override
    protected void onDestroy() {
        onBackpressedListener = null;
        super.onDestroy();
    }
}

nav_header_layout.xml

Add the following dependency for CircleImageView.

//circular image
implementation 'de.hdodenhof:circleimageview:3.1.0'

This layout file contains the headerLayout data. Use your icons or photos from the drawable folder in CircleImageView as src.

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

<androidx.appcompat.widget.LinearLayoutCompat
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:padding="10dp"
        android:orientation="horizontal">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_weight="1"
            android:src="@drawable/ic_emoji"/>

        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:paddingLeft="10dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Rakesh saini"
                android:textSize="16dp"
                android:textColor="@color/black"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="[email protected]"
                android:textSize="16dp"
                android:textColor="@color/black"/>

        </androidx.appcompat.widget.LinearLayoutCompat>

    </androidx.appcompat.widget.LinearLayoutCompat>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:background="@color/black"/>

</androidx.appcompat.widget.LinearLayoutCompat>
</layout>

navigation_item.xml for navigation drawer

These are navigation items which will be listed below the header in the navigation drawer. Change the icons from your icon from the drawable folder. You can expand this list as you need.

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

    <group android:id="@+id/group"
        android:checkableBehavior="single">

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

    <item
        android:id="@+id/nav_contactUs"
        android:icon="@drawable/ic_book"
        android:title="Contact Us" />

    <item
        android:id="@+id/nav_aboutUs"
        android:icon="@drawable/ic_about"
        android:title="About Us" />

    </group>
</menu>

item_background_nav_checked

Create a Drawable Resource file in drawable folder and give the name – > item_background_nav_checked

This file is used to change the color of selected navigation drawer items. When we click on any item it will show as selected and its background color will be changed, so we understand that this item is selected.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/purple_500"
        android:state_checked="true"/>
</selector>

Fragments For Navigation Drawer in Android

Here we created three navigation items, So we needed to create three fragments to show the data. These are different from activities. I created three fragments. You can create these as follows –

Java -> first package – > Right click -> New – > Fragment – > Fragment ( Blank )

And copy paste the following code for all these three fragments. After Copy and paste you can manage the layout as you need.

HomeFragment.java

All these three fragments contain TextView only.

package com.example.androidtestingproject.Fragment;

import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;

import androidx.databinding.DataBindingUtil;
import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.androidtestingproject.BottomNavigationActivity;
import com.example.androidtestingproject.MainActivity;
import com.example.androidtestingproject.R;
import com.example.androidtestingproject.databinding.FragmentHomeBinding;

public class HomeFragment extends Fragment implements MainActivity.OnBackPressedListener {
    private FragmentHomeBinding binding;
    private View view;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        binding = DataBindingUtil.inflate(inflater, R.layout.fragment_home, container, false);
        ((MainActivity) getActivity()).setOnBackPressedListener(this);
        view = binding.getRoot();
        initView();
        return view;
    }

    private void initView() {
      //code here
    }

    //exit on backpressed
    @Override
    public void doBack() {
        new AlertDialog.Builder(getActivity())
                .setTitle("Do you want to exit?")
                .setMessage("Really want to exit?")
                .setNegativeButton("No", null)
                .setPositiveButton("Yes", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        getActivity().finishAffinity();
                        getActivity().finish();
                    }
                }).create().show();
    }
}

fragment_home.xml

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

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Fragment.HomeFragment"
    android:background="@color/white">

    <TextView
        android:id="@+id/textHome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:text="Home Fragment"
        android:textColor="@color/teal_700"
        android:textSize="24dp" />

</RelativeLayout>
</layout>

ContactUsFragment.java

package com.example.androidtestingproject.Fragment;

import android.os.Bundle;

import androidx.databinding.DataBindingUtil;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.androidtestingproject.MainActivity;
import com.example.androidtestingproject.R;
import com.example.androidtestingproject.databinding.FragmentContactUsBinding;

public class ContactUsFragment extends Fragment implements MainActivity.OnBackPressedListener {
    private FragmentContactUsBinding binding;
    private View view;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        binding = DataBindingUtil.inflate(inflater, R.layout.fragment_contact_us, container, false);
        ((MainActivity) getActivity()).setOnBackPressedListener(this);
        view = binding.getRoot();
        initView();
        return view;
    }

    private void initView() {

    }

    //if you are in this fragment, load home fragment on backpress
    @Override
    public void doBack() {
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.setCustomAnimations(android.R.anim.slide_in_left, android.R.anim.slide_out_right);
        transaction.replace(R.id.frameLayout, new HomeFragment());
        transaction.addToBackStack(null);
        transaction.commit();
    }
}

fragment_contact_us.xml

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

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Fragment.ContactUsFragment"
    android:background="@color/white">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:text="Contact Us Fragment"
        android:textColor="@color/black"
        android:textSize="24dp" />

</RelativeLayout>
</layout>

AboutUsFragment.java

package com.example.androidtestingproject.Fragment;

import android.os.Bundle;

import androidx.databinding.DataBindingUtil;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.androidtestingproject.MainActivity;
import com.example.androidtestingproject.R;
import com.example.androidtestingproject.databinding.FragmentAboutUsBinding;

public class AboutUsFragment extends Fragment implements MainActivity.OnBackPressedListener {
    private FragmentAboutUsBinding binding;
    private View view;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        binding = DataBindingUtil.inflate(inflater, R.layout.fragment_about_us, container, false);
        ((MainActivity) getActivity()).setOnBackPressedListener(this);
        view = binding.getRoot();
        initView();
        return view;
    }

    private void initView() {

    }
    //if you are in this fragment, load home fragment on backpress
    @Override
    public void doBack() {
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.setCustomAnimations(android.R.anim.slide_in_left, android.R.anim.slide_out_right);
        transaction.replace(R.id.frameLayout, new HomeFragment());
        transaction.addToBackStack(null);
        transaction.commit();
    }
}

fragment_about_us.xml

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        tools:context=".Fragment.AboutUsFragment">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:text="About Us Fragment"
            android:textColor="@color/material_on_background_emphasis_medium"
            android:textSize="24dp" />

    </RelativeLayout>
</layout>

Calling HomeFragment() on backpress in Navigation drawer android

As I created an interface in MainActivity(). This interface is implemented in all fragments and overrides its method. These are some basic feature of navigation drawer in android.

In the override method we loaded HomeFragment() by replacing the old fragment from the frameLayout.