Navigation Drawer with Fragments Part 2 - LAYOUT AND HAMBURGER ICON - Android Studio Tutorial

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
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.
Info
Channel: Coding in Flow
Views: 375,254
Rating: undefined out of 5
Keywords: 2018, android, android apps programming, android development, android studio, android studio tutorial, android tutorial, beginners, how to make android apps, java, tutorial, android actionbartoggle, android actionbartoggle deprecated, android action bar toggle drawer, android hamburger, android hamburger menu, android hamburger animation, android hamburger menu icon, android hamburger menu animation, android navigationview, android drawerlayout, android drawerlayout tutorial
Id: zYVEMCiDcmY
Channel Id: undefined
Length: 15min 5sec (905 seconds)
Published: Fri Mar 16 2018
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.