Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Add a Navigation Drawer

Material Design apps tend to have a navigation drawer that can be opened by swiping a finger from the left edge of the screen. In this lesson, you’ll learn how to create such a drawer using the DrawerLayout and NavigationView widgets.

Related Links

2.3 Add a Navigation Drawer

Hello and welcome back to this course about migrating an app to Material Design. In this lesson, we'll be creating a navigation drawer that can be opened using a swipe gesture. Instead of using the traditional ListView, we'll be using a navigation view inside our drawer. The navigation view conforms to the material design spec and is a part of the design support library. We'll be adding the navigation drawer to the main activity. Now instead of adding it directly inside the current layout of main activity, let us create new layout. Call it activity_main_with_nav. The root element of this layout will be DrawerLayout. Here, give an id to the DrawerLayout, you can simply call it drawer. Inside the DrawLayout, we can embed the original layout of main activity using the include tag. We can now add a NavigationView widget to the layout, it's width must be wrap_content and height must be match_parent. Next, use the layout_gravity attribute to specify that the navigation view must open from the left corner of the screen for English users. Give it a white background Next, set the value of it's id to nav. We must now create a header for this navigation view, so create a new layout resource file, call it navheader Drag and drop a medium text view to the layout. And set its text attribute to Stack Exchange sites. According to the Material Design spec, the text view must have a left margin of 16dp Its gravity must be center_vertical. And most importantly, the height of this view must match the action bar's size. I'll also change the textColor to black. Below this text view, we must add a divider. You can use view widget for this. It's width can be match_parent, but its height must be 1dp. Set its background color to black. According to the Material Design spec, the alpha of this divider must be 0.12. Finally, we need to give a paddingTop of 24dp to the LinearLayout. 24dp is, as you might have guessed, the height of the status bar. If you forget to set this padding, the navigation header will be partially obscured by the status bar. Get back to the activity_main_with_nav file now. Here, you can set the value of the headerLayout attribute to @layout/navheader. Next, we must specify the contents of this navigation view. In order to do that, we must create a new menu file. So create a new menu resource file and call it menu_sites. Inside the menu, create a group and set the value of its checkable behavior attribute to single, this way, only one item in this group can be selected at any given time. Inside this group, we must add all the items that are present in this screen. These items, as you already know, are defined inside the string.xml file. So, let's copy all of this and paste it inside the menu file. This syntax is not valid for a menu. This text here, must actually be used as an android:title attribute. In addition to the title, let's add an icon to each menu item. We can use the ic_forum drawable here. Now, repeat these steps for all items. So, it's just a few copy and paste operations. Our menu file is now ready. Go back to activity_main_with_nav and set the value of the menu attribute of the navigation view to menu_sites. For this navigation drawer to show up correctly above the status bar, we must add a fitsSystemWindows attribute to it and set its value to true. To be able to use this layout in main activity, change the layout you pass to the setContentView method to activity_main_with_nav. Let's run the app to see what we have got. Nothing has changed here at first glance. But if you swipe from the left corner of the screen, you will be able to pull the navigation drawer out. According to the Material Design spec, the navigation view must be partially visible through the status bar. In other words, the status bar must be made a little transparent. To do that open styles.xml. Here, add a new item called windowDrawsSystemBarBackgrounds and set its value to true. Next, add another item called statusBarColor, And set its value to the built in transparent color. Now there's an error here because these new styles are available only in API levels higher than 21. To fix this, select Override Resource in values v21. And our studio now creates a copy of the styles.xml file, that is applicable only to API levels 21 or higher. You can now go back to the default styles.xml file and remove the two new items from it. If you run the app, you will see that the navigation view fully conforms to the Material Design spec now. In this lesson, you learned how to create a navigation view that can be opened using a simple swipe gesture. In the next lesson, we'll create a button that can open the navigation view. Thanks for watching.

Back to the top