Navigation Drawer and Drawer Layout Tutorial With Example In Android Studio
The material design team at Google defines the functionality of a navigation drawer in Android as follows. The navigation drawer slides in from the left and contains the navigation destinations for your app. The JavaPOS Drivers (Legacy) for Windows, Mac and Linux V1.13.12 have been released. Support TSP100 Series on Linux 64bit. Added support macOS 10.15. JavaPOS Drivers for Windows / Mac / Linux V1.13.12 Released: September 11, 2019.
In Android, Navigation Drawer is a panel that displays App’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 is 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.
Table Of Contents
Need of Navigation Drawer:
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 Navigation Drawer. In Navigation Drawer we combine NavigationView and DrawerLayout to achieve the desired output.
Drawer Layout In Android:
In Android, DrawerLayout acts as top level container for window content that allows for interactive “drawer” 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.
Basic Drawer Layout XML Code
For adding a Navigation Drawer, declare your UI(user interface) with a DrawerLayout object as the root(parent) view of your layout. Inside this DrawerLayout 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.
In above code snippet DrawerLayout is the root view of our Layout in which we have other layouts and content.
FrameLayout is used to hold the page content shown through different fragments.
The NavigationView is the “real” menu of our app. The menu items are written in nav_items file.
Important Methods Of Drawer Layout
Let’s we discuss some important methods of Navigation Drawer that may be called in order to manage the Navigation Drawer.
1. closeDrawer(int gravity):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.
Below we show how to close the drawer view. We can close a drawer on any click or other event of view.
Bar Drawer Driver Jobs
2. closeDrawers(): 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.
Below we close all the currently open drawer views.
3. isDrawerOpen(int drawerGravity):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.
Below we check DrawerLayout is open or not. It returns true or false value.
4. isDrawerVisible(int drawerGravity):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.
Below we check DrawerLayout is visible or not. It returns true or false value.
Bar Drawer Driver Job
5. openDrawer(int gravity): 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.
Below we show how to open a Drawer Layout view. We can open a drawer on any click or other event of view.
Navigation View:
In Android, Navigation View represents a standard navigation menu for our application. The menu contents can be populated by a menu resource file.
Important Methods Of Navigation View:
Let’s we discuss some important methods of Navigation View that may be called in order to manage the Navigation View.
1.setNavigationItemSelectedListener(NavigationView.OnNavigationItemSelectedListener listener):This method is used to set a listener that will be notified when a menu item is selected.
Below we shows the code how to use this listener.
2. setItemBackground(Drawable itemBackground):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.
Below we set the resource in the background of the menu items.
3. setItemBackgroundResource(int resId):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.
Below we set the resource in the background of the menu items.
From XML: We can also set the background of menu items from our xml file in which we define NavigationView.
Below we set the resource in the background of menu items.
4. getItemBackground():This method returns the background drawable for our menu items.
Below we firstly set a resource in the background of menu items and then get the same drawable.
Navigation Drawer Example in Android Studio:
Below is the example of Navigation Drawer in which we display App’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’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.
Below you can download code, see final output and step by step explanation of Navigation drawer example in Android Studio.
Download Code
Step 1: Create a new project and name it NavigationDrawerExample.
Step 2: Open Gradle Scripts > build.gradle and add Design support library dependency.
apply plugin: ‘com.android.application’
Step 3: Open res -> layout -> activity_main.xml (or) main.xml and add following code:
Bar Drawer Driver Lock
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 “nav_items” and FrameLayout is used to replace the Fragments on the click of menu items.
Step 4:Open res -> menu -> nav_items.xml and add following code:
In this step we create the three menu items that should be displayed in Drawer.
Step 5:Open src -> package -> MainActivity.java
In 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’s id and a toast message with menu item’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.
Step 6: 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.
FirstFragment.class
SecondFragment.class
ThirdFrament.class
Step 7:Now create 3 xml layouts by right clicking on res/layout -> New -> Layout Resource File and name them as fragment_first, fragment_ second and fragment_third and add the following code in respective files.
Here we will design the basic simple UI by using TextView in all xml’s.
fragment_first.xml
fragment_second.xml
fragment_third.xml
Output:
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.