Build a Navigation Drawer Pattern

[MUSIC] 0:00 Hi, my name's Jamie Huson. 0:05 I'm an Android developer at Etsy. 0:07 In this workshop, 0:09 I'll walk you through implementing the navigation drawer pattern. 0:10 Navigation drawer is a UI pattern to display top level navigation items 0:13 on top of the main content of a screen, by having a sliding panel become visible. 0:17 The drawer is triggered through tapping the Action Bar Drawer Indicator, or 0:22 by sliding from the edge of the screen. 0:26 There are two places to find information about its usage and implementation. 0:27 Let's navigate to the Android Developer website, and open up Chrome. 0:32 And go to d.android.com. 0:37 Let's go to the Design section. 0:41 On the left hand side, let's go to Patterns. 0:42 And you can see Navigation Drawer listed here. 0:47 Let's talk about some of the most important parts of this site. 0:50 The Navigation Drawer won't solve the problem of an overly complex or 0:53 confusing navigation hierarchy within an app. 0:57 If you find yourself not having enough room for 1:00 all your navigation elements, consider reorganizing your app 1:02 to ensure navigation elements appear in logical places within the app. 1:05 Here, you can see the site talks about how the navigation drawer 1:10 is displayed to the user. 1:12 Again, you can click and tap on the icon, or 1:14 you can slide from the edge of the screen over to display the drawer. 1:18 The drawer sits on top of the other main content of the screen. 1:22 Next, Navigation Drawer should contain only top level navigation packets. 1:26 That means you shouldn't navigate to items directly tied to a content on 1:31 a specific screen. 1:34 The user will be able to access the Navigation Drawer from almost any screen, 1:36 either by tapping that icon, or by sliding out from the side, so 1:40 that I can switch to a section in your app at any time. 1:43 Next, the relationship between the Navigation Drawer and 1:48 the Action Bar is important to consider. 1:51 When the drawer is open, action items in the Action Bar shouldn't be visible. 1:53 In most cases, 1:57 there won't be any visible actions in the action bar while the drawer is open. 1:58 In addition, any contextual action bar modes that are enabled 2:02 should be hidden while the drawer is open. 2:05 Finally, consider the back button behavior, and 2:08 ensure you're following the guidelines laid out on this page correctly. 2:10 Inconsistently implementing back navigation with the drawer 2:14 can be confusing to users. 2:17 For the most relevant information about implementing the Navigation Drawer, 2:19 let's talk about visiting the Material Design Guidelines. 2:23 To go there, we just go to google.com/design. 2:26 Material Design was introduced with Lollipop version 21, but 2:30 they provided the AppCompat library, and some other tools and views 2:34 in the Android Support Library, to enable utilizing this on older platforms as well. 2:39 Go ahead and go to Material Guidelines. 2:44 And up here in the navigation drawer, under Patterns, 2:47 we can see there's Navigation Drawer. 2:51 So here we can find specific implementation details like spacing, 2:54 padding, and 2:58 the visual style that we should apply to our navigation drawer in our app. 2:59 This is really useful, and we should make sure to write these things down or 3:03 revisit this page often, 3:06 when we're going through implementations of our navigation drawer in our code. 3:07 With the information from both these sites understood, 3:11 let's move on to creating a navigation drawer. 3:14 To implement a navigation drawer, 3:17 we can use the included activity template in Android Studio. 3:19 To do that, let's create a new project. 3:23 I'm gonna call my project Navigation Drawer. 3:26 Next, just use the defaults here for API version. 3:32 Now, in this screen for the activity template, let's go ahead and 3:37 select Navigation Drawer Activity. 3:40 You can call it whatever you want. 3:43 It's going to create a fragment for us. 3:44 You can call that whatever you want as well. 3:46 I'm just gonna leave in all the defaults. 3:47 Okay, our project's been created for us. 3:50 You can see that it's dropped in quite a bit of code here and 3:52 layouts, and some other things. 3:56 Let's go ahead and talk through each part of this. 3:58 First, let's look at our main activity layout. 4:00 Here, you can see that the navigation drawer is included. 4:04 Navigation Drawer Layout is part of the Android Support Library. 4:07 This is just a layout, like relative layout or linear layout, but 4:11 it has a few special properties that make it implement the drawer properties, 4:16 such as sliding from the edge of the screen, and 4:20 displaying content on top of other content. 4:22 The main content of the screen is gonna go as a child 4:26 of our Navigation Drawer layout. 4:29 It's going to have full width and full height, so 4:31 we're just gonna give it match parent. 4:34 Match parent, that's what's been provided in this template. 4:36 And then we could see that as commented throughout this code, 4:38 to implement the actual drawer, we're going to use the layout_gravity attribute. 4:42 They use the start value. 4:47 You can also use left or right to support API versions older than API 17. 4:49 So any content with a layout_gravity of left, right, start, or end, 4:53 is going to have that drawer be drawn off the screen, and become visible when 5:00 the user swipes in from either left-hand or right-hand side of the screen. 5:05 Here we can see that the template creates a left-hand side drawer as a fragment. 5:10 Now, you don't have to use a fragment. 5:16 You can put in a static layout here. 5:18 You can put in a container and 5:19 put a fragment in later at run time using Java code. 5:21 It's up to you, what you want to have in your navigation drawer. 5:24 But in this case, they use a fragment. 5:28 So we'll walk through how that was implemented. 5:30 Next, let's look at the fragment navigation drawer layout. 5:33 And we can see that it simply consists of list view. 5:36 So, list view has elements that are bind at run time, using an adapter. 5:39 So we're gonna have to look at the code for an adapter later, 5:45 and see how this list of items gets created in our navigation drawer. 5:48 We can see there's also a fragment main layout. 5:52 This is the main content that shows in the screen. 5:55 And this is the content that the navigation drawer goes on top of, 5:58 when it's slid into view. 6:01 You can see it simply consists of a text view, and it's called section_label. 6:03 That's the ID, but it doesn't actually have any text in it. 6:07 Now let's go ahead and look at the code. 6:10 Let's open up the MainActivity first. 6:12 You see that MainActivity extends ActionBarActivity. 6:15 That's part of the AppCompat library. 6:18 And it also implements this navigation drawer fragment, 6:21 NavigationDrawerCallbacks. 6:23 That's defined in the navigation drawer fragment, and 6:25 we'll take a look at that in a minute. 6:28 Scrolling down, we can see onCreate view sets the content view, 6:30 it creates a fragment and sets it up. 6:34 And finally, it implements that callback, onNavigationDrawerItemsSelected. 6:37 And when an item is selected, it loads a new fragment into the main container. 6:42 Remember, this container is the main content area of our activity. 6:47 If we keep scrolling down, 6:50 we can see that there is some additional code needed to restore the action bar. 6:52 Remember that when the drawer slides open, the action bar items need to be hidden, 6:56 if they're not relevant to the navigation drawer. 7:01 And finally, we've overridden the onCreate options menu, onOptions items selected. 7:04 These are the legacy options menu that correspond to the action bar. 7:09 So again, when the Navigation Drawer is opened or closed, we're restoring items, 7:13 or hiding items to the action bar. 7:18 Next, let's go ahead and look at the NavigationDrawerFragment. 7:24 You can see right away that it stores a state variable, 7:28 so this is going to be storing in our on save instant state, 7:32 which item is selected in the list of items. 7:36 Remember that the fragment for 7:38 the Navigation Drawer contains simply a list view, and it's bound by an adapter. 7:40 So we're gonna be looking at that in just a minute. 7:44 You can see that this fragment has a Navigation Drawer callback, 7:47 has the empty constructor, which all fragments should have. 7:51 And they're saving which item is selected in the drawer, 7:54 into a shared preference object. 7:57 You can see that they're restoring the state here, 8:00 by pulling the selected position out of the savedInstanceState bundle, and 8:02 then setting the item that it was the current selected position. 8:06 And onCreateView, they're simply getting references to that list view, and 8:10 then they're setting this adapter. 8:14 This is a simple array adapter. 8:15 It has just a few items, Section 1, Section 2, Section 3, that's just some 8:17 text, so when we run this app, we should see those three different sections. 8:21 And it has this Public method isDrawerOpen. 8:25 This will allow the activity when it's drawing and selecting the action bar 8:28 items through the menu callbacks to know whether the drawer is open or not. 8:32 Setup is called just when the fragment is first created, 8:38 and what this does it gives it a reference to the views it needs. 8:41 That's the drawer layout, itself. 8:45 You can see that there's the ability to set a custom drawer shadow using 8:47 a drawable. 8:51 And finally, it sets up the action bar to display the up indicator. 8:52 Now, if you're using toolbar, you can also do that. 8:57 Toolbar is introduced in the Android support library, when API21 was released. 9:00 And Toolbar works just as well as Action Bar, in fact better sometimes, and 9:06 that works with drawer layout in a very similar way. 9:10 If you're using Action Bar though, you need to use this Action Bar drawer toggle. 9:13 This is what actually changes the icon to show as the drawer 9:18 icon versus the up carrot. 9:23 What this drawer toggle is implementing are the navigation drawer call backs 9:26 of when the drawer is open and when it's closed. 9:30 So, this is really important because when it's open, we need to make sure we call 9:33 back to the activity and it's calling here, supportInvalidateOptions menu. 9:37 This ensures that the action bar items are going to be then hidden, 9:41 once the drawer is opened or closed. 9:45 You can see it's also being called an onDrawerOpened. 9:48 One important part of the user experience of the drawer is making sure that when 9:52 the app is first loaded, the user knows the drawer exists. 9:57 To do that, they store a variable in a shared preference about whether the drawer 10:00 has been opened once or not. 10:04 So if the user comes to this app, opens it for 10:06 the first time, they don't know about the drawer. 10:09 The drawer is going to be opened automatically for them. 10:11 Once it's been closed, they set this value called mUserLearnedDrawer to be true. 10:13 They store that in the shared preference. 10:19 That way when the user comes back to the app, the drawer won't always be open, 10:20 it will simply be in the last state it was in. 10:23 Finally, at the end, 10:26 we can see the interface that is defined, called NavigationDrawerCallbacks. 10:27 And this is what the activity was implementing so that the activity knows 10:32 when an item in the navigation drawer is selected and what position is selected. 10:36 So, onNavigationDrawerItemSelected gets called. 10:41 And we can see, back in the main activity, when this happens, 10:44 when a specific number is selected, again, it just loads a different fragment. 10:47 So, for an app that you're designing or I'm building, 10:52 instead of just loading any old fragment, you might be loading specific fragments. 10:56 This is my list, my main activity feed. 11:01 This is my profile fragment. 11:04 We're going to be showing specific content based on 11:06 top level navigation items in the drawer. 11:09 Let's go ahead and run this app, and 11:11 we'll see how the navigation drawer looks in practice. 11:13 Here we can see the navigation drawer starts out open, which is expected. 11:21 The first time it runs, it should show the user the navigation drawer exists. 11:25 By default, the first item is selected in the list. 11:29 The user can select any other item they want. 11:31 And you can see that when it loads the other fragmented changes, 11:35 it changes the title to be that fragment's title: Section 1. 11:37 Or if we open it again, we can do Section 3. 11:41 And you can see that there's an example action up here. 11:44 And when we open the drawer, those are hidden. 11:46 The title changes. 11:49 These were following the guidelines laid out in the developer website, 11:50 Material Design Guidelines. 11:53 You should follow those as well. 11:55 Okay, let's rotate our emulator and see what happens. 11:57 You can see that even though we've rotated, 12:01 the state of the drawer remains the same. 12:03 Which item is selected remains selected, and even if we were to hit home and 12:05 come back to this app, the state would be saved and 12:10 restored in the drawer when it comes back into view. 12:13 In this workshop, 12:17 we use the Android Studio Activity template to implement a navigation drawer. 12:18 Since it's implemented using a simple drawer layout, 12:22 you can include it in your app project in a way that suits your app the best. 12:25 Simply include the Android support library, and 12:28 the drawer layout would be included, as well. 12:31 You can prefer views over fragments, provide custom colors and touch selectors, 12:33 as well as the more modern toolbar component to use with drawer layout. 12:38 Consider using a navigation drawer when it makes sense, and 12:42 your users will benefit from easy access to the most important parts of your app. 12:45