How to create a navigation drawer in your app.

There are moments in an app where in order to get to that page you want to get to you would have to travel through multiple buttons just to get there.  In this day and age you want to get there instantly and easily with the least amount of work as possible.  This is what the navigation drawer is for.  This will speed up your travels through an app to only one button click!

The navigation drawer is a panel that transitions in from the left edge of the screen and displays the app’s main navigation options. – Android Developer

These websites will help in understanding what I am showing you:

https://developer.android.com/design/patterns/navigation-drawer.html

http://developer.android.com/training/implementing-navigation/nav-drawer.html

I will be using Eclipse to demonstrate this tutorial and will for simplicity I have called:

Project - tutorialNavigationDrawer

Main Class - MainDrawer.java

Main Layout – main_drawer.xml

The first step is to change the original Relative Layout to

<android.support.v4.widget.DrawerLayout>

There will also be a Frame layout that will hold the content and a listview which will be the navigation drawer.  This should all look like this:


<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 -->
 <FrameLayout
 android:id="@+id/content_frame"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />
<!-- The navigation drawer -->
 <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="#ffffff"/>
</android.support.v4.widget.DrawerLayout>

Make sure not to forget the background color for the List view or else the list view will blend in to the background of the activity.  Next we will create the layout for when a menu item is clicked but in order to do that we must create another xml file.  I have named mine menu_fragment.  This can be anything you wish but for this tutorial it will be a simple linear layout with a single text view.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:gravity="center"
 android:background="#000000">
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textSize="40dp"
 android:textColor="#ffffff"
 android:layout_gravity="center"
 android:id="@+id/detail"/>

</LinearLayout>

Next we will create the fragment that will be used whenever an item is chosen.  This will change the text in out text view in menu_fragment.  We will need t create a new class which i have named MenuFragment.  You will need to extend Fragment.


import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MenuFragment extends Fragment {

 TextView text;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle args) {
View view = inflater.inflate(R.layout.menu_fragment, container, false);
//menu contains the sting that was passed from MainDrawer
String menu = getArguments().getString("Menu");
text= (TextView) view.findViewById(R.id.detail);
text.setText(menu);
return view;
}
}

Normally now would be the time to head to the manifest file and add permissions, but we don’t need to ask for any so we can skip that step.  Now on to the main activity (MainDrawer).  You will need to first fill in the list view and then when an item is pressed bundle that string over to the fragment.


import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class MainDrawer extends Activity { //start of MainDrawer Class

String[] menu;
DrawerLayout dLayout;
ListView dList;
ArrayAdapter<String> adapter;

@Override
protected void onCreate(Bundle savedInstanceState) { //start of OnCreate
super.onCreate(savedInstanceState);
setContentView(R.layout.main_drawer);
//populate the string array
menu = new String[]{"Home","DownTown","UpTown","ChinaTown","LeftTown","TokyoTown","RightTown","CenterVille"};
dLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
dList = (ListView) findViewById(R.id.left_drawer);
//populate list view with the contents of the string array
adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,menu);
dList.setAdapter(adapter);
dList.setSelector(android.R.color.holo_blue_dark);

dList.setOnItemClickListener(new OnItemClickListener(){
@Override
public void onItemClick(AdapterView<?> arg0, View v, int position, long id) {
//Close all currently open drawer views by animating them out of view.
dLayout.closeDrawers();
Bundle args = new Bundle();
//Pass the item name on to the fragment
args.putString("Menu", menu[position]);
Fragment detail = new MenuFragment();
detail.setArguments(args);
FragmentManager fragmentManager = getFragmentManager();
fragmentManager.beginTransaction().replace(R.id.content_frame, detail).commit();
}
});
} //end of OnCreate

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main_drawer, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
} //end of MainDrawer Class

If you followed these instructions you now have a working navigation Drawer.  Explore the possibilities and have fun with your new abilities.