Navigation Drawer Android Example

Sliding Menu tutorial with the help of PlaceHolderView

Into: Navigation Drawer is the sliding menu that appears on the android screen with a hamburger menu icon in the ActionBar. The construction of it requires placing multiple views inside the navigation portion of the DrawerLayout. We are going to design a Drawer with the help of PlaceHolderView, that is a library built upon the RecyclerView

Why use a PlaceHolderView?

If you have worked with RecyclerView, you will definitely appreciate this library because of the ease and power it brings in. Let’s come back to this question after we have gone through this tutorial because it will provide a better perspective.

Let’s Build this up :D

To build up this drawer we need to go through steps as described below:

Use gradle dependency for PlaceHolderView library in your app’s build.gradle:

Step 1:

Create style for the Drawer with respect to the Action Bar and Status Bar. In this example we will be using Toolbar. This is for the reason that we want our Drawer to slide over the Status Bar.

Define theme in res/values/styles.xml

You can specify the color for the hamburger menu icon here

<item name="color">@android:color/white</item>

Step 2:

Define the activity xml in res/layout/activity_main.xml

Notes:

1. The view is split in two parts: DrawerLayout defines the holder for both the views. Top LinearLayout defines the screen view and FrameLayout defines the view for the drawer
2. we are going to define toolbar in the next step as our custom Toolbar
3. We have PlaceHolderView in the drawer layout section to design the drawer layout
4. (Optional)The PlaceHolderView (galleryView) in the above code is for the purpose of creating a gallery of images and not relevant for this tutorial and can be removed

Step 3:

Create Toolbar res/layout/toolbar_home.xml

Step 4:

This Drawer has two type of views, header and menu items, we are going to define header view in this section

Create Header view: res/layout/drawer_header.xml

Note:

1. Download the icons for the drawer from https://design.google.com/icons/ and put them in the drawable
2. Create required string resource in res/values/strings

Step 5:

Create menu item view: res/layout/drawer_item.xml

Step 6:

Create DrawerHeader.java

Notes:

1. @NonReusable is annotation in PlaceHolderView, to be used in cases where we want to release all the resources and references if removed from the list and won’t use the same object in addView() method in PlaceHolderView.
2. @layout is used to bind the layout with this class
3. @View is used to bind the views in this layout we want to refer to
4. @Resolve is used to operate on the view references obtained from @View, in short if we want to define any operation on the views it should be put in a method and annotated with @Resolve

The Documentation for PlaceHolderView is on github: https://github.com/janishar/PlaceHolderView

Step 7:

Similarly create DrawerMenuItem.java

Notes: Pre step notes

This class is rather long as it define all the operations and depending on the item option selected does the operations operate.

1. Bind the layout and views as we did in the step 6
2. We define the Constants so that we can refer to the item type
3. Create a constructor for this class and pass context and the PlaceHolderView
4. Write a method to set the values of the view depending upon the menu item type instantiated and annotate with @Resolve
5. Write a method to handle the click and operation to be performed depending on the menu item type clicked.
6. (Optional) If we want to pass the click events in any other class then write an interface with methods to call on menu item clicks. Implement the interface in the activity and set callback listeners defined in this class.

Step 7: Last Step

Create MainActivity.java

Notes:

1. Get the reference to the views and initialize the variables in onCreate.(Optional)We can remove this boilerplatecode findViewById by using another library of mindorks : https://github.com/janishar/ButterKnifeLite
2. Add the views in the drawer by calling the addView method
3. ActionBarDrawerToggle is used to add listener to the drawer and to add the hamburger menu icon

The Question:

Now that we have gone through the exercise we can review the PlaceHolderView application over RecyclerView.

1. PlaceHolderView remove all the boilerplate codes for setting the View adapters. The amazing fact is that there is no adapter to worry about.
2. The code is extremely modular and works with the flexibility of putting annotations on any view and methods.
3. NO findViewById, NO onClickListener ugly codes
4. There are a lot of benefit of using PlaceHolderView. For greater perspective please view the GitHub Repository PlaceHolderView

Source code link:

https://github.com/janishar/PlaceHolderView/blob/master/app/src/main/java/com/mindorks/test/MainActivity.java

I Hope that this tutorial will help you in building great Drawers. Post me anything you build, on this post. And do give star on the repository https://github.com/janishar/PlaceHolderView

Keep coding and enjoying your creation.

Coders rock!!