{"id":70,"date":"2016-12-23T07:05:38","date_gmt":"2016-12-23T07:05:38","guid":{"rendered":"http:\/\/abhiandroid.com\/materialdesign\/?page_id=70"},"modified":"2019-06-14T12:41:41","modified_gmt":"2019-06-14T12:41:41","slug":"navigation-drawer","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/materialdesign\/navigation-drawer","title":{"rendered":"Navigation Drawer and Drawer Layout Tutorial With Example In Android Studio"},"content":{"rendered":"<p>In Android, Navigation Drawer is a panel that displays App&#8217;s Navigation option from the left edge of the screen. It is one of the most important and useful UI pattern introduced by the Google for developing Android app.Navigation drawer\u00a0is a side menu that helps us to organise the navigation inside our app. It is a uniform way to access different pages and information inside our app. It is hidden most of the time but is revealed when we swipes from left edge of the screen or whenever we click on menu\/app icon in the action bar.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-142\" src=\"\/materialdesign\/wp-content\/uploads\/2016\/12\/Navigation-Drawer-In-Android.gif\" alt=\"navigation drawer in android\" width=\"191\" height=\"290\" \/><\/p>\n<hr \/>\n<h4><strong>Need of Navigation Drawer:<\/strong><\/h4>\n<p>We might have noticed that lot of our Android Applications introduced a sliding panel menu for navigating between major modules of our application. This kind of UI was done by using third party libraries where a ListView and swiping gestures used to achieve this type of UI. But now Android itself officially introduced sliding panel menu by introducing a newer concept called\u00a0Navigation Drawer. In Navigation Drawer we combine \u00a0NavigationView\u00a0and DrawerLayout\u00a0 to achieve the desired output.<\/p>\n<h4><strong>Drawer Layout In Android:<\/strong><\/h4>\n<p>In Android, DrawerLayout acts as top level container for window content that allows for interactive &#8220;drawer&#8221; views to be pulled out from one or both vertical edges of the window. Drawer position and layout is controlled by using layout_gravity attribute on child views corresponding to which side of view we want the drawer to emerge from like left to right.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-148\" src=\"\/materialdesign\/wp-content\/uploads\/2016\/12\/Navigation-Drawer-In-Android-Studio-1.jpg\" alt=\"navigation drawer in android-studio\" width=\"230\" height=\"411\" srcset=\"https:\/\/abhiandroid.com\/materialdesign\/wp-content\/uploads\/2016\/12\/Navigation-Drawer-In-Android-Studio-1.jpg 230w, https:\/\/abhiandroid.com\/materialdesign\/wp-content\/uploads\/2016\/12\/Navigation-Drawer-In-Android-Studio-1-168x300.jpg 168w\" sizes=\"auto, (max-width: 230px) 100vw, 230px\" \/><\/p>\n<h4><strong>Basic Drawer Layout XML Code<\/strong><\/h4>\n<p>For adding a Navigation Drawer, declare your UI(user interface) with a\u00a0DrawerLayout\u00a0object as the root(parent) view of your layout. Inside this \u00a0DrawerLayout add one view that contains the main content of the screen means primary layout that displays when the drawer is hidden and other view that contains the contents for the navigation drawer.<\/p>\n<pre>&lt;android.support.v4.widget.DrawerLayout\r\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:id=\"@+id\/drawer_layout\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"&gt;\r\n    &lt;!-- The main content view displays when the drawer is hidden --&gt;\r\n    &lt;FrameLayout\r\n        android:id=\"@+id\/content_frame\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\" \/&gt;\r\n\r\n    &lt;!-- The navigation drawer --&gt;\r\n    &lt;android.support.design.widget.NavigationView\r\n  android:id=\"@+id\/navigation\"\r\n  android:layout_width=\"wrap_content\"\r\n  android:layout_height=\"match_parent\"\r\n  android:layout_gravity=\"start\"\r\n  app:menu=\"@menu\/nav_items\"\/&gt;\r\n\r\n&lt;\/android.support.v4.widget.DrawerLayout&gt;\r\n\r\n\r\n<\/pre>\n<p>In above code snippet DrawerLayout is the root view of our Layout in which we have other layouts and content.<\/p>\n<p>FrameLayout is used to hold the page content shown through different fragments.<br \/>\nThe NavigationView is the \u201creal\u201d menu of our app. The menu items are written in nav_items file.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>Important Methods Of Drawer Layout<\/strong><\/h4>\n<p>Let\u2019s we discuss some important methods of Navigation Drawer that may be called in order to manage the Navigation Drawer.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #008000;\"><strong>1. closeDrawer(int gravity):<\/strong> <\/span>This method is used to close the drawer view by animating it into view. We can close a drawer by passing END gravity to this method.<\/p>\n<p>Below we show how to close the drawer view. We can close a drawer on any click or other event of view.<\/p>\n<pre>DrawerLayout\r\ndLayout = (DrawerLayout) findViewById(R.id.drawer_layout);\r\n\/\/ initiate a DrawerLayout\r\ndLayout.closeDrawer(GravityCompat.END);\r\n\/\/ close a Drawer<\/pre>\n<p>&nbsp;<\/p>\n<p><strong><span style=\"color: #008000;\">2. closeDrawers():<\/span><\/strong> This method is used to close all the currently open drawer views by animating them out of view. We mainly use this method on click of any item of Navigation View.<\/p>\n<p>Below we close all the currently open drawer views.<\/p>\n<pre>DrawerLayout\r\ndLayout = (DrawerLayout) findViewById(R.id.drawer_layout);\r\n\/\/ initiate a DrawerLayout\r\ndLayout.closeDrawers();\r\n\/\/ close all the Drawers\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong><span style=\"color: #008000;\">3. isDrawerOpen(int drawerGravity):<\/span> <\/strong>This method is used to check the drawer view is currently open or not. It returns true if the drawer view is open otherwise it returns false.<\/p>\n<p>Below we check DrawerLayout is open or not. It returns true or false value.<\/p>\n<pre>DrawerLayout\r\ndLayout = (DrawerLayout)\r\nfindViewById(R.id.drawer_layout);\r\n\/\/ initiate a DrawerLayout\r\nBoolean\r\nisOpen = dLayout.isDrawerOpen(GravityCompat.END);\r\n\/\/ check DrawerLayout view is open or not<\/pre>\n<p>&nbsp;<\/p>\n<p><strong><span style=\"color: #008000;\">4. isDrawerVisible(int drawerGravity):<\/span> <\/strong>This method is used to check the drawer view is currently visible on screen or not. It returns true if the drawer view is visible otherwise it returns false.<\/p>\n<p>Below we check DrawerLayout is visible or not. It returns true or false value.<\/p>\n<pre>DrawerLayout\r\ndLayout = (DrawerLayout) findViewById(R.id.drawer_layout);\r\n\/\/ initiate a DrawerLayout\r\nBoolean\r\nisVisible = dLayout.isDrawerVisible(GravityCompat.END);\r\n\/\/ check DrawerLayout view is visible or\r\nnot<\/pre>\n<p>&nbsp;<\/p>\n<p><strong><span style=\"color: #008000;\">5. openDrawer(int gravity):<\/span><\/strong> This method is used to open the drawer view by animating it into view. We can open a Drawer by passing START gravity to this method.<br \/>\nBelow we show how to open a Drawer Layout view. We can open a drawer on any click or other event of view.<\/p>\n<pre>DrawerLayout\r\ndLayout = (DrawerLayout)\r\nfindViewById(R.id.drawer_layout);\r\n\/\/ initiate a DrawerLayout\r\ndLayout.openDrawer(GravityCompat.START);\r\n\/\/ open a Drawer<\/pre>\n<hr \/>\n<h4><strong>Navigation View:<\/strong><\/h4>\n<p>In Android, Navigation View represents a standard navigation menu for our application. The menu contents can be populated by a menu resource file.<\/p>\n<h4><strong>Important Methods Of Navigation View:<\/strong><\/h4>\n<p>Let\u2019s we discuss some important methods of Navigation View that may be called in order to manage the Navigation View.<\/p>\n<p>&nbsp;<\/p>\n<p><strong><span style=\"color: #008000;\">1.setNavigationItemSelectedListener(NavigationView.OnNavigationItemSelectedListener listener):<\/span> <\/strong>This method is used to set a listener that will be notified when a menu item is selected.<br \/>\nBelow we shows the code how to use this listener.<\/p>\n<pre>NavigationView navView = (NavigationView) findViewById(R.id.navigation); \/\/ initiate a Navigation View\r\n\/\/ implement setNavigationSelectedListener event\r\nnavView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {\r\n@Override\r\npublic boolean onNavigationItemSelected(MenuItem menuItem) {\r\n\r\n\/\/ add code here what you need on click of items.\r\nreturn false;\r\n}\r\n});<\/pre>\n<p>&nbsp;<\/p>\n<p><strong><span style=\"color: #008000;\">2. setItemBackground(Drawable itemBackground):<\/span> <\/strong>This method is used to set the resource in the background of the menu item. In this method we pass the drawable object for setting background of menu item.<br \/>\nBelow we set the resource in the background of the menu items.<\/p>\n<pre> NavigationView navView = (NavigationView) findViewById(R.id.navigation); \/\/ initiate a Navigation View\r\nnavView.setItemBackground(getResources().getDrawable(R.drawable.background)); \/\/ set a resource in background of menu items.\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong><span style=\"color: #008000;\">3. setItemBackgroundResource(int resId):<\/span> <\/strong>This method is used to set the resource in the background of the menu item. In this method we pass the id of the resource to set in the background of menu item.<br \/>\nBelow we set the resource in the background of the menu items.<\/p>\n<pre>NavigationView navView = (NavigationView) findViewById(R.id.navigation); \/\/ initiate a Navigation View\r\nnavView.setItemBackgroundResource(R.drawable.background); \/\/ set a resource in background of menu items.\r\n<\/pre>\n<p>From XML: We can also set the background of menu items from our xml file in which we define NavigationView.<br \/>\nBelow we set the resource in the background of menu items.<\/p>\n<pre>&lt;android.support.design.widget.NavigationView\r\n    android:id=\"@+id\/navigation\"\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"match_parent\"\r\n    android:layout_gravity=\"start\"\r\n    app:itemBackground=\"@drawable\/background\"\r\n    app:menu=\"@menu\/nav_items\" \/&gt;&lt;!-- background resource for menu items --&gt;\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong><span style=\"color: #008000;\">4. getItemBackground():<\/span> <\/strong>This method returns the background drawable for our menu items.<\/p>\n<p>Below we firstly set a resource in the background of menu items and then get the same drawable.<\/p>\n<pre>NavigationView navView = (NavigationView) findViewById(R.id.navigation); \/\/ initiate a Navigation View\r\nnavView.setItemBackground(getResources().getDrawable(R.drawable.background)); \/\/ set a resource in background of menu items.\r\nDrawable backgroundDrawable=navView.getItemBackground(); \/\/ get the background drawable\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h4><strong>Navigation Drawer Example in Android Studio:<\/strong><\/h4>\n<p>Below is the example of Navigation Drawer in which we display App&#8217;s Navigation option from left edge of the screen. In this example we use Drawer Layout and Navigation View in our XML file. Drawer Layout is the root layout in which we define a FrameLayout and a Navigation View. In Navigation View we set the items from menu file and FrameLayout is used to replace the Fragments on the click of menu items. Whenever a user click on menu item, Fragment is replaced according to menu item&#8217;s id and a toast message with menu item title is displayed on the screen. We also create three Fragments that should be replaced on click of menu items.<\/p>\n<p>Below you can download code, see final output and step by step explanation of Navigation drawer example in Android Studio.<\/p>\n<p style=\"text-align: center;\"><a class=\"download\" href=\"http:\/\/www.mediafire.com\/file\/hm0dsiyyzbtbbni\/NavigationDrawerExample.zip\/file\" target=\"_blank\" rel=\"nofollow\">Download Code<\/a><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-151\" src=\"\/materialdesign\/wp-content\/uploads\/2016\/12\/Navigation-Drawer-Example-In-Android-Studio.gif\" alt=\"navigation drawer example in android studio\" width=\"191\" height=\"290\" \/><\/p>\n<p><strong><span style=\"color: #008000;\">Step 1:<\/span><\/strong> Create a new project and name it NavigationDrawerExample.<br \/>\n<strong><span style=\"color: #008000;\">Step 2:<\/span><\/strong> Open Gradle Scripts &gt; build.gradle and add Design support library dependency.<br \/>\napply plugin: &#8216;com.android.application&#8217;<\/p>\n<pre>android {\r\ncompileSdkVersion 24\r\nbuildToolsVersion \"24.0.1\"\r\ndefaultConfig {\r\napplicationId \"abhiandroid.navigationdrawerexample\"\r\nminSdkVersion 15\r\ntargetSdkVersion 24\r\nversionCode 1\r\nversionName \"1.0\"\r\n}\r\nbuildTypes {\r\nrelease {\r\nminifyEnabled false\r\nproguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'\r\n}\r\n}\r\n}\r\ndependencies {\r\ncompile fileTree(dir: 'libs', include: ['*.jar'])\r\ntestCompile 'junit:junit:4.12'\r\ncompile 'com.android.support:appcompat-v7:24.1.1'\r\ncompile 'com.android.support:design:24.1.1' \/\/ design support Library\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong><span style=\"color: #008000;\">Step 3:<\/span><\/strong> Open res -&gt; layout -&gt; activity_main.xml (or) main.xml and add following code:<\/p>\n<p>In this step we define a DrawerLayout that is the parent layout in which we define a FrameLayout and a Navigation View. In Navigation View we set the items from menu file named \u201cnav_items\u201d and FrameLayout is used to replace the Fragments on the click of menu items.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;android.support.v4.widget.DrawerLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:id=\"@+id\/drawer_layout\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:fitsSystemWindows=\"true\"\r\n    tools:context=\".MainActivity\"&gt;\r\n    &lt;LinearLayout\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:orientation=\"vertical\"&gt;\r\n        &lt;!-- Let's add fragment --&gt;\r\n        &lt;FrameLayout\r\n            android:id=\"@+id\/frame\"\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"match_parent\" \/&gt;\r\n    &lt;\/LinearLayout&gt;\r\n    &lt;!--\r\n         Navigation view to show the menu items\r\n    --&gt;\r\n    &lt;android.support.design.widget.NavigationView\r\n        android:id=\"@+id\/navigation\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"match_parent\"\r\n        android:layout_gravity=\"start\"\r\n        app:menu=\"@menu\/nav_items\" \/&gt;\r\n&lt;\/android.support.v4.widget.DrawerLayout&gt;\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #008000;\"><strong>Step 4:<\/strong> <\/span>Open res -&gt; menu -&gt; nav_items.xml and add following code:<\/p>\n<p>In this step we create the three menu items that should be displayed in Drawer.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;menu xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\r\n    &lt;group android:checkableBehavior=\"single\"&gt;\r\n        &lt;!--\r\n                Add menu items here\r\n                Menu items with icon and Title\r\n        --&gt;\r\n        &lt;item\r\n            android:id=\"@+id\/first\"\r\n            android:icon=\"@drawable\/ic_launcher\"\r\n            android:title=\"First Menu\" \/&gt;\r\n        &lt;item\r\n            android:id=\"@+id\/second\"\r\n            android:icon=\"@drawable\/ic_launcher\"\r\n            android:title=\"Second Menu\" \/&gt;\r\n        &lt;item\r\n            android:id=\"@+id\/third\"\r\n            android:icon=\"@drawable\/ic_launcher\"\r\n            android:title=\"Third Menu\" \/&gt;\r\n    &lt;\/group&gt;\r\n&lt;\/menu&gt;\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong><span style=\"color: #008000;\">Step 5:<\/span> <\/strong>Open src -&gt; package -&gt; MainActivity.java<br \/>\nIn this step we open the MainActivity and add the code for initiates the views(DrawerLayout, NavigationView and other views). After that we implement setNavigationItemSelectedListener event on NavigationView so that we can replace the Fragments according to menu item&#8217;s id and a toast message with menu item&#8217;s title is displayed on the screen. I have added comments in code to help you to understand the code easily so make you read the comments.<\/p>\n<pre>package abhiandroid.navigationdrawerexample;\r\nimport android.os.Bundle;\r\nimport android.support.design.widget.NavigationView;\r\nimport android.support.v4.app.Fragment;\r\nimport android.support.v4.app.FragmentTransaction;\r\nimport android.support.v4.widget.DrawerLayout;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.view.MenuItem;\r\nimport android.widget.Toast;\r\npublic class MainActivity extends AppCompatActivity {\r\nDrawerLayout dLayout;\r\n@Override\r\nprotected void onCreate(Bundle savedInstanceState) {\r\nsuper.onCreate(savedInstanceState);\r\nsetContentView(R.layout.activity_main);\r\nsetNavigationDrawer(); \/\/ call method\r\n}\r\nprivate void setNavigationDrawer() {\r\ndLayout = (DrawerLayout) findViewById(R.id.drawer_layout); \/\/ initiate a DrawerLayout\r\nNavigationView navView = (NavigationView) findViewById(R.id.navigation); \/\/ initiate a Navigation View\r\n\/\/ implement setNavigationItemSelectedListener event on NavigationView\r\nnavView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {\r\n@Override\r\npublic boolean onNavigationItemSelected(MenuItem menuItem) {\r\nFragment frag = null; \/\/ create a Fragment Object\r\nint itemId = menuItem.getItemId(); \/\/ get selected menu item's id\r\n\/\/ check selected menu item's id and replace a Fragment Accordingly\r\nif (itemId == R.id.first) {\r\nfrag = new FirstFragment();\r\n} else if (itemId == R.id.second) {\r\nfrag = new SecondFragment();\r\n} else if (itemId == R.id.third) {\r\nfrag = new ThirdFragment();\r\n}\r\n\/\/ display a toast message with menu item's title\r\nToast.makeText(getApplicationContext(), menuItem.getTitle(), Toast.LENGTH_SHORT).show();\r\nif (frag != null) {\r\nFragmentTransaction transaction = getSupportFragmentManager().beginTransaction();\r\ntransaction.replace(R.id.frame, frag); \/\/ replace a Fragment with Frame Layout\r\ntransaction.commit(); \/\/ commit the changes\r\ndLayout.closeDrawers(); \/\/ close the all open Drawer Views\r\nreturn true;\r\n}\r\nreturn false;\r\n}\r\n});\r\n}\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong><span style=\"color: #008000;\">Step 6:<\/span><\/strong> Now we need 3 fragments and 3 xml layouts. So create three fragments by right click on your package folder and create classes and name them as FirstFragment, SecondFragment and ThirdFragment and add the following code respectively.<\/p>\n<p><em><span style=\"color: #000000;\">FirstFragment.class<\/span><\/em><\/p>\n<pre>package abhiandroid.navigationdrawerexample;\r\nimport android.os.Bundle;\r\nimport android.support.v4.app.Fragment;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\npublic class FirstFragment extends Fragment {\r\n@Override\r\npublic View onCreateView(LayoutInflater inflater, ViewGroup container,\r\nBundle savedInstanceState) {\r\n\/\/ Inflate the layout for this fragment\r\nreturn inflater.inflate(R.layout.fragment_first, container, false);\r\n}\r\n}\r\n<\/pre>\n<p><em>SecondFragment.class<\/em><\/p>\n<pre>package abhiandroid.navigationdrawerexample;\r\nimport android.os.Bundle;\r\nimport android.support.v4.app.Fragment;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\npublic class SecondFragment extends Fragment {\r\n@Override\r\npublic View onCreateView(LayoutInflater inflater, ViewGroup container,\r\nBundle savedInstanceState) {\r\n\/\/ Inflate the layout for this fragment\r\nreturn inflater.inflate(R.layout.fragment_second, container, false);\r\n}\r\n}<\/pre>\n<p><em>ThirdFrament.class<\/em><\/p>\n<pre>package abhiandroid.navigationdrawerexample;\r\nimport android.os.Bundle;\r\nimport android.support.v4.app.Fragment;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\npublic class ThirdFragment extends Fragment {\r\n@Override\r\npublic View onCreateView(LayoutInflater inflater, ViewGroup container,\r\nBundle savedInstanceState) {\r\n\/\/ Inflate the layout for this fragment\r\nreturn inflater.inflate(R.layout.fragment_third, container, false);\r\n}\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p><strong><span style=\"color: #008000;\">Step 7:<\/span> <\/strong>Now create 3 xml layouts by right clicking on res\/layout -&gt; New -&gt; Layout Resource File and name them as fragment_first, fragment_ second and fragment_third and add the following code in respective files.<br \/>\nHere we will design the basic simple UI by using TextView in all xml\u2019s.<\/p>\n<p><em>fragment_first.xml<\/em><\/p>\n<pre>&lt;FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\"abhiandroid.navigationdrawerexample.FirstFragment\"&gt;\r\n    &lt;TextView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:gravity=\"center\"\r\n        android:text=\"First Fragment\"\r\n        android:textSize=\"25sp\" \/&gt;\r\n&lt;\/FrameLayout&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><em>fragment_second.xml<\/em><\/p>\n<pre>&lt;FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\"abhiandroid.navigationdrawerexample.SecondFragment\"&gt;\r\n    &lt;TextView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:gravity=\"center\"\r\n        android:text=\"Second Fragment\"\r\n        android:textSize=\"25sp\" \/&gt;\r\n&lt;\/FrameLayout&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><em>fragment_third.xml<\/em><\/p>\n<pre>&lt;FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\"abhiandroid.navigationdrawerexample.ThirdFragment\"&gt;\r\n    &lt;TextView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:gravity=\"center\"\r\n        android:text=\"Third Fragment\"\r\n        android:textSize=\"25sp\" \/&gt;\r\n&lt;\/FrameLayout&gt;\r\n<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Now run the App and slide screen from left to right and you will see Menu option. On sliding right to left it will close back.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Android, Navigation Drawer is a panel that displays App&#8217;s Navigation option from the left edge of the screen. It is one of the most important and useful UI pattern introduced by the Google for developing Android app.Navigation drawer\u00a0is a side menu that helps us to organise the navigation inside our app. It is a &hellip; <a href=\"https:\/\/abhiandroid.com\/materialdesign\/navigation-drawer\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Navigation Drawer and Drawer Layout Tutorial With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"footnotes":""},"class_list":["post-70","page","type-page","status-publish","hentry"],"psp_head":"<title>Navigation Drawer and Drawer Layout Tutorial With Example In Android Studio \u2013 Android Material Design Tutorial<\/title>\r\n<meta name=\"description\" content=\"Learn Navigation drawer and drawer layout with example in Android Studio. Here we also discuss it&#039;s methods and NavigationView step by step.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/materialdesign\/navigation-drawer\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/70","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/comments?post=70"}],"version-history":[{"count":2,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/70\/revisions"}],"predecessor-version":[{"id":753,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/70\/revisions\/753"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/media?parent=70"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}