Android Navigation Drawer Tutorial

In this tutorial you will learn about android navigation drawer.

There are so little possibilities when it comes to choosing the main menu of an android application. If we start enlisting, we have TabLayout (used by the very famous WhatsApp), Bottom navigation drawer (used again by a facebook product Instagram) and then we have the most common form of menu ui and i.e. Navigation Drawer. Using a navigation drawer really adds a professional cover sort of thing to an android application and as an android developer, once you learn to implement it, trust me when I tell you this, it makes you feel as if you can now implement anything in an android application. I have been through that feeling and I wish you to experience the same. So, without any further delay, let’s get started on how to implement an Android Navigation Drawer.

Android Navigation Drawer Tutorial

Creating a New Activity

To begin with, hit the create a new project button in Android Studio and follow the steps below:-

Step 1: Assign a good name to your project.

createnewproject

Step 2: Select the minimum android version that you want your app to support to.

selectandroidversion

Step 3: This is most important step in which you need to select the navigation drawer activity in order to implement the navigation drawer. So, go ahead and select the navigation drawer activity from list and hit next and then hit finish.

selectingactivity

finishing

Now let the project load and gradle be built and then we shall start configuring Navigation Drawer Activity.

The project is all set by now to get started with code. Before doing so, let me give you a quick walk through of the file structure of this activity.

In the XML

xmlpart

  • In the first folder of res, we have directory by the name drawable and it simply contains all the xml icons for the drawer menu items.
  • In the next directory called layout, we have the all the layout files required for this activity. On the top of the list, we have the activity_main.xml which looks as shown below:-

activity_main.xml

  • In the above xml code, we have an include envelope and then we have the NavigationView. This include envelope is being used here to render the code in the app_bar_main.xml layout file. The purpose of using include here is to maintain the cleanliness and readability of the code. The Parent layout for activity_main.xml is DrawerLayout.
  • The next layout file in the list is app_bar_main.xml and it looks something like below:-

app_bar_main.xml

  • It simply has the Toolbar layout enclosed by the AppBarLayout which adds a shadow underneath the toolbar. Again here also we have a include envelope which refers to content_main.xml. So, content_main would be the place to display the different drawer screens. It also has a FloatinActionButton just as we have the YouTube App as the upload button. Well, it’s got nothing to do with navigation drawer activity so, we’ll just remove it once we start working on the navigation drawer.
  • The next layout file is content_main.xml and it looks as shown below:-

content_main.xml

  • The above code is where the content of the drawer screens is configured. Presently, it has nothing but a TextView saying Hello World but it’ll once we’re done configuring the Navigation Drawer.
  • The next layout file is nav_header_main.xml and it occupies the header of the drawer layout as shown below:-

Android Navigation Drawer

  • Now you might wonder how has it been included in the main layout file i.e activity_main.xml. Well, it’s pretty simple. In the activity_main.xml, in the code for NavigationView, it has been included as the app:headerLayout to the drawer.
  • The next directory is menu in the res folder and it has activity_main_drawer.xml which looks something like as shown below:-

activity_main_drawer.xml

  • This file accounts for the all menu items which show up in the drawer, their titles, icons other behaviours. It has been set as menu to the NavgiationView in the activity_main.xml  as app:menu.

That’s all for xml. Now we shall look into the java section and understand it’s flow.

In the Java

In the java part, we have just one class and i.e. MainActivity.java. It’s code looks as shown below:-

MainActivity.java

  • In the onCreate method of this class, we have Floatingactionbutton and the DrawerLayout initialized and configured. Also, we have the NavigationView initialized and the onItemClick listener has been set to display the screen as per the menu item selected.
  • The options menu has been rendered and their actions have been defined in the onCreateOptionMenu and onOptionsItemSelected methods respectively.
  • Then, we have the OnNavigationItemSelected method where we’d handle the different menu item when clicked to render different screens as per the menu items.

That’s all you needed to understand the flow of the code for the NavigationDrawerActivity.

Let’s start setting the NavigationDrawerActivity.

Removing the FloatingActionButton:-

  • Alright, we shall begin with removing the FloatingActionButton from the navigation drawer. To do so, remove the xml code for FloatingActionButton in the app_bar_main.xml. After removing it, the app_bar_main.xml would look something as shown below:-

app_bar_main.xml

  • Next in the MainActivity.java, we need to remove to code relating to FloatingActionButton. To do so, go ahead and delete the following lines from the onCreate method of MainActivity.java:-

  • After deletion of the above lines, the MainActivity.java would look something as shown below:-

