Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Navigation Drawer is a UI pattern used 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 ActionBar’s drawer indicator or by sliding from the edge of the screen
Workshop References
Related Links
- How to Add a Navigation Drawer in Android - post from the Treehouse blog
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up