Navigation Drawer using RecyclerView Part - 1

In the previous tutorial we built a list of android versions using recycler view. Now, since we know how RecyclerView works, let's make a Navigation Drawer using RecyclerView.

So our goal is to build up a navigation drawer like this screenshot. We will be using DrawerLayout for holding our content and RecyclerView for the navigation drawer.

In Part 1 of this tutorial, We will set up the menu and will add header and click events in next part.

Let's start with creating Android project with a blank Activity template. We will have an Activity with a layout XML file ready for our main screen.

First thing first, let's first include the required libraries for our project. Since RecyclerView is a part of support library let's add it to the dependency. For adding the dependency open build.gradle file in the app module and add following dependency. 

OR you can just select the project and hit f4 to open the Project Structure dialog and select dependencies tab , click plus icon at the bottom select library dependency and search recyclerview and select the following library from the list to include it.

 compile 'com.android.support:recyclerview-v7:22.2.1' 

Let's add a toolbar to our activity.

<android.support.v7.widget.Toolbar  
     android:id="@+id/appBar"  
     android:layout_width="match_parent"  
     android:layout_height="@dimen/abc_action_bar_default_height_material"  
     android:background="#00bbff"/> 

We are using Toolbar which is a part of support library v7. We will be using this as our actionbar. For this we need to disable existing actionbar from our theme. Let's do it by using NoActionbar theme. And yes, don't forget to remove the paddings from outermost layout.

<resources>  
   <!-- Base application theme. -->  
   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">  
     <!-- Customize your theme here. -->  
   </style>  
 </resources> 

Then, set the toolbar as actionbar in our activity. Create new field mToolbar for the toolbar and in onCreate assign it the Toolbar  that we created in  using findViewById() method.

 private Toolbar mToolbar;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     mToolbar = (Toolbar)findViewById(R.id.appBar);   
     setSupportActionBar(mToolbar);  
   }  

And let's add DrawerLayout to our layout just below the Toolbar.

 <android.support.v4.widget.DrawerLayout  
     android:id="@+id/drawerLayout"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"
     android:layout_below="@+id/appBar">  
     <!--Content-->  
     <LinearLayout  
       android:layout_width="match_parent"  
       android:layout_height="match_parent"  
       android:orientation="vertical">  
       <TextView  
         android:id="@+id/textView"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:layout_gravity="center"  
         android:text="@string/app_name" />  
     </LinearLayout>  
     <!-- Navigation Drawer-->  
     <android.support.v7.widget.RecyclerView  
       android:id="@+id/drawerRecyclerView"  
       android:layout_width="300dp"  
       android:layout_height="match_parent"  
       android:layout_gravity="left"  
       android:background="#ffffff">  
     </android.support.v7.widget.RecyclerView>  
   </android.support.v4.widget.DrawerLayout> 

In the code above, we used a LinearLayout for the content  and placed a TextView as a page content for now. Then  added Recyclerview for our Navigation Drawer. Now lets set up our recyclerview.


If you notice, Recycler view has an attribute layout_gravity="left" in our code above. Doing this will setup the drawer on the left.


Now, it's time to setup the menu in our navigation drawer, for that let's create a model with an icon and menu title.

public class DrawerItem {  
   private int icon;  
   private String title;  
   public int getIcon() {  
     return icon;  
   }  
   public void setIcon(int icon) {  
     this.icon = icon;  
   }  
   public String getTitle() {  
     return title;  
   }  
   public void setTitle(String title) {  
     this.title = title;  
   }  
 }  

Similarly, create a layout for each menu item. Like this model we just created, the item layout will have an ImageView for icon and a TextView for title.

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:orientation="horizontal" android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:padding="16dp"  
   android:background="?attr/selectableItemBackground">  
   <ImageView  
     android:id="@+id/icon"  
     android:layout_width="24dp"  
     android:layout_height="24dp" />  
   <TextView  
     android:id="@+id/title"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:layout_marginLeft="16dp"/>  
 </LinearLayout>

