In contemporary Android app that use material design themes, menu items that control navigation typically are placed in a navigation drawer that slides in from the left side of the screen.
- [Instructor] In contemporary Android apps that use material design themes, menu items that control navigation, typically are placed in a navigation drawer that slides in from the left side of the screen. You can see how this is done by creating a brand new Android Studio project. I'm going to name this project NavDrawerLayout, and as always, I'm going to change the Package name to match the package I've used previously. I'll accept a Minimum SDK of API 15, and then, when I get to this screen, I'll select the Navigation Drawer Activity template.
Creating a navigation drawer takes a lot of pieces and doing it from scratch takes some time but by using this template, you can learn the basics. I'll click through and create the new project in the directory for this video. Now before I review the code, I'll show you the behavior. I'll run the application on my device. This application template has an Options menu in the upper right corner and it has a single Settings menu item, but it also has an up button that looks like a menu icon and sure enough, when you click it, the menu slides in from the left, and you can choose any one of the items.
They don't do anything right now, but they appear in the list with icons. You can also open the navigation menu by dragging from the left side. On a physical device, that gesture is pretty easy. On a virtual device running in the emulator, just click right here at the edge and drag over and you should see the menu appear. So now let's take a look and see how this is done. Here are the important pieces. First of all, in the primary activity layout, which is called activity_main.xml, the root element is an instance of DrawerLayout and this is a component from the v4 support library.
The DrawerLayout component has a fitsSystemWindows attribute set to true, so it expands to fill the available space, and then the include directive refers to all of the other content that appears on the main activity. That includes the CoordinatorLayout, the AppBarLayout and Toolbar, and then the link to the content main xml file and this is where you customize the appearance of the activity screen. Going back to activity main, the final child element within the DrawerLayout is an instance of NavigationView and that's the component that's actually displayed when you drag in from the left.
The NavigationView has two critical attributes pointing to two other files. The headerLayout, points to a layout file, and that's how you control the appearance of the space at the top of the drawer. You can customize this layout file to change the appearance of the top of the menu, and then the menu attribute points to a menu file, it's called activity_main_drawer in this template, and here are all the different items that appear on it. Those were represented by items within groups.
The first group shows something called a checkableBehavior of single, and if you go back to that drawer, you'll see that when you select an item, it stays selected, and this is the sort of thing you want to use when you're using these items to control navigation. There's also a group here that doesn't have persistent selection, but again, you can choose any of those items, and then cause something to happen. So let's add something to this menu. This application has an Options menu that has a Settings item, and I want to take that Settings item and move it over to the navigation drawer.
So I'll go to my menu folder under resources, and I'll open main.xml, and I'll copy this item for Settings. Now I'll go back to activity_main_drawer.xml, and I'm going to paste it into place right here. Now just like a pop-up menu, you can't take an item from a drawer menu and show it on the action bar, so I'll get rid of this showAsAction attribute. I also will get rid of the orderInCategory attribute. In this file, the order of the items in the menu was being controlled by the order of their declaration, and I'll run the application and see what's happened.
Now when I open the drawer, I see Settings at the bottom of the list, just like I wanted, but right now, there's no icon, so I'll add that. I'll go back to Android Studio, and I'll show that there are many vector drawable files that are being used as icons, but notice the v21 mark up here, that's an indicator that these files are stored in a separate special directory. I'll go to the project scope and drill down to that same location under source, main, resources, and show that these are actually stored in drawable v21, so these vector drawable files are being used only on devices that are running API level 21 or later.
For older versions of Android, say running KitKat Android 4.4, these icon settings are actually pointing to graphics that are included with the Android SDK. I'll control or command click into one of these, and that takes me to a file called drawables.xml. That file is stored here under values. These are aliases, and their pointing to these files which are PNG files and these are more appropriate for use on the older versions of Android.
So here's how we're going to do sort of the same thing. First, I'll go to drawable v21, and I'll right-click, and choose New, Vector Asset. I'll click Browse for the icon, and I'll type settings, and I'll choose the Settings icon. I'll change this from ic_settings_black to ic_menu_settings to match the names of the other icons, and I'll click Next, and then Finish. That actually got created in the drawable directory, so I'll select it and drag it down to drawable v21.
So now that file is available for newer versions of Android. Now, to create a version that will work for older versions, I'll right click on drawable and select New, Image Asset. I'll set the icon type to Action Bar and Tab Icons, I'll click the Clipart browse button and type settings, and once again, I'll choose the settings icon, and click Ok. I'll change the name again to ic_menu_settings, and click Next again, and Finish, and now I have a variety of PNG files for different pixel density's and these will be used on the older versions of Android, and now I'll connect up those icons to my new menu choice.
I'll go back to activity_main_drawer.xml, and I'll use the icon attribute and set it to ic_menu_settings, and I'll run the application again and see the results. Now, when I open up the menu, I see Settings has that icon. Finally, I'll show you where the code is that's loading that drawer. Notice that the MainActivity implements the interface OnNavigationItemSelectedListener, and down at the bottom of the onCreate method, it gets referenced to the drawer object, and in the onCreate method, there's some code that sets up that drawer.
First, it's setting up the toggle that controls when the drawer appears and disappears, and then it's setting itself up as a listener for what happens when the user selects an item from the navigation drawer. Those are all the steps you need to setup the drawer and I mentioned it's a lot of steps. Starting with this template, can help you get started quickly adding a navigation drawer to your application's activity.
David also shows how to send and receive broadcast messages that let you exchange data and notifications among the different tiers of your application. He demonstrates how to work with menus and the action bar, add a navigation drawer to a layout, and tackle advanced navigation techniques. Later courses in the Essentials series concentrate on other specific skills you can master.
- Working with events
- Handling events with Java objects and lambda expressions
- Managing navigation
- Sending data to an activity
- Opening other apps with implicit intents
- Sending and receiving broadcast messages
- Working with menus and the action bar
- Adding a navigation drawer
- Advanced navigation techniques
- Removing activities from the back stack