Hey guys, welcome back to part 2 of the Navigation Drawer Tutorial In part 1 we made some preparations And in this video we want to create the navigation drawer itself In part 3 we will then handle click events and open our fragments And we will start with the header
of our navigation drawer For this we have to create a new layout We go into our "app" folder here into "Res->Layout" We right-click on "layout" and create a new "Layout resource file" We have to give it a name and I'm
gonna call it "nav_header" And I'm gonna change the root layout into a "LinearLayout" Click "OK" And here again we switch over to
the "Text" tab And this layout will contain the header of our navigation drawer which will be placed at the top Our LinearLayout is already set
to "orientation=vertical" And we add some more attributes First, we change the height of
our header to a hardcorded "176dp" This is the same height that you get when you create a new navigation
drawer activity in Android Studio But I have also seen examples with the other
heights, so you can change that if you want Next we set the "background" to "colorAccent" Here you can of course choose any
color you want or you can also set an image for
the background We set the "gravity" with "android:gravity"
to "bottom" because we want the text and everything
to be placed at the bottom of this header Next we give it a "padding" so there is a bit room around the
edges of the header of 16 dp And lastly we will set a "theme"
with "android:theme" And here we search for @style/ThemeOverlay.AppCompat.Dark And this will make the text of
this header white just as we have in a dark action bar And in this LinearLayout we will
place an ImageView and 2 TextViews But of course, you can place any
Views you want in there <ImageView we set "wrap_content" width and height And for the "android:src" we take our "mipmap/ic_laucher_round" icon as a placeholder image Now for some reason this is shown
in the preview as a square but doesn't really matter Below this ImageView we put our
first TextView "wrap_content" width and height
here as well We give it a "paddingTop=8dp" So, there is a bit room to the
ImageView We give it a "text" I'm gonna set this to "Coding in
Flow" as a placeholder And we set "textAppearance" and search for "@style/" TextAppearance.AppCompat.Body1 And this will set the size of the text to this
predefined "Body1" text size here But you can also just use the "textSize"
attribute instead And below we put another TextView "wrap_content" width and height
here as well Here we are not going to set the
"textAppearance" attribute but a "text" of course And here I'm gonna type in another
dummy text info@codinginflow.com Now again I'm gonna press [Ctrl + Alt + L]
to rearrange the attributes And that's it for this layout Now we want to create the main
activity layout So we switch over into our
"activity_main.xml" file We delete this "TextView" here And to use our navigation drawer
we have to change the root layout into a "DrawerLayout" this one here "v4.widget.DrawerLayout" We keep the width and height as
"match_parent" And we have to give it an "id" because we need to reference to
it later in Java code "@+id/drawer_layout" Next we set "android:fitsSystemWindows" and set this to "true" This will make the navigation drawer
draw under the status bar at the top of our screen And into this "DrawerLayout"
we have to put first our main content layout which we want to show on the screen which are the Toolbar and our fragment
container below And below this main layout we put a "NavigationView" widget which will contain the navigation
drawer itself So first we put a "LinearLayout"
in here We set it to "match_parent" width
and height because it should fill the whole screen And we set the "orientation=vertical"
here as well Into this LinearLayout we put
our main content So in here we put our "Toolbar",
as I already mentioned v7.widget.toolbar We set the "width=match_parent" and the "height=?attr/actionBarSize" in camel case, like this And this will set the height to
the action bar size We change this closing tag over
here into self-closing tag by putting a slash in front of
it like this and we add some more attributes We set the background color with
"android:background" and we set this to our "colorPrimary" Next we give this toolbar an "id"
with "android:id=@+id/" as usual and we call it "toolbar" because we need to reference it
in Java code as well The next attribute is "android:theme" And here we search for @style/ThemeOverlay.AppCompat.Dark.ActionBar this one here This will make the text of our toolbar white,
just as we have for the default action bar If you want to have black text instead
because the action bar has light color then you can this to "AppCompat.ActionBar" but we keep ".Dark.ActionBar" And next we set "app:popupTheme" And here we search for
"@style/ThemeOverlay.AppCompat.Light" and this will take care of coloring
the menu pop up properly if you want to implement a menu later And lastly we set "android:elevation" and set this to "4dp" This will draw a shadow below our
action bar However, this only works on API
level 21 or higher and will just be ignored on lower
API levels Below this "Toolbar", but within
this "LinearLayout" we put "<FrameLayout" and set this to "match_parent"
width and height as well We change it into a self-closing tag and we give it an "id" which we will name fragment_container And the name already implies that we will later put our fragments
into this "FrameLayout" And this will fill the whole screen
below our Toolbar And that's it for our main content Now below this "LinearLayout" but
inside our "DrawerLayout" we put a "NavigationView" this one here
"android.support.design.widget.NavigationView" And this is the navigation drawer itself We set the width to "wrap_content" and the height to "match_parent" because it should fill the whole
screen in the height We change it to a self-closing
tag as well And in here we set "android:" layout_gravity="start" This will place the navigation
drawer on the left side of the screen You can also put it to the "end"
which will be on the right side of the screen however, this is not meant for
navigation but more for actions on the content itself Usually you want a left navigation drawer We give it an "id" as well we will call it "nav_view" And now we add our header with "app:" Pay attention, this time it's not
"android:" it's "app:" "headerLayout" and here we search
for our "nav_header" layout we created And this will automatically place
the header in our navigation drawer And now we also set "app:menu" And as you can already imagine,
we pass our "drawer_menu" and this will fill this navigation drawer Now we can't see our drawer in this
"Preview" window here because it's placed left from our
main content but what we can do is we can go
all the way up into our "DrawerLayout" again and add another attribute "tools:openDrawer" and here we
pass "start" And now we can see our drawer in
"Preview" here And it's beautiful, if you ask me Again, I'm gonna press
[Ctrl +Alt + L] to put everything in place and our layout is finished Now we only have to go into our
"MainActivity.java" file and make some slight changes there and our drawer will be working And first we have to tell our app
that we want to use our Toolbar as the ActionBar because we removed the default
ActionBar So we need a reference to our Toolbar We write "Toolbar", but here we
have to choose the "v7" one pay attention to that We call it "toolbar = findViewById(R.id."
and the ID of our toolbar in XML was "toolbar" semicolon And now we simply call "setSupportActionBar" and pass our "toolbar" And this will set our Toolbar
as the ActionBar Pretty straight forward And this will for example place
the title of our activity in the toolbar or place the options menu there
if we create one Now let's test our app and see
how this looks So this is our activity, our toolbar
is in place and we can open our navigation
drawer and there it is But we are not finished yet As you can see our drawer is below
our status bar but we want the transparent status
bar and show our drawer below it also we can't click anything yet and we don't have this button here
in the top left corner which opens the drawer And in this video we will take care
of the status bar and the button and we will handle the click events
in the next video So back into our MainActivity At the top here we create a member
variable for our drawer layout itself private DrawerLayout and we simply call it "drawer" In our "onCreate()" method we assign
this variable drawer = findViewById(R.id.drawer_layout); And now to get this menu button
in the top left corner of our activity we could either create this hamburger
icon as a drawable file place it there as the "Home" button and
then handle click events ourselves and open the drawer there, but this way we wouldn't have this rotating animation that we get
when we open this drawer And there is a handy class which takes
care of all of this and it's called ActionBarDrawerToggle But before we create an instance
of this "ActionBarDrawerToggle" we have to quickly create 2 string
resources So we go into our "values" folder here and open "strings.xml" Below our "app_name" here we write
"<string" we give it a name navigation_drawer_open we close this And in here we write (without quotation marks) "Open navigation drawer" Now we copy this, put it below and change this to "navigation_drawer_close" and "Close navigation drawer" Now this text won't actually appear
in our app This is basically just for accessibility
for impaired people for example for blind people that
need a screen reader to know what is happening on the screen However, the "ActionBarToggle" class needs
these 2 strings values as an input So we create them, go back into our MainActivity Here we continue We call our ActionBarDrawerToggle "toggle" = new ActionBarDrawerToggle() Here we first have to pass a Context Then we have to pass our "drawer"
variable comma, and our "toolbar" variable Because these are the 2 views that
will be connected and synchronized comma, and I'm gonna continue in
the next line And now we have to pass these 2
string resources we just created So we write "R.string." and first "navigation_drawer_open" , and "R.string.navigation_drawer_close);" And now below we take our "drawer"
variable call ".addDrawerListener()" and pass this "toggle" variable And lastly we call toggle.syncState() And this will take care of rotating
the hamburger icon together with the drawer itself But you will see this in action
in a moment Now before we make our status bar
transparent we go outside of our "onCreate()" method and we override "onBackPressed()" Because when we press the "Back" button
while our navigation drawer is opened we don't want to leave the activity
immediately, instead we want to close our navigation drawer So above the "super" part here we write "if (drawer.isDrawerOpen())" and here we pass "GravityCompat"
with capital G ".start" Curly braces If this is the case, we want to
close it So we take our "drawer" again .closeDrawer() And here again we pass
"GravityCompat.START" If you want to close a drawer that
is on the right side of the screen then you have to pass "GravityCompat.END" "else" which means the drawer
is not opened then we want to call our
"super.onBackPressed()" which will then in our case close
the activity as usual Okay and now let's make our status
bar transparent For this we will use the "statusBarColor"
attribute which only works on API level 21
or higher on lower API levels our status
bar will just be opaque If the API level in your example
is already 21 or higher then you can simply put this attribute
into the "styles.xml" file In my example the min API level is 19, so I can not put it directly
in here Instead, I have to create a separate
"styles.xml" file that will be only applied for API
level 21 or higher So for this I right-click
on "values" create a new "Values resource file" We have to call this "styles.xml"
as well and from this list down here click
on "Version" and then click on this ">>" icon here And here for "Platform API level"
we pass "21" This will create a "styles.xml" file only for API level 21 and higher So we click on "OK" And now as you can see here, we
have 2 "styles.xml" files And now let's quickly go into
our normal "styles.xml" file without "(v.21)" and copy our "NoActionBar" theme here Copy this and then we go back into our
"(v21)" styles.xml file and between these "<resources>"
tags here we simply pass the style we just
copied but we add another attribute <item and here we search for android:statusBarColor ">" and in here
we pass @android:color/ and here we search for "transparent" And as the name implies this will make
the status bar transparent but only on API level 21 or higher But as mentioned, if you watch
this video in the future and your min API level is already
21 or higher, then you don't have to put it in here Instead, you can just add it to the
normal "styles.xml" file And now our drawer is finished.
Let's test it So, as you can see now we have
our hamburger icon here and when I pull this drawer open
you can see that it's rotating And you might have seen this before
in other apps We can also click on this icon which will also open our navigation drawer And as you can see we have our
transparent status bar Right now we don't handle click events,
we will take care of this in the next video So make sure to subscribe to the
channel to not miss that And if this video was helpful,
please leave a like Take care.