And, add icons to the project, for now let's use mdpi icons only, DOWNLOAD ICONS FROM HERE.


If you remember from our previous tutorial we need following steps for RecyclerView Setup. (Please follow this tutorial for detailed instructions.)

1. Preparing Menu items
2. Setting up adapter for recyclerview.
     - create viewholder
    - implement three methods.
3. Set layout manager and adapter

Now let's write an Adapter for this recyclerView. Following the above 3 steps our adapter class looks like this.

public class DrawerAdapter extends RecyclerView.Adapter<DrawerAdapter.DrawerViewHolder> {  
   private ArrayList<DrawerItem> drawerMenuList;  
   public DrawerAdapter(ArrayList<DrawerItem> drawerMenuList) {  
     this.drawerMenuList = drawerMenuList;  
   }  
   @Override  
   public DrawerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  
     View view;  
     view = LayoutInflater.from(parent.getContext()).inflate(R.layout.menu_item, parent, false);  
     return new DrawerViewHolder(view);  
   }  
   @Override  
   public void onBindViewHolder(DrawerViewHolder holder, int position) {  
     holder.title.setText(drawerMenuList.get(position).getTitle());  
     holder.icon.setImageResource(drawerMenuList.get(position).getIcon());  
   }  
   @Override  
   public int getItemCount() {  
     return drawerMenuList.size();  
   }  
   class DrawerViewHolder extends RecyclerView.ViewHolder {  
     TextView title;  
     ImageView icon;  
     public DrawerViewHolder(View itemView) {  
       super(itemView);  
       title = (TextView) itemView.findViewById(R.id.title);  
       icon = (ImageView) itemView.findViewById(R.id.icon);  
     }  
   }  
 }  

We will also need the data for our menu, We can use arrays for String and integers and separate them from MainActivity in production code but for now let's just keep it in MainActivity.

//Dummy Data  
     mDrawerItemList = new ArrayList<DrawerItem>();  
     DrawerItem item = new DrawerItem();  
     item.setIcon(R.drawable.inbox);  
     item.setTitle("Inbox");  
     mDrawerItemList.add(item);  
     DrawerItem item2 = new DrawerItem();  
     item2.setIcon(R.drawable.send);  
     item2.setTitle("Send");  
     mDrawerItemList.add(item2);  

Setup RecyclerView with LayoutManager and Adapter in MainActivity.

 DrawerAdapter adapter = new DrawerAdapter(mDrawerItemList);  
     mRecyclerView.setLayoutManager(new LinearLayoutManager(this));  
     mRecyclerView.setAdapter(adapter);  

Now run the app. Navigation drawer can now be opened by dragging from left edge of the screen.

But this is not what we want. We want a toggle for navigation drawer using home icon. For this let's use ActionbarDrawerToggle from support v7 library.

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close) {  
       @Override  
       public void onDrawerClosed(View drawerView) {  
         super.onDrawerClosed(drawerView);  
         //TODO Add some action here  
         //Executed when drawer closes  
         Toast.makeText(MainActivity.this, "Closed", Toast.LENGTH_SHORT).show();  
       }  
       @Override  
       public void onDrawerOpened(View drawerView) {  
         super.onDrawerOpened(drawerView);  
         //TODO Add some action here  
         //executes when drawer open  
         Toast.makeText(MainActivity.this, "Opened", Toast.LENGTH_SHORT).show();  
       }  
     };  
     mDrawerLayout.setDrawerListener(mDrawerToggle);  
     mDrawerToggle.syncState();  

Let's run the app again. Now we can toggle drawer with  nice animation on home icon.

Now we have a drawer but we haven't yet added header to the drawer. And when we click the menu items, nothing happens yet.

Let's Continue to Part -2 of the tutorial for Adding Header and setting up Click events to menu items.