Navigation Drawer in Android Studio

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>  
  14.    
  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"/>  
  22.    
  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.             />  
  15.    
  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;  
  2.    
  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;  
  9.    
  10. public class FirstFragment extends Fragment {  
  11.     public static Fragment newInstance(Context context) {  
  12.         FirstFragment frag = new FirstFragment();  
  13.         return frag;  
  14.     }  
  15.    
  16.     @Override  
  17.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  
  18.    
  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;  
  2.    
  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;  
  9.    
  10. public class SecondFragment extends Fragment {  
  11.    
  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) {  
  18.    
  19.         ViewGroup root = (ViewGroup) inflater.inflate(R.layout.second_fragment_layout, null);  
  20.         return root;  
  21.     }  
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;  
  2.    
  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;  
  9.    
  10. public class ThirdFragment extends Fragment {  
  11.    
  12.     public static Fragment newInstance(Context context) {  
  13.         ThirdFragment f = new ThirdFragment();  
  14.         return f;  
  15.     }  
  16.    
  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.     }  
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;  
  2.    
  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;  
  9.    
  10. public class MainPageFragment extends Fragment {  
  11.     public static Fragment newInstance(Context context) {  
  12.         MainPageFragment frag = new MainPageFragment();  
  13.         return frag;  
  14.     }  
  15.    
  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.     }  
Step 10
 
Open "MainActivity.java" and add the following code to it:
  1. package com.chhavi.navigationdrawernew;  
  2.    
  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;  
  17.    
  18. public class MainActivity extends FragmentActivity {  
  19.    
  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"};  
  27.    
  28.     @Override  
  29.     protected void onCreate(Bundle savedInstanceState) {  
  30.         super.onCreate(savedInstanceState);  
  31.         setContentView(R.layout.activity_main);  
  32.    
  33.         ArrayAdapter<String> ad = new ArrayAdapter<String>(getActionBar().getThemedContext(), android.R.layout.simple_list_item_1, listContent);  
  34.    
  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.     }  
  54.    
  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;  
  60.    
  61.     }  
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 :)


Similar Articles