Loading...

DrawerLayout/ Navigation Drawer View Over Android ActionBar/ToolBar

Google has released the guidelines for material design UI widget like Toolbar, Floating Action Button (FAB), Navigation Drawer etc. Navigation drawer is one of the most important and commonly used components in android application and it is also called navigation view, sidebar, sliding menu, etc. In this tutorial, you will learn to make android application with navigation drawer and display it over android ActionBar/ ToolBar.

If you have used some components with design support library then displaying DrawerLayout/Navigation drawer over actionbar or toolbar or appbar is very simple.

Related:
Android Navigation Drawer View: Material Design Support Library
Android Floating Labels for EditText Using Design Support Library
Android User Interface (UI) Design Tutorial

Android Example: Navigation Drawer Using Design Support Library


Let’s start by creating new android application called Android Navigation Drawer with Design Support Library. For below android lollipop device, first you have to add design support library dependencies in your app build.gradle file which looks like below.

build.gradle

Setup app theme and color values for the application in styles.xml and colors.xml file. Following is the complete content of colors.xml and styles.xml file.

res/values/colors.xml

styles.xml

Now create a new XML layout file for navigation header called navigation_header.xml. Following is the complete content of the file.

res/layout/navigation_header.xml

For navigation items, we have to create a menu file in res/menu and adding menu items. Following is the complete content of navigation_drawer_menu_items.xml file.

res/menu/navigation_drawer_menu_items.xml

To display navigation drawer over toolbar/actionbar and below status/notification bar we have to add DrawerLayout, CoodinatorLayout, AppBarLayout, Toolbar with many XML attributes in our application XML layout file. Following is the complete content of XML layout file.

res/layout/activity_main.xml

Now, it’s time to work with java code. To make working, we have to add some java code in our app java activity file. Following is the java code of activity file called MainActivity.java file.

src/MainActivity.java

res/values/strings.xml

Android Example: Navigation Drawer Using Design Support Library

Finally, you have done all things. Now run your DrawerLayout/ Navigation Drawer View Over Android ActionBar/ToolBar application and swipe to right from left of your app/phone, navigation drawer will appear there with header and items. This will look like above screenshot.
UI 1763200992648074402
Home item