Navigation Drawer In Android

The navigation drawer is a panel that displays the app’s main navigation options on the left edge of the screen. It is hidden most of the time, but is revealed when the user swipes a finger from the left edge of the screen or, while at the top level of the app, the user touches the app icon in the action bar.

Before we implement the Navigation Drawer for our application, we should understand the basic concepts of it and its design guidelines. You can find detailed information here >>

https://www.google.com/design/spec/patterns/navigation-drawer.html# << Design Guidelines
https://developer.android.com/training/implementing-navigation/nav-drawer.html << Implementation of Navigation Drawer

To implement the navigation drawer, you first need to create the project.

Create a project with dependencies under the build.gradle file for your app module. Before, navigation drawer was applied to 4.0 or above versions only, but using support library you can implement the Navigation drawer even on older versions. Add the following dependencies in your project.

compile 'com.android.support:appcompat-v7:21.0.3'
 //version should be lastest or matching with your Target API

Understanding the Navigation Drawer Layout

Important things to remember about Navigation Drawer :

Navigation drawer always have two elements.
First view element will work as the Main Content View.
Second view element will work as Drawer Area (area that you can swipe and appears)

When you are implementing your Navigation drawer , you should first consider and put the view according to the requirement in your project.

To add a navigation drawer, declare your user interface with a DrawerLayout object as the root view of your layout. In another words, Wrap your whole content view under the DrawerLayout as shown in the example below. Inside the DrawerLayout, add one view that contains the main content for the screen (your primary layout when the drawer is hidden) and another view that contains the content of navigation drawer.

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    

    <!-- The main content view : This is the view which would we see in the main content.-->
    <!-- Also, you can add any View element in this section such as LinearLayout, RelativeLayout etc.-->

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
   <!-- It is not mandatory to use the FrameLayout as your main content. It could be any view but the first added view would be treated as main content view and second would be drawer view--> 

    <!-- The navigation drawer -- This part would be seen in Drawer area. -->
 <!-- Also, you can add any View element in this section such as LinearLayout, RelativeLayout etc.-->

   <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"/>
</android.support.v4.widget.DrawerLayout>

The two main parts of Navigation drawer can be explained very well using below image,

Here, as shown in the above code, you can see, first view element will act as MainLayout (which you can see always) , and second view will appear when you swipe (which is navigation drawer).

This layout demonstrates some important layout characteristics :

The main content view (the FrameLayout above) must be the first child in the DrawerLayout because the XML order implies z-ordering and the drawer must be on top of the content.
The main content view is set to match_parent for width and height, because it represents the entire UI when the navigation drawer is hidden.
The Drawer view (the ListView in above example, and you are free to use any view as navigation drawer eg. Fragment, Relativelayout, LinearLayout etc.) must specify its horizontal gravity with the android:layout_gravity attribute. To support right-to-left (RTL) languages, specify the value with "start" instead of "left" (so the drawer appears on the right when the layout is RTL).
The drawer view specifies its width in dp units and the height matches the parent view. The drawer width should be no more than 320dp so the user can always see a portion of the main content.

Example for Implementing Navigation Drawer

First of all, Create blank project with your main activity.

Your MainActivity class would have the main_layout.xml file which would render the view of this activity.

OnCreate() method would have setContentView() which is must. That would decide your first step to render the drawer and main layout.

in this case, its activity_main.xml layout file. It has two views, one would act as parent view and second as the drawer view as explained above.

Toolbar is the class to create an appbar which is the latest way to implement actionbar in Material Design by google.

public class MainActivity extends ActionBarActivity {
 Toolbar toolbar;
 
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  
  setContentView(R.layout.activity_main); // to render two views 1. Main view 2. Drawer view
  
  toolbar = (Toolbar) findViewById(R.id.app_toolbar);
  
  setSupportActionBar(toolbar);
  
  Profile profile = (Profile) getSupportFragmentManager().findFragmentById(R.id.profileFragmentInMain);
  profile.setUp((DrawerLayout) findViewById(R.id.drawer),toolbar);
 }
 
 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  return super.onOptionsItemSelected(item);
 }

This is all you need in MainActivity.java to implement Drawer in your app. Lets add missing parts of the app. In our case, we are using Fragment, as Drawer view.

