Navigation Drawer in Android using Fragments

Many applications like Gmail, Twitter etc will have navigation menus as shown below:

Navigation Drawer TwitterNavigation Drawer Gmail

You would have wondered how to create one of them. Don’t worry! in this tutorial, I will explain you in detail on how to implement navigation drawer in Android. Apart from that, in this tutorial you will also learn on:
  • how to load images from a URL using Glide library.
  • how to open a website URL on click of a menu item.
  • how to open share via dialog with a custom message and title.

Below is the screenshot of the navigation drawer we are going to develop:

Navigation Drawer Screenshot

Creating the Project and Adding Dependencies

1. In Android Studio, create a new project with the name “Navigation Drawer Demo”. While Adding an Activity to the module, choose Navigation Drawer Activity.

Navigation Drawer Creating Project - Navigation Drawer in Android using Fragments

2. Now open build.gradle file and add Glide library dependency. We make use of Glide library so that we can demonstrate dynamic loading of images from the internet rather than loading static images stored in the resources folder. However, Glide library is not a must for implementing Navigation Drawer.

3. Open AndroidManifest.xml and add Internet permission for Glide

Creating packages and resource files

1. Create the package structure as shown below:

Navigation Drawer Package Structure

2. Open content_main.xml  and change the contents to the following. The FrameLayout is added to display the Fragments:

3. Open strings.xml and add the following lines:

4. Edit nav_header_main.xml and add Image Views to display Profile Picture and Background Image. Also, add 2 Text Views to display name and website.

5. Download mipmap.zip, extract the files and Copy Paste the contents it into your project’s res folder. This contains icons used for displaying menu items.

6. Open activity_main_drawer.xml  and add the required menu items:

Creating Constants and Fragments

1. Create a constants file named NavigationDrawerConstants.java inside constants package and add the following constants. This contains constants used throughout the app.

2. Create a new Fragment named HomeFragment (File > New > Fragment > Fragment (Blank)) inside fragments package.

3. Edit HomeFragment.java to the following content:

4. Open fragment_home.xml from layout folder and add an Image View to display the icon.

5. Repeat the steps 2-4 for remaining fragments: GalleryFragmentVideosFragment, and SettingsFragment.

Loading Fragments on click of Menu Items

In MainActivity.java add code to load the images, handle events on click of items on the menu and code to load Fragments on click of menu items:

That’s it. Run the application and you should be able to see the navigation drawer. Below is the demonstration of the app:

Navigation Drawer Demo - Navigation Drawer in Android using Fragments

You can also download the source code and APK files:

Download Source CodeDownload APK

If you have any doubts, then we can discuss them in the comments section. If you have liked this tutorial, please do follow us on Twitter and Facebook.

Stay Connected

No spam guarantee.

Abhishek

Abhishek

Abhishek loves coding. His favorite is Android Development. Apart from coding he loves traveling and reading.
Abhishek

Latest posts by Abhishek (see all)

Leave a Reply

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