Android Navigation Drawer Example using Fragments

Hello guys, here is another tutorial for one of the most common things in any android application, navigation drawer. So in this Android Navigation Drawer Example you will learn how you can use the Android Navigation Drawer from the predefined template.

You may already know what is Android Navigation Drawer but if you are confused in implementing it with multiple fragments then don’t worry, this android navigation drawer example will clear all your doubts. So lets begin our Android Navigation Drawer Example.

Android Navigation Drawer Example Video

  • You can also watch this complete video tutorial if you are having problem understanding the written tutorial.

Android Navigation Drawer Example

Creating a new project

  • So first we will create a new project. I am using Android Studio. (No reason of using eclipse nowdays 😛 )
  • Create a new project. I created NavigationDrawerExample.
  • Now when you are asked to select an activity from the template, select the navigation drawer activity.
android navigation drawer example
Navigation Drawer Activity

Adding Navigation Drawer Activity

  • If you want to add Navigation Drawer Activity to your existing project you can simply add it by going to your package -> right click -> new -> activity -> navigation drawer activity  
android navigation drawer activity
Adding Android Navigation Drawer Activity
  • Once your project is loaded your navigation drawer activity is ready. You can now run your application. 😛
android navigation drawer example
Android Navigation Drawer Example
  • Pretty easy right? Yeah its quite easy. Now we will learn to customise the menus and to add the screens for the menus using fragment.

Customising Navigation Drawer Menus

  • Now you can change the menus given in the drawer to whatever you want. To change the menu open the activity_main_drawer.xml inside menu folder.  Here is my activity_main_drawer.xml file I deleted the menus and now we have only 3 menus (You can add as many as you want).

  • I changed the text to Menu 1, Menu 2 and Menu3 and for icons I used the default android icon. You can use custom icons just paste the icon image inside drawer folder and you can use them.
  • If you try to run app now it will give error, as we have changed the menu items and ids. So first go inside MainActivity.java (or the java file for your navigation drawer activity). And modify the overriden method onNavigationItemSelected(MenuItem item) as follows.

  • Here we removed the previous if else conditions and added our own according to the customised menu ids.
  • You can also customise the navigation drawer header. For this you need to go to the nav_header_main.xml file. I also changed this file as below.

  • Now you can run your application.
android navigation drawer example
Android Navigation Drawer Example

Removing the Floating Action Button

  • You can see a circular red button in your activity. You can remove it if you do not need it. To remove this button go to app_bar_main.xml inside the layout folder and remove the floating button from there.

  • To remove the default Hello World text view go to the content_main.xml file.
  • As we have removed the button we also need to modify the code inside onCreate() method of MainActivity.java so modify it as follow or you will get error.

 

  • Now we will create fragments for our navigation menus.

Creating Screens for Navigation Menus using Fragment

Now whenever we click on a navigation item from the drawer a respective screen should open, for this we will use fragments. As we have three navigation menus we will create three layouts inside our layout folder.

  • Right click on layouts folder and create a new layout resource file. I named it fragment_menu_1.xml, fragment_menu_2.xml and fragment_menu_3.xml. Write the following xml code inside all these files.

  • All the three files contains the same code only for the text I changed it to Menu 1, Menu 2 and Menu3 for the respective files.
  • You can design the screens according to your application requirement but for now I am justing putting a normal TextView as it is an example demonstrating the concept only.
  • So we have the layouts now we will put these screens inside your activity using fragments. For this we need a FrameLayout so go inside content_main.xml file and add a FrameLayout.

  • Now we will create the Fragments.
  • So create 3 java classes inside your package named Menu1, Menu2 and Menu3 and write the following code.

  • For the other two classes code will be the same, you only need to change R.layout.fragment_menu_1 with the respective layout file for your fragment.

Switching Between Fragments on Navigation Drawer Menu Selection

  • Now come inside MainActivity.java and empty the method onNavigationItemSelected(MenuItem item) as follows.

  • Now here we will create one more method named displaySelectedScreen(int itemId).

  • We will call this method whenever a navigation menu item is selected. So inside onNavigationItemSelected(MenuItem item) we need to add the following line.

  • Now when the activity is first loaded we will display Menu1. For this just add the following line inside onCreate() method of MainActivity.java.

  • So the final code for MainActivity.java is.

  • Thats it now just run your application.
android navigation drawer example
Android Navigation Drawer Example
  • Bingo! Its working absolutely fine. If you are having troubles you can get the source code from the below github repository.

Android Navigation Drawer Example Source Code

So thats it for this Android Navigation Drawer Example friends. Feel free to leave your queries by comments. And please do share this post in your social networks if you found it useful. Thank You 🙂