[MUSIC]

Hi, my name's Jamie Huson.

I'm an Android developer at Etsy.

In this workshop,

I'll walk you through implementing the navigation drawer pattern.

Navigation drawer is a UI pattern to display top level navigation items

on top of the main content of a screen, by having a sliding panel become visible.

The drawer is triggered through tapping the Action Bar Drawer Indicator, or

by sliding from the edge of the screen.

There are two places to find information about its usage and implementation.

Let's navigate to the Android Developer website, and open up Chrome.

And go to d.android.com.

Let's go to the Design section.

On the left hand side, let's go to Patterns.

And you can see Navigation Drawer listed here.

Let's talk about some of the most important parts of this site.

The Navigation Drawer won't solve the problem of an overly complex or

confusing navigation hierarchy within an app.

If you find yourself not having enough room for

all your navigation elements, consider reorganizing your app

to ensure navigation elements appear in logical places within the app.

Here, you can see the site talks about how the navigation drawer

is displayed to the user.

Again, you can click and tap on the icon, or

you can slide from the edge of the screen over to display the drawer.

The drawer sits on top of the other main content of the screen.

Next, Navigation Drawer should contain only top level navigation packets.

That means you shouldn't navigate to items directly tied to a content on

a specific screen.

The user will be able to access the Navigation Drawer from almost any screen,

either by tapping that icon, or by sliding out from the side, so

that I can switch to a section in your app at any time.

Next, the relationship between the Navigation Drawer and

the Action Bar is important to consider.

When the drawer is open, action items in the Action Bar shouldn't be visible.

In most cases,

there won't be any visible actions in the action bar while the drawer is open.

In addition, any contextual action bar modes that are enabled

should be hidden while the drawer is open.

Finally, consider the back button behavior, and

ensure you're following the guidelines laid out on this page correctly.

Inconsistently implementing back navigation with the drawer

can be confusing to users.

For the most relevant information about implementing the Navigation Drawer,

let's talk about visiting the Material Design Guidelines.

To go there, we just go to google.com/design.

Material Design was introduced with Lollipop version 21, but

they provided the AppCompat library, and some other tools and views

in the Android Support Library, to enable utilizing this on older platforms as well.

Go ahead and go to Material Guidelines.

And up here in the navigation drawer, under Patterns,

we can see there's Navigation Drawer.

So here we can find specific implementation details like spacing,

padding, and

the visual style that we should apply to our navigation drawer in our app.

This is really useful, and we should make sure to write these things down or

revisit this page often,

when we're going through implementations of our navigation drawer in our code.

With the information from both these sites understood,

let's move on to creating a navigation drawer.

To implement a navigation drawer,

we can use the included activity template in Android Studio.

To do that, let's create a new project.

I'm gonna call my project Navigation Drawer.

Next, just use the defaults here for API version.

Now, in this screen for the activity template, let's go ahead and

select Navigation Drawer Activity.

You can call it whatever you want.

It's going to create a fragment for us.

You can call that whatever you want as well.

I'm just gonna leave in all the defaults.

Okay, our project's been created for us.

You can see that it's dropped in quite a bit of code here and

layouts, and some other things.

Let's go ahead and talk through each part of this.

First, let's look at our main activity layout.

Here, you can see that the navigation drawer is included.

Navigation Drawer Layout is part of the Android Support Library.

This is just a layout, like relative layout or linear layout, but

it has a few special properties that make it implement the drawer properties,

such as sliding from the edge of the screen, and

displaying content on top of other content.

The main content of the screen is gonna go as a child

of our Navigation Drawer layout.

It's going to have full width and full height, so

we're just gonna give it match parent.

Match parent, that's what's been provided in this template.

And then we could see that as commented throughout this code,

to implement the actual drawer, we're going to use the layout_gravity attribute.

They use the start value.

You can also use left or right to support API versions older than API 17.

So any content with a layout_gravity of left, right, start, or end,

is going to have that drawer be drawn off the screen, and become visible when

the user swipes in from either left-hand or right-hand side of the screen.

Here we can see that the template creates a left-hand side drawer as a fragment.

Now, you don't have to use a fragment.

You can put in a static layout here.

You can put in a container and

put a fragment in later at run time using Java code.

It's up to you, what you want to have in your navigation drawer.

But in this case, they use a fragment.

So we'll walk through how that was implemented.

Next, let's look at the fragment navigation drawer layout.

And we can see that it simply consists of list view.

So, list view has elements that are bind at run time, using an adapter.

So we're gonna have to look at the code for an adapter later,

and see how this list of items gets created in our navigation drawer.

We can see there's also a fragment main layout.

This is the main content that shows in the screen.

And this is the content that the navigation drawer goes on top of,

when it's slid into view.

You can see it simply consists of a text view, and it's called section_label.

That's the ID, but it doesn't actually have any text in it.

Now let's go ahead and look at the code.

Let's open up the MainActivity first.

You see that MainActivity extends ActionBarActivity.

That's part of the AppCompat library.

And it also implements this navigation drawer fragment,

NavigationDrawerCallbacks.

