How to Create Navigation Drawer in Android App | Android Studio |

In this tutorial of Android Development, we will see how to create a Navigation Drawer in Android Studio using XML and Java Code.Prerequisite for this is knowledge of Layouts, XML code, JAVA code.

Now, Let's start.

1. Firstly you need to create a layout in which you want to show Navigation Drawer. For the time being, let's give it name activity_home.xml

2. Now, create a new layout of Navigation Drawer corresponding to it create a Java file. Let us give the name to layout fileactivity_navigation_drawer.xml

3. Coming to our coding part. Write the following code into your activity_navigation_drawer.xml file

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:padding="15dp"
    tools:context=".Navigation_drawer">

    <TextView
        android:id="@+id/edit_profile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="15dp"
        android:text="PROFILE"
        android:textColor="#111"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/nav_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/edit_profile"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:src="@drawable/ic_launcher_background"
        android:contentDescription="TODO" />

    <TextView
        android:id="@+id/input_name"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/nav_img"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:gravity="center_horizontal"
        android:text="Dimitri"
        android:textSize="25sp"
         />

    <View
        android:id="@+id/nav_line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/input_name"
        android:layout_marginTop="10dp"
        android:background="@color/grey" />
</RelativeLayout>

4. Now we have to add some menu icons to our Navigation Drawer. So, for that create a new Menu resource directory by clicking on res file. Set resource type to menu.

5. Now, click on the menu resource directory and create a new Menu Resource File. Name it as drawer_menu

drawer_menu.xml Code

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="navigation_view">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/message"
            android:icon="@drawable/ic_baseline_add_24"
            android:title="More" />
    </group>

    <item android:title="More">
        <menu>
            <item
                android:icon="@drawable/ic_baseline_share_24"
                android:title="Share" />
            <item
                android:icon="@drawable/ic_baseline_help_24"
                android:title="Help" />
        </menu>
    </item>

</menu>

6. Our half work is done, In your activity_home.xml add the following code.

<?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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    tools:context=".Home"
    tools:openDrawer="start">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#fff"
            android:elevation="4dp"
            />

        <FrameLayout
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/toolbar" />

    

    </RelativeLayout>

    <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:headerLayout="@layout/activity_navigation_drawer"
        app:menu="@menu/drawer_menu"
        />

</androidx.drawerlayout.widget.DrawerLayout>

Here in this, we have created a material toolbar on which a hmaburger icon will be shown and by clicking on that button navigation drawer will be opened. Checkout the following JAVA code.

7. Last but not the least, Now we have created navigation_drawer activity but we also want it to get opened by clicking on a button. So, for this purpose java code comes into play. Now, in the Home.java file corresponding to activity_home.xml write the following java code in it.

import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.fragment.app.Fragment;

import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;

import com.google.android.material.appbar.MaterialToolbar;
import com.google.android.material.bottomnavigation.BottomNavigationView;

public class Home extends AppCompatActivity {
    private DrawerLayout drawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        MaterialToolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        drawerLayout = findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();
 @Override
public void onBackPressed() {
    if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
        drawerLayout.closeDrawer(GravityCompat.START);
    } else {
        super.onBackPressed();
    }

}
  

Output: