Introduction

A Navigation Drawer is a panel that appears when the user swipes from the left edge of the screen. We use fragments to make this. The panel that appears can contain a list, which when clicked loads a new fragment activity.
In this article, we will create a simple Navigation Drawer with four fragments. I have added images in these fragments. You can add whatever you want, like TextView, ListView etcetera.
Step 1
The "strings.xml" used are:
  1. <resources>
  2. <string name="app_name">NavigationDrawerNew</string>
  3. <string name="action_settings">Settings</string>
  4. <string name="hello_world">Hello world!</string>
  5. <string name="open">List</string>
  6. <string name="close">Main Page</string>
  7. </resources>
Step 2
Open "activity_main" and add the following code to it:
  1. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:id="@+id/drawer_layout"
  4. android:layout_width="400dp"
  5. android:layout_height="600dp"
  6. tools:context=".MainActivity"
  7. android:background="#beb6ac"
  8. >
  9. <FrameLayout
  10. android:id="@+id/main"
  11. android:layout_width="match_parent"
  12. android:layout_height="match_parent" >
  13. </FrameLayout>
  15. <ListView
  16. android:id="@+id/drawer"
  17. android:layout_width="240dp"
  18. android:layout_height="match_parent"
  19. android:layout_gravity="start"
  20. android:background="#454545"
  21. android:choiceMode="singleChoice"/>
  23. </android.support.v4.widget.DrawerLayout>
The layout looks like:
im1.jpg
DrawerLayout acts as a top-level container for window content that allows for interactive "drawer" views to be pulled out from the edge of the window.
Note that you need to provide exact layout_height and layout_width in DrawerLayout (in dp). Giving "match_parent" etcetera will give you a rendering error.
Step 3
Let us now make a layout file for the first fragment.
Right-click on the layout then select "New" -> "Layout resource file". Name this file as "first_fragment_layout" and add the following to it:
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:orientation="vertical"
  5. >
  6. <ImageView
  7. android:id="@+id/textView1"
  8. android:layout_width="800dp"
  9. android:layout_height="800dp"
  10. android:src="@drawable/one"
  11. android:layout_marginTop="20dp"
  12. android:layout_marginLeft="50dp"
  13. android:layout_marginRight="30dp"
  14. />
  16. </RelativeLayout>
The layout looks like:
im2.jpg
Step 4
This describes the layout file for the second fragment.
Right-click on the layout then select "New" -> "Layout resource file". Name this file as "second_fragment_layout" and add the following to it:
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:orientation="vertical" >
  5. <ImageView
  6. android:id="@+id/textView1"
  7. android:layout_width="800dp"
  8. android:layout_height="800dp"
  9. android:src="@drawable/two"
  10. android:layout_marginTop="20dp"
  11. android:layout_marginLeft="50dp"
  12. android:layout_marginRight="30dp"
  13. />
  14. </RelativeLayout>
The layout looks like:
im3.jpg
Step 5
This describes the layout file for the third fragment.
Right-click on the layout then select "New" -> "Layout resource file". Name this file as "third_fragment_layout" and add the following to it:
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:orientation="vertical" >
  5. <ImageView
  6. android:id="@+id/textView1"
  7. android:layout_width="800dp"
  8. android:layout_height="800dp"
  9. android:src="@drawable/three"
  10. android:layout_marginTop="20dp"
  11. android:layout_marginLeft="50dp"
  12. android:layout_marginRight="30dp"
  13. />
  14. </RelativeLayout>
The layout looks like:
im4.jpg
Step 6
This describes the Java class for the first fragment.
Right-click on your package name then select "New" -> "Java class". Name it as "FirstFragment" and add the following code to it:
  1. package com.chhavi.navigationdrawernew;
  3. import android.content.Context;
  4. import android.os.Bundle;
  5. import android.support.v4.app.Fragment;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  10. public class FirstFragment extends Fragment {
  11. public static Fragment newInstance(Context context) {
  12. FirstFragment frag = new FirstFragment();
  13. return frag;
  14. }
  16. @Override
  17. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  19. ViewGroup root = (ViewGroup) inflater.inflate(R.layout.first_fragment_layout, null);
  20. return root;
  21. }
  22. }
Step 7
This describes the Java class for the second fragment.
Right-click on your package name then select "New" -> "Java class". Name it as "SecondFragment" and add the following code to it:
  1. package com.chhavi.navigationdrawernew;
  3. import android.content.Context;
  4. import android.os.Bundle;
  5. import android.support.v4.app.Fragment;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  10. public class SecondFragment extends Fragment {
  12. public static Fragment newInstance(Context context) {
  13. SecondFragment frag = new SecondFragment();
  14. return frag;
  15. }
  16. @Override
  17. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  19. ViewGroup root = (ViewGroup) inflater.inflate(R.layout.second_fragment_layout, null);
  20. return root;
  21. }
  22. }
Step 8
This describes the Java class for the third fragment.
Right-click on your package name then select "New" -> "Java class". Name it as "ThirdFragment" and add the following code to it:
  1. package com.chhavi.navigationdrawernew;
  3. import android.content.Context;
  4. import android.os.Bundle;
  5. import android.support.v4.app.Fragment;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  10. public class ThirdFragment extends Fragment {
  12. public static Fragment newInstance(Context context) {
  13. ThirdFragment f = new ThirdFragment();
  14. return f;
  15. }
  17. @Override
  18. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  19. //return super.onCreateView(inflater, container, savedInstanceState);
  20. ViewGroup root = (ViewGroup) inflater.inflate(R.layout.third_fragment_layout, null);
  21. return root;
  22. }
  23. }
Step 9
For returning to the main page again.
Right-click on your package name then select "New" -> "Java class". Name it as "MainPageFragment" and add the following code to it:
  1. package com.chhavi.navigationdrawernew;
  3. import android.content.Context;
  4. import android.os.Bundle;
  5. import android.support.v4.app.Fragment;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  10. public class MainPageFragment extends Fragment {
  11. public static Fragment newInstance(Context context) {
  12. MainPageFragment frag = new MainPageFragment();
  13. return frag;
  14. }
  16. @Override
  17. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  18. //return super.onCreateView(inflater, container, savedInstanceState);
  19. ViewGroup root = (ViewGroup) inflater.inflate(R.layout.activity_main, null);
  20. return root;
  21. }
  22. }
Step 10
Open "MainActivity.java" and add the following code to it:
  1. package com.chhavi.navigationdrawernew;
  3. import android.app.ActionBar;
  4. import android.os.Bundle;
  5. import android.app.Activity;
  6. import android.support.v4.app.ActionBarDrawerToggle;
  7. import android.support.v4.app.Fragment;
  8. import android.support.v4.app.FragmentActivity;
  9. import android.support.v4.app.FragmentTransaction;
  10. import android.support.v4.widget.DrawerLayout;
  11. import android.view.Menu;
  12. import android.view.MenuItem;
  13. import android.view.View;
  14. import android.widget.AdapterView;
  15. import android.widget.ArrayAdapter;
  16. import android.widget.ListView;
  18. public class MainActivity extends FragmentActivity {
  20. ActionBarDrawerToggle icon;
  21. final String[] listContent ={"Fragment One","Fragment Two","Fragment Three","Main Page"};
  22. final String[] fragments ={
  23. "com.chhavi.navigationdrawernew.FirstFragment",
  24. "com.chhavi.navigationdrawernew.SecondFragment",
  25. "com.chhavi.navigationdrawernew.ThirdFragment",
  26. "com.chhavi.navigationdrawernew.MainPageFragment"};
  28. @Override
  29. protected void onCreate(Bundle savedInstanceState) {
  30. super.onCreate(savedInstanceState);
  31. setContentView(R.layout.activity_main);
  33. ArrayAdapter<String> ad = new ArrayAdapter<String>(getActionBar().getThemedContext(), android.R.layout.simple_list_item_1, listContent);
  35. final DrawerLayout drawer = (DrawerLayout)findViewById(R.id.drawer_layout);
  36. final ListView list = (ListView) findViewById(R.id.drawer);
  37. list.setAdapter(ad);
  38. list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
  39. @Override
  40. public void onItemClick(AdapterView<?> parent, View view, final int position, long id) {
  41. drawer.setDrawerListener( new DrawerLayout.SimpleDrawerListener(){
  42. @Override
  43. public void onDrawerClosed(View drawerView){
  44. super.onDrawerClosed(drawerView);
  45. FragmentTransaction transition = getSupportFragmentManager().beginTransaction();
  46. transition.replace(R.id.main, Fragment.instantiate(MainActivity.this, fragments[position]));
  47. transition.commit();
  48. }
  49. });
  50. drawer.closeDrawer(list);
  51. }
  52. });
  53. }
  55. @Override
  56. public boolean onCreateOptionsMenu(Menu menu) {
  57. // Inflate the menu; this adds items to the action bar if it is present.
  58. getMenuInflater().inflate(R.menu.main, menu);
  59. return true;
  61. }
  62. }
Output snapshots
First screen:
im5.jpg
On swiping:
im6.jpg
Selecting fragment one:
im7.jpg
Selecting fragment two:
im8.jpg
Selecting fragment three:
im9.jpg
Thank you..... Enjoy coding :)