You have seen a sliding menu in many of the Android applications like of Google+, Gmail, YouTube, etc. After the launch of Material Design, you can also introduce this sliding menu to your Android applications by using Navigation Drawer. In this Material Design Navigation drawer tutorial, you will learn to use NavigationView with the help of Navigation Drawer example.
Introduction
Before the launch of material design, it was a very tough task to create Navigation Drawer. As when you want to create navigation drawer without NavigationView, you need ListView and LinearLayout with custom adapter along with other gesture controls to create the simple sliding menu.
“NavigationView represents a standard navigation menu for the application; you can populate the menu with the help of menu resource file. A drawer layout holds the NavigationView.”
Learn more about Navigation Drawer.
Understanding the Concept of NavigationView
NavigationView holds the header of the Navigation and the menu that is displayed under the header when the user opens the sliding menu. The menu contains the clickable menu items. All you need then is to implement the action listeners to capture selection events in the menu.
Navigation Drawer Example with NavigationView
1. Setting Up Environment for Navigation Drawer Example
First of all, you must setup environment for using Material Design. So for this purpose open build.gradle(module: app) and add the dependency for design.
|
1 2 3 4 5 |
dependencies { ... compile 'com.android.support:design:24.1.0' } |
The compileSdkVersion and targetSdkVersion should be 24.
In the <application > </application> tags of Androidmanifest.xml change the theme of your application from appTheme to NoActionBar theme.
|
1 2 3 4 |
<application ... android:theme="@style/Theme.AppCompat.Light.NoActionBar"> ... /> |
Also add the internet permissions for your Android application, as this example will use WebView to load content from the internet. If you don’t want to use WebView, or you want to design your custom layout, then there is no need to give internet permissions.
Open AndroidManifest.xml and give internet permissions in the manifest tags.
|
1 2 3 4 5 6 |
<manifest> ... <uses-permission android:name="android.permission.INTERNET" /> </manifest> |
2. Create Header for NavigationView
The most important thing for using NavigationView is the header of the Navigation menu. The header can contain a single image or multiple images along with the text. So, create a layout file which will contain the header of the NavigationView.
If you want to set any background of the layout i.e. any drawable image, you must specify it within the opening layout tags. The layout height, width, and orientation will then be applied to the drawable background.
header_layout.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="210dp" android:background="@drawable/bh"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Beginners Heap" android:textColor="#fff" android:id="@+id/textView" android:layout_above="@+id/textView2" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="ASP.NET, C#, Java, Android and Web Tutorials for Beginners" android:textColor="#fff" android:id="@+id/textView2" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> </RelativeLayout> |
3. Create Menu Items for NavigationView
The second most important component of the NavigationView is the menu items which will be displayed in the Navigation drawer. For this purpose, create a new menu directory and add the group of items as a menu resource.
menu_items.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/home" android:checked="false" android:title="Home" /> <item android:id="@+id/about" android:checked="false" android:title="About" /> <item android:id="@+id/contact" android:checked="false" android:title="Contact" /> </group> </menu> |
4. Designing the Main Layout
Now move toward the main layout of the Navigation Drawer. First of all, create a drawer widget to place layout for Toolbar and inner layout. NavigationView is placed directly in the Drawer Layout.
In the inner layout, you can place anything you want to; you can even replace the layout with any fragment. For better understanding, Navigation Drawer example uses a simple WebView that will change its content dynamically from the Navigation menu.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".MainActivity"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.muneeb.navigationviewexample.MainActivity" android:orientation="vertical"> <!-- Toolbar --!> <!-- Layout --!> </LinearLayout> <!-- NavigationView --!> </android.support.v4.widget.DrawerLayout> |
4.1. Create the Toolbar
The toolbar is also a most import component of Material Design. Previously, you changed the theme of your app as toolbar will be displayed instead of ActionBar. You can also add ActionEvents in this Android application and add a new menu resource to add Action bar events. Learn more about the Material Design toolbar.
You must provide the theme and the background of the Toolbar.
|
1 2 3 4 5 6 7 |
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="@dimen/abc_action_bar_default_height_material" app:theme="@style/Theme.AppCompat.Light.NoActionBar" android:background="#fff"/> |
4.2. Set the Layout
Now set the layout for the activity that will display the Navigation Drawer menu. This example will display a simple application will display a WebView to load components from the internet.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<RelativeLayout android:id="@+id/frame" android:layout_width="match_parent" android:layout_height="match_parent"> <WebView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/webView" android:layout_gravity="center" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> </RelativeLayout> |
4.3. Create NavigationView
The NavigationView will load the header and the menu resource in sliding menu. Add app:headerLayout and app:menu to the NavigationView through menu and layout resource files. i.e. header_layout.xml and menu_items.xml.
|
1 2 3 4 5 6 7 8 |
<android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_height="match_parent" android:layout_width="wrap_content" android:layout_gravity="start" app:headerLayout="@layout/header_layout" app:menu="@menu/menu_items" /> |
5. Implementing the logic to display Navigation Drawer with NavigationView
In onCreate() method of MainActivity.java declare and initialize the components for NavigationView example.
- First, declare and initialize Toolbar from Resource file and set toolbar as Support Action Bar
123//declare and initialize Toolbar and set as action bar.Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar); - Then, declare and initialize NavigationView from Resource file.
12//declare and initialize NavigationViewNavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view); - Declare and initialize DrawerLayout from the Resource file.
12// Declaring and Initializing Drawer Layout and ActionBarTogglefinal DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer); - Declare and initialize WebView from the Resource file. Add automatic image loading and enable JavaScript in settings. Set WebViewClient to new WebViewClient for browsing the WebView links within the app. Also, set the ScrollBar style.
123456final WebView web =(WebView) findViewById(R.id.webView);web.getSettings().setLoadsImagesAutomatically(true);web.setWebViewClient(new WebViewClient());web.getSettings().setJavaScriptEnabled(true);web.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); - Add on click event listener to the NavigationView menu items to open the desired URL in WebView.
123456789101112131415161718192021222324252627282930313233343536373839//Setting Navigation View Item Selected Listener to handle the item click of the navigation menunavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {@Overridepublic boolean onNavigationItemSelected(MenuItem menuItem) {if(menuItem.isChecked()) menuItem.setChecked(false);else menuItem.setChecked(true);//Closing drawer on item clickdrawerLayout.closeDrawers();//Check clicked item and perform appropriate actionswitch (menuItem.getItemId()) {//Populating main content using webview on the basis of selected menu itemcase R.id.home:{web.loadUrl("https://www.beginnersheap.com/");return true;}case R.id.contact:{web.loadUrl("https://www.beginnersheap.com/contact/");return true;}case R.id.about:{web.loadUrl("https://www.beginnersheap.com/about/");return true;}default:{return false;}}}});
- Finally, add toggle events so that some action can be performed on drawer open or close.
1234567891011121314151617181920ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar, R.string.close, R.string.open){@Overridepublic void onDrawerClosed(View drawerView) {// Code here will be triggered when the drawer closessuper.onDrawerClosed(drawerView);}@Overridepublic void onDrawerOpened(View drawerView) {// Code here will be triggered when the drawer will opensuper.onDrawerOpened(drawerView);}};//Setting the actionbarToggle to drawer layoutdrawerLayout.addDrawerListener(actionBarDrawerToggle);//calling sync state is necessay or else your hamburger icon wont show upactionBarDrawerToggle.syncState();
Displaying Circular Image in NavigationView Drawer
If you want to display a circular image on the background image of the Navigation view, then add circleimageview dependency in build.grade(module: app).
|
1 |
compile 'de.hdodenhof:circleimageview:1.3.0' |
And in the header resource file add circular image i.e. any profile picture by:
(drawable resource as android:src=”<drawable reference>”)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/profile_image" android:layout_width="76dp" android:layout_height="76dp" android:src="@drawable/circular_image" app:border_color="#FF000000" android:layout_marginLeft="24dp" android:layout_centerVertical="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_marginStart="24dp" /> |
Hope that you like this tutorial. Stay tuned for more upcoming tutorials. Stay blessed!
very good
How to open link “tel:”
?