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 😀
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:
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
Define the activity xml in res/layout/activity_main.xml
- 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
- we are going to define toolbar in the next step as our custom Toolbar
- We have PlaceHolderView in the drawer layout section to design the drawer layout
- (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
Create Toolbar res/layout/toolbar_home.xml
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
- Download the icons for the drawer from https://design.google.com/icons/ and put them in the drawable
- Create required string resource in res/values/strings
Create menu item view: res/layout/drawer_item.xml
- @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.
- @layout is used to bind the layout with this class
- @View is used to bind the views in this layout we want to refer to
- @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
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.
- Bind the layout and views as we did in the step 6
- We define the Constants so that we can refer to the item type
- Create a constructor for this class and pass context and the PlaceHolderView
- Write a method to set the values of the view depending upon the menu item type instantiated and annotate with @Resolve
- Write a method to handle the click and operation to be performed depending on the menu item type clicked.
- (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
- 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
- Add the views in the drawer by calling the addView method
- ActionBarDrawerToggle is used to add listener to the drawer and to add the hamburger menu icon
Now that we have gone through the exercise we can review the PlaceHolderView application over RecyclerView.
- PlaceHolderView remove all the boilerplate codes for setting the View adapters. The amazing fact is that there is no adapter to worry about.
- The code is extremely modular and works with the flexibility of putting annotations on any view and methods.
- NO findViewById, NO onClickListener ugly codes
- There are a lot of benefit of using PlaceHolderView. For greater perspective please view the GitHub Repository PlaceHolderView
Source code link:
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.