MainActivity.java

  • Now, Run the app and you shall find the FloatingActionButton gone.

Configuring Drawer Menu Items

Now, we need to configure the menu items in the activity_main_drawer.xml file. To do so, open the aforementioned xml file and overwrite it with the code shown below:-

activity_main_drawer.xml

  • Each menu item has three basic attributes viz. id, title and icon. In the above code, we replaced the previous menu items with 3 menu items having titles One, Two and Three with item ids as nav_one, nav_two and nav_three respectively. The icons of these menu items have been left unchanged to avoid unnecessary imports. You can import the icons and change it later.
  • Now change the OnNavigationItemSelected method of the MainActivity.java class  with the code as shown below:-

  • In the above code, we just updated the ids of menu_items through which their actions were defined in this method. Like earlier you had, ids such as nav_camera, nav_gallery, etc here, but now we have ids such as nav_one, nav_two and nav_three and this is because we just updated the menu in the last step.
  • Now run the app and you shall find the drawer menu changed as shown below:-

Android Navigation Drawer Menu

 Setting Up the Screen Contents

To set up the screen content, begin with changing the content_main.xml. Overwrite content_main.xml with the code shown below:-

content_main.xml

  • In the above code, we replaced the constraint layout with a FrameLayout which is used to block an area of the screen to display a certain content. You’ll realize later how it is being used exactly. So, keep moving.
  • We’re going to have three Fragments here in this project each having it’s class and a layout resource file. If you don’t have any idea of fragments, don’t worry. Consider fragments just as parts of an activity. i.e An activity can contain multiple fragments.
  • Next, for the three fragments, create three java classes by the names of the drawer menu items viz One.class, Two.class and Three.class.
  • Next, make each of them extend them to Fragment v4.
  • Next, override the onCreateView method in each of these classes. This is the method where we’d specify the layout files for each of these  fragments.
  • After the steps mentioned above, the One.java class would look something like shown below:-

One.java

  • Next, create three xml  layout resource files by the names viz. fragment_one, fragment_two and fragment_three.
  • Each of these layout files would simply have a textView saying the name of the fragment.
  • fragment_one.xml would look something like shown below:-

fragment_one.xml

  • Now, we have three Fragment classes namely One, Two and Three and we have three layout files for these fragment classes. To hook them up together, just update the onCreateView method in the three classes as shown below:-
  • For One.java, do it as shown below:-

One.java

  • For Two.java, do it as shown below:-

Two.java

  • For Three.java, do it as shown below:-

Three.java

  • Now, we have the three fragments all set.

Hooking the Fragments to the Drawer Menu Items

  • To set the fragments up with the drawer menu items, we need to add a new method to the MainActivity.java and i.e. displaySelectedFragment(). The code for this method is given below. Just copy it and paste it in your MainActivity.java class.

  • In the above method, according to the menu items of the drawer, different fragments are being loaded into the FrameLayout in the content_main.xml file.
  • Now, update the OnNavigationitemSelected method in the MainActivity.java class with the code given below:-

  • In the above code, the displaySelectedFragment method which we just created has been called. We’re just passing the selected item_id in this method so as to display the fragment as per the item id.
  • That’s it. You just linked all the fragments with drawer menu items successfully.
  • Run the app now and you shall  find the fragment showing as per menu item selected as shown below:-

One Two Three

Setting up Home Screen

  • If you wish to have Fragment One as default fragment i.e. it appears as home screen, then just call the displaySelectedFragment() method at the end of onCreate method in MainActivity.java and pass the item id for the Fragment One i.e. R.id.nav_one just as shown below:-
  • global

Setting Screen Titles

  • If you wish to change the toolbar title as per the selected drawer menu item, then first of all you need to make a  reference  global and that is navigationView.
  • Mention the navigationView reference at the top of the MainActivity.java class as shown below:-

init

  • Next, initialize it in the onCreate method as shown below:-

reference

  • Next, we need to add a method to the class MainActivity which would change the title of the screen as per the selected menu item. So, create a method by the name setScreenTitle() in MainActivity.java and copy the code given below into it’s body.

  • Now, just call this method in the displaySelectedFragment method as shown below:-

displayhomescreen

  • And you have done it. You have successfully learnt the implementation of Android Navigation Drawer.
  • Run the app now and you shall see your drawer running well as shown below.

  • To help you even further, we have the source code available here for this project.

Project Source Code

Comment below if you have any queries related to above android navigation drawer tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *