How to add navigation drawer to android app

I decided to myself make a tutorial for adding navigation drawer app to android app.

       In Android, adding a navigation drawer to your app is quite a complicated process. While I found out many tutorials for making navigation bar, many are outdated and their designs don't match the current material design guidelines and so I decided to myself make a tutorial for adding navigation drawer app to android app. Well, if you face errors you can always Google it but if you follow everything step by step then I doubt you will face any errors.

The image above represents the final navigation drawer which we are going to build in this tutorial.

How to add a navigation drawer to android app

First, add this dependency to the app level build.gradle file. 

[implementation 'com.android.support:appcompat-v7:28.0.0' implementation 'com.android.support:design:28.0.0']

Now right click on Images, go to new and select vector asset.

Once you click on Vector Asset then you will get a window like the one below. Click on the clipart icon in front of clipart and choose from the list of icons to add to the navigation bar. I have added 5 icons for five different menus viz Course, tools, rate, share, privacy policy.

Now once you have icons for your navigation bar, create a menu folder in the drawable directory if it doesn't exist else added a menu resource file drawer_menu.xml in your menu folder. The code in your drawer_menu file should look like this.

[<?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/course" android:icon="@drawable/ic_course" android:title="Courses" />
<item android:id="@+id/tools" android:icon="@drawable/ic_tools" android:title="Tools" />
</group>
<item android:title="Communicate">
<menu>
<item android:id="@+id/rate" android:icon="@drawable/ic_rate" android:title="Rate" />
<item android:id="@+id/share" android:icon="@drawable/ic_share" android:title="Share" />
<item android:id="@+id/Privacy_policy" android:title="Privacy Policy" android:icon="@drawable/ic_privacy" />
</menu>
</item>
</menu>]

Select all the code you have copied and press CTRL+ALT+L and it will be reformatted for you. Now add these lines into your styles.xml.

[<style name="AppTheme.NoActionBar">

<item name="windowActionBar">false</item>

<item name="windowNoTitle">true</item>

<item name="android:statusBarColor">@android:color/transparent</item>

</style>] 

Now inside your android manifest, add these lines just below <activity android:name=".MainActivity". If your app already has android:theme then remove it and add this.

[android:theme="@style/AppTheme.NoActionBar"]

Go to res folder in your app and right-click on layout folder and then new>new layout file and name it nav_header.xml

Create a layout for navigation header in drawable folder and name it nav_header.xml. Add linear layout with height 176dp and vertical orientation. Add one image view and two text view. After that, your code should look like this.

[<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  

   style="@style/ThemeOverlay.AppCompat.Dark"     

android:layout_width="match_parent"     

android:layout_height="176dp"     

android:background="@color/colorAccent"     

android:gravity="bottom"    

android:orientation="vertical"     

android:paddingLeft="16dp"     

android:paddingBottom="10dp">
    <ImageView       android:id="@+id/dp"         

android:layout_width="73dp"         

android:layout_height="69dp"         

android:src="@mipmap/ic_launcher" /> 

    <TextView        android:id="@+id/Name"       

  android:layout_width="wrap_content"        

 android:layout_height="wrap_content"        

 android:paddingTop="5dp"        

 android:text="pallav chaudhari"        

 android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
    <TextView         android:id="@+id/email"     

   android:layout_width="wrap_content"    

     android:layout_height="wrap_content"         

android:paddingTop="5dp"         

android:text="pallavc34@gmail.com" />

</LinearLayout>]

Now comes the complicated part. Set drawer layout as root layout for your main_activity.xml file. Set android:id as drawer_layout. You will also need to add attribute android:fitsSystemWindows="true" so that your navigation drawer will open in the status bar also.

[<?xml version="1.0" encoding="utf-8"?> 

<android.support.v4.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:openDrawer="start">]

Add Linear layout inside the drawer layout. Now add a Toolbar inside the Linear layout.

[<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" 
android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" 
android:elevation="4dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />]

Add FrameLayout below the Toolbar item and give it an id fragment_container.

[<FrameLayout android:id="@+id/fragment_container" android:layout_width="match_parent"  
android:layout_height="match_parent"/>]

Below linear layout add Navigation view layout add an android:layout_gravity="start" attribute.

[<android.support.design.widget.NavigationView android:layout_width="wrap_content"  
android:layout_height="match_parent"  
android:layout_gravity="start"  
android:id="@+id/nav_view"  
app:headerLayout="@layout/nav_header"  
app:menu="@menu/drawer-menu"/>]

Add this line to your styles.xml.

[<string name="navigation_drawer_open">Open navigation drawer</string>
<string name="navigation_drawer_close">Close navigation drawer</string>]

Declare private DrawerLayout drawer variable in your activity.
To get navigation drawer working you will have to add this code in the main_activity.java file.

[Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
NavigationView navigationView = findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
drawer = findViewById(R.id.drawer_layout);
ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawer, toolbar,
        R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.addDrawerListener(actionBarDrawerToggle);
actionBarDrawerToggle.syncState();]

 You will get one error at this. For that you will have to implement listener. On your class Mainactivity extents AppCompactActivity add implements NavigationView.OnNavigationItemSelectedListener. Again you will get a error on implements. Add onNavigationItemSelected method after your onCreate method ends and error will go away. In onNavigationItemSelected method return true. Now we will add a onBackPressed method to close the navigation drawer as soon as the back button is pressed.

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

Well now to check if you are with me just compile your app and your app should have navigation drawer which should open by swiping from the left side of the screen to right side of the screen with circle animation on the buttons.

Now create a new layout file fragment_course.xml and add a textview. Similarly for second fragment create a new layout file fragment_tools.xml and and add another textview with different text. Well now that you have created fragments you can move on to creating java classes for the fragments.

Right click on your com.example folder and hover to new and select Java class. Add CourseFragment as class name and add fragment as parent class. Now paste this code in CourseFragment.

[@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    return inflater.inflate(R.layout.fragment_course, container, false);

}]

One thing you should remember is as I have set first fragment name as fragment_course.xml hence I am setting the layout to R.layout.fragment_course. Now do the same for ToolsFragment and set layout to R.layout.tools_fragment.

Now add this code inside of your onNavigationItemSelected method.

[switch (menuItem.getItemId()) {

    case R.id.addstudent:
        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.fragment_container, new AddStudent())
                .commit();
        break;
    case R.id.blank:
        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.fragment_container, new Blank())
                .commit();
        break;
}
drawer.closeDrawer(GravityCompat.START); 

return true;]

Similarly create more cases for more actions like rate, share etc. Now just add this code to your onCreate method and you are done.

[if (savedInstanceState == null){
getSupportFragmentManager()
        .beginTransaction()
        .replace(R.id.fragment_container, new AddStudent())
        .commit();
navigationView.setCheckedItem(R.id.addstudent);}]

Well now you have a fully functional navigation drawer for android.