Fragment which will act as drawer. Profile class extends with class Fragment (which makes it Fragment view). To render the view for Fragment, onCreateView() method is used.

This method provides the layout file to render on drawer.

If you look into the xml layout file of MainActivity, you will see the fragment with profile as it's id, which is indicated here to attach it to the profile class. I will post xml files of this project below after coding part.

View view = inflater.inflate(R.layout.profile, container, false);

You can implement this as follows : Create a new class naming it Profile.java and extends it with Fragment.

public class Profile extends Fragment {
  
  ActionBarDrawerToggle drawerToggle;
  DrawerLayout mDrawerLayout;

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   View view = inflater.inflate(R.layout.profile, container, false);
   return view;
   }

  public void setUp(DrawerLayout drawerLayout, Toolbar toolbar) {
   mDrawerLayout = drawerLayout;
   drawerToggle = new ActionBarDrawerToggle(getActivity(), drawerLayout, toolbar, R.string.open, R.string.close){

   @Override
   public void onDrawerOpened(View drawerView) {
    super.onDrawerOpened(drawerView);
    getActivity().invalidateOptionsMenu();
   }
   
   @Override
   public void onDrawerClosed(View drawerView) {
    super.onDrawerClosed(drawerView);
    getActivity().invalidateOptionsMenu();
   }};

   mDrawerLayout.setDrawerListener(drawerToggle);
   mDrawerLayout.post(new Runnable(){

   @Override
   public void run(){
    drawerToggle.syncState();
   }
  });
 }
}

ActionBarDrawerToggle : This class ties together the functionality of DrawerLayout and the framework Actionbar to implement the recommended design for navigation drawers. Call syncState() from your activity's on onPostCreate or in runnable interface as above specified to synchronize the indicator with the state of the linked DrawerLayout. This composes the Hamburger icon which would animate during open and closing action of drawers.

For more information on this visit here : https://developer.android.com/reference/android/support/v7/app/ActionBarDrawerToggle.html

Now, that we have done all the coding part, lets create screen. Meaning, lets define its views and define how would it look like on screen. It is called, layouts in android. which is .xml file.

Layouts defines the views for your application. Whatever you see on the screen of mobile phones in app whether its a button, checkbox, radiobox, even full screen of app, is defined in layouts. So lets get started..

DrawerLayout : android.support.v4.widget.DrawerLayout act as top level window content that allows for interactive "drawer" views to be pulled out from the edge of the window. The drawer positioning and layout is controlled using the android:layout_gravity attribute. To use the DrawerLayout, position your primary content as the first child with a width and height of match_parent (ie, Main View). Add drawers as child view after the main content view and set the layout_gravity as you want. Drawers commonly use match_parent for height with a fixed width.

DrawerLayout.DrawerListener is used to monitor the state and motion of drawer views.

the layout file for activity_main.xml will be as follows :

  <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:id="@+id/drawer"
android:layout_height="match_parent" >


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <include
        android:id="@+id/app_toolbar"
        layout="@layout/toolbar"/>
</LinearLayout>

<fragment
    android:id="@+id/profileFragmentInMain"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:layout="@layout/profile"
    android:name="com.example.ajay.myapplication.Profile"
    tools:layout="@layout/profile"/>

</android.support.v4.widget.DrawerLayout>

This file, has two views.
1. LinearLayout - which will be seen on main screen.
2. Child layout as Fragment - which will appear when you slide from right or left depending on layout_gravity property.

Inside LinearLayout of this above file, there is also nested element. Which is used for ActionBar, which is also known as App Bar. If you have included this, you must give its implementation. You can do it as follows : toolbar.xml (you can give any name, but since include element has specified name id with toolbar, you have to have file with that name.)

<?xml version="1.0" encoding="utf-8"?>
</android>

Now, Fragment has to have its view file. So, it can render the view on app. I have given its name profile.xml which is implemented as follows :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:theme="@android:style/Theme.Holo.Light.DialogWhenLarge.NoActionBar">

</LinearLayout>

The output of this program : Here you will not see the different between open drawer and closed drawer but, you can change the color of Navigation Drawer to see the difference. Here you can also see that Hamburger Icon is working perfectly.

this screen is what we defined in activity_main.xml