That's defined in the navigation drawer fragment, and

we'll take a look at that in a minute.

Scrolling down, we can see onCreate view sets the content view,

it creates a fragment and sets it up.

And finally, it implements that callback, onNavigationDrawerItemsSelected.

And when an item is selected, it loads a new fragment into the main container.

Remember, this container is the main content area of our activity.

If we keep scrolling down,

we can see that there is some additional code needed to restore the action bar.

Remember that when the drawer slides open, the action bar items need to be hidden,

if they're not relevant to the navigation drawer.

And finally, we've overridden the onCreate options menu, onOptions items selected.

These are the legacy options menu that correspond to the action bar.

So again, when the Navigation Drawer is opened or closed, we're restoring items,

or hiding items to the action bar.

Next, let's go ahead and look at the NavigationDrawerFragment.

You can see right away that it stores a state variable,

so this is going to be storing in our on save instant state,

which item is selected in the list of items.

Remember that the fragment for

the Navigation Drawer contains simply a list view, and it's bound by an adapter.

So we're gonna be looking at that in just a minute.

You can see that this fragment has a Navigation Drawer callback,

has the empty constructor, which all fragments should have.

And they're saving which item is selected in the drawer,

into a shared preference object.

You can see that they're restoring the state here,

by pulling the selected position out of the savedInstanceState bundle, and

then setting the item that it was the current selected position.

And onCreateView, they're simply getting references to that list view, and

then they're setting this adapter.

This is a simple array adapter.

It has just a few items, Section 1, Section 2, Section 3, that's just some

text, so when we run this app, we should see those three different sections.

And it has this Public method isDrawerOpen.

This will allow the activity when it's drawing and selecting the action bar

items through the menu callbacks to know whether the drawer is open or not.

Setup is called just when the fragment is first created,

and what this does it gives it a reference to the views it needs.

That's the drawer layout, itself.

You can see that there's the ability to set a custom drawer shadow using

a drawable.

And finally, it sets up the action bar to display the up indicator.

Now, if you're using toolbar, you can also do that.

Toolbar is introduced in the Android support library, when API21 was released.

And Toolbar works just as well as Action Bar, in fact better sometimes, and

that works with drawer layout in a very similar way.

If you're using Action Bar though, you need to use this Action Bar drawer toggle.

This is what actually changes the icon to show as the drawer

icon versus the up carrot.

What this drawer toggle is implementing are the navigation drawer call backs

of when the drawer is open and when it's closed.

So, this is really important because when it's open, we need to make sure we call

back to the activity and it's calling here, supportInvalidateOptions menu.

This ensures that the action bar items are going to be then hidden,

once the drawer is opened or closed.

You can see it's also being called an onDrawerOpened.

One important part of the user experience of the drawer is making sure that when

the app is first loaded, the user knows the drawer exists.

To do that, they store a variable in a shared preference about whether the drawer

has been opened once or not.

So if the user comes to this app, opens it for

the first time, they don't know about the drawer.

The drawer is going to be opened automatically for them.

Once it's been closed, they set this value called mUserLearnedDrawer to be true.

They store that in the shared preference.

That way when the user comes back to the app, the drawer won't always be open,

it will simply be in the last state it was in.

Finally, at the end,

we can see the interface that is defined, called NavigationDrawerCallbacks.

And this is what the activity was implementing so that the activity knows

when an item in the navigation drawer is selected and what position is selected.

So, onNavigationDrawerItemSelected gets called.

And we can see, back in the main activity, when this happens,

when a specific number is selected, again, it just loads a different fragment.

So, for an app that you're designing or I'm building,

instead of just loading any old fragment, you might be loading specific fragments.

This is my list, my main activity feed.

This is my profile fragment.

We're going to be showing specific content based on

top level navigation items in the drawer.

Let's go ahead and run this app, and

we'll see how the navigation drawer looks in practice.

Here we can see the navigation drawer starts out open, which is expected.

The first time it runs, it should show the user the navigation drawer exists.

By default, the first item is selected in the list.

The user can select any other item they want.

And you can see that when it loads the other fragmented changes,

it changes the title to be that fragment's title: Section 1.

Or if we open it again, we can do Section 3.

And you can see that there's an example action up here.

And when we open the drawer, those are hidden.

The title changes.

These were following the guidelines laid out in the developer website,

Material Design Guidelines.

You should follow those as well.

Okay, let's rotate our emulator and see what happens.

You can see that even though we've rotated,

the state of the drawer remains the same.

Which item is selected remains selected, and even if we were to hit home and

come back to this app, the state would be saved and

restored in the drawer when it comes back into view.

In this workshop,

we use the Android Studio Activity template to implement a navigation drawer.

Since it's implemented using a simple drawer layout,

you can include it in your app project in a way that suits your app the best.

Simply include the Android support library, and

the drawer layout would be included, as well.

You can prefer views over fragments, provide custom colors and touch selectors,

as well as the more modern toolbar component to use with drawer layout.

Consider using a navigation drawer when it makes sense, and

your users will benefit from easy access to the most important parts of your app.