Android Material Design 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 Sanggar 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 berangkat 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 tiap-tiap 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 saban 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’falak have any idea of fragments, don’tepi langit 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 tiap-tiap 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 sendirisendiri menu item selected as shown below:-

OneTwoThree

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 isnavigationView.
  • 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.

Source: https://www.thecrazyprogrammer.com/2017/10/android-navigation-drawer-tutorial.html