Latest Android Studio Navigation Drawer Tutorial (Part 1)

Android Studio Navigation Drawer 2

Hello everyone.Today, I will talk about how to do the Navigation Drawer in Android Studio. In this lesson, I will use Android Studio 2, which is the latest version today and as you can see this is the Navigation Drawer. It is a typical feature for Android application these days.

Android Studio Navigation Drawer 2

In this post particularly, I will talk about the basic thing of the Navigation Drawer and I will talk about the icon, the color, menu, and how to add fragments as well. In part 2, I will talk about how to add views on the fragment, for example how to add in button, edit text, LibView, RecyclerView and you want to have an Event Handler on the fragment as well, and part 3 is a kind of bonus thing, you might not need it but maybe someone need it.

This one is about how to change the navigator drawer from the left side to the right side. As you can see on Facebook, if you go to Facebook app, you see the navigation drawer still exist there, but are not from the left side, it is from the right side. So I will show you how to do that and also the animation like you click on this one, the animation will come up from the left, slide in slide out like that. It is not the full animation, but it is like the basic thing.

So let’s go to Android Studio. As you can see now, I use Genymotion which is the faster emulator rather than use the native one. You can download from Genymotion, it’s free. So this is the user interface. Oh! There is an update for the Android SDK as well, but maybe I will skip it first, so this is the user interface for the Android Studio 2. It is a little bit different from the version drawing. So, let’s start a new Android Studio project. Nothing’s changed, just do the same thing. So let’s type Navigation Drawer example 1. Next, you just do the same thing. So now, we choose this one, okay.

Actually, you don’t have to choose this one at first, you can just use the basic activity as well and then later on you can add an activity and then choose the navigator drawer, but because we don’t have any, you know, startup activity, so it’s just for example, you know. So let’s choose it. Okay, let’s call it MainActivity as usual. Ok, not it’s completed, now you see new activity with navigation drawer in, so let’s just run it and you will see the navigation drawer already, so it is not kind of big thing to do it, you know, like in this day, because it is a template. Like in the old days, you have to write your own navigation drawer.

It was kind like very painful, but these days, very good, but we have to understand and if you don’t understand we cannot change. Ok, that’s it! Navigation drawer okay, but you like that’s it? No, it’s not because you gonna have to change a lot. This is just a template, okay, but before I go on to the code, I want to kind of like give you a concept of this. Actually, the navigation drawer is a new concept and Android just put it very late, you know, the early version didn’t have that and it is kind like a mess, because they want to put something, like a new thing and then want to support the old thing, so it is a lot of code going on behind that. Even you see, ok I click it and you see the animations slide-in, slide-out like that, even you will see that it’s a really animation. It’s painful to do that, but Android doesn’t have any kind of mechanism to hide all the things, it shows you all the code and if you don’t know that you can mess it around and maybe you can end up with a huge error, okay.

I will explain it step by step; I hope that you can catch on. So, first you have to understand the layout okay, so there are four layouts just for one activity. As usual, maybe you remember the main activity, so it’s going to create an activity main and the content is a new thing for Android as well. The activity_main is the real layout for anything here, okay.

Android Studio Navigation Drawer

Let’s go to the code, you will see better. See the activity_main has the new tool called DrawerLayout. The DrawerLayout as well didn’t exist in the early version of Android, so it just add it on, you know, and this one you can thing like this maybe we can do it. Like all other thing here that you see is the DrawerLayout and you can change, you can make it size like that, but I will show you how to change size later on and inside the DrawerLayout, you can see there are two components, one is include, so in include, we will include another layout called app_bar_main.

This is the app_bar_main and you can see it’s not inside here; it is up here, okay. So the app_bar_main is similar to the activity_main in the layer activity, you know, it holds the tool bar and the floating accent button and it’s not nothing special here. If you want to change it, you can change it in the app_bar_main and then go back to activity_main here to see the navigation view is a new thing as well. So there are two things here, DrawerLayout and NavigationView. So the real navigation is here in the NavigationView. So it holds the menu and also the nav_header_main. So where is nav_header_main here? Here is the nav_header_main.

So this is like the top part of the navigation drawer. You can change the icon; you can change the color as well. So, I don’t want to change it now, just want to explain it a little bit and here is the menu. It is the most important part here. Here it is tied to another menu here. So all the menu that you can see here is inside the menu here. Okay, so now you can see the whole menu and there is no preview for menu. So, there are two part, one is the group and inside the group you have the item tag which is a simple item as you can see here okay. But if you want like a part, for example, this is a like the communication part, so you can have an item and inside the item you can have a menu and you can have an item and inside the item you can have another menu and item as well.

Nothing here because it is just a simple one and this is the navigation, like a camera app, so see the import here. This is the import okay. Let’s say you want to have any action on that menu, you have to go to main and this one and over here you will see the all navigation items like this. It is for the navigation menu and you can do anything over here, so let’s say you want to have a Toast something like this and you want to do it on the Galley as well. So, there are a lot of things over here and the one thing I want to show you as well are that this method is duplicated, so you have to change to add.

So I think it is kind of the IDE code generated thing. So the app menu is for this which is not that important much and you can just change, if you do not want to change anything, just don’t touch it and here you want to change this all, may be you want to change the image, so here is the layout here, background. You can change the background here; it is in the drawable/side_nav_bar. So you go to hear, this one okay. If you want to change, you can change the color here and the icon that attach it to the menu here is the icon that created by the XML code, so it is going to be very flexible and you can increase the size and decrease the size without any change in the resolution, but it’s a hard thing to do, you have to understand how to draw it okay.

Android Studio Navigation Drawer 3

So, I would not type it now, but I just wanted to point it out. So if you want to use it you can just use it or if you don’t want you can just browse for an icon from the internet and change it okay. So, here is the menu. If you see, it takes to the icon from the drawable here and you can just delete any item you don’t want to. So, let’s say I want to use only two, Camera, Gallery, and now Share and I have to go to main_activity here because it has all the menu for Camera, Gallery, and Share. We don’t need this one. So, now you have a different background here. You can have different menu as you like, okay, so now it’s time to add some fragment. So, what is a fragment? If you don’t know fragment, fragment is a piece of theme inside an activity. It is not the whole part, may be some sort of this, okay. So you can have multiple fragments in one activity and for now, as you can see, when we click on this, you will text one thing here which is the fragment, okay.

If you click on gallery, you will see another thing which is another fragment attached to the activity. You have to understand and use the fragment in the navigation drawer, but actually direct fragment is not that hard. Fragment is a, you know, like a different kind of activity, but it is not activity, it is a small part of activity. So let’s create a new fragment here. So you go to new and fragment here. You can just use blank fragment. As you can see, it is a part of this, it is not the whole thing, it’s just something here and in the fragment, you see, there are three checks, okay. So, the first one is very important because you want to have layout attached to the fragment and then this one will make a lot of code for you, but sometime you don’t it, but let’s start from the unchecked one and I will create another activity with this check and the last one with the old checks.

Okay, so let’s uncheck it this all and maybe we want to change the camera fragment like that, so this is the fragment and you do notice it. It extends to the fragment, not AppCompatActivity. This one is AppCompatActivity, but this one is fragment and the code is less than activity. You need only one method, it is called onCreateView which is the most important method for a fragment, and I want to point out one thing here in AndroidManifest, usually when you create an activity, you will see an activity attached to AndroidManifest here around here, okay, but one is not.

It is not an actually, it is a fragment, so we will not attach any code in AndroidManifest. So, here is the fragment and maybe, you want to add something okay. It has the layout as well, so here is the layout fragment_camera. It is kind of mess now. There are a lot of things, and before layout for fragment is frame, but you are free to change to anything. I want to use RelativeLayout, it’s just the text, maybe I want to delete the text here, and maybe I want to add something cool. Just for an example, the date picker. So I want to call it from the main_activity here.

I will explain this code later, but I will just show you the basic thing here; this is the camera right. So you want to call the camera, so first you call camera_fragment, new camera_fragment okay, and you need the fragment manager. Let’s call it manager, getSupportFragmentManager. So here you need layout for the fragment. Remember when we click on this, you want this to set something with the real fragment for the camera and click on the gallery, you want maybe attach the gallery to this one. So what is this one? This one is in the content_main okay, and if use these kind of navigation drawer in the early version, maybe Android Studio, now I am using Android Studio 2, but was okay, but if you use maybe or early than that, you don’t have the content_main here. So the content_main here is for the here, the content thing you know, and before you had all the activity_main and inside the activity_main you would see something like a ListView or maybe some LinearLayout for the fragment, but now it separated the things, so the content_main here is just for the fragment and because in the activity_main here it attach, like include the app_bar_main and inside the app_bar_main it will include the content main, so it is like a layer and a layer and a layer.

Android Studio Navigation Drawer 4

So it’s kind of tricky, but it is important for flexibility. Now you can have a separate layout for the fragment, you don’t have to write any code inside here, you have their own layout. So you have to know the name of this RelativeLayout and then. So remember, when we click on this, you can change the ID of the layout. So I just call it relativelayout_for_fragment. It is kind of a long name, but it is very important because we can attach the fragment in here, so relativelayout_for_fragment, then you go back to main_activity here and here is the layout we want to replace. So the layout (R.Id.relativelayout_for_fragment) and now you want to type which fragment. So this is the replace and this is the replacer. What is the replacer? Here is the camera, okay. So this is the target you want to replace and remember the camera fragment here attaches to the fragment_camera here.

So it will replace something from here to something in there. So remember, first create an object from the fragment, use the fragment manager here and then call the beginTransaction, Replace, and with this, but maybe you need another one. This is very important as well called getTag. The last option here is important when you want to call the fragment back from the fragment manager. You can call it by tag. I will explain it later on and if you want to know now, maybe we can cover this, but now we don’t it, but it is important for later on. Okay, so now camera. You can see the layout from the camera fragment here. So even the Hello World is not removed, you just write a text to that, so it is like place something over that, so you might want to go to content_main and remove this one, okay. Now, it is done, but maybe you want to discover more when you want to add another fragment, so like I told you early on when we create a fragment, there are three options, now I want to leave this and use only the include fragment factory method and I will call it maybe gallery.

Okay, so this code is a little bit messy actually because it will generate a factory method for you. It is important when you want to pass some data from one activity to another. In this case, you can just hold the new instance, which is the factory method in the Design Patterns from Gang of Four (GoF) and this method will taketwo parameters and we will pass by bundle and then you can get it back from the param1 and param2 okay and then you can use it in here. Now you don’t want to type anything here, maybe just want to call it. It is quite similar, but I want to show you how to call the method here.

So, GalleryFragment and then we call GalleryFragment.newInstance. Now you can pass the data from here, so let’s say some1 and some2 and then you need the same code here, except we want to change this and you will pass the RelativeLayout for the fragment, because you want to use the same layout and in GalleryFragment maybe you want to go to resource and you want to change something. Again I want to change the Frame Layout to RelativeLayout here, the text here and you want to add a clock. Okay, this one is cool enough, now run it, okay, gallery and next one is camera gallery. But now I want to show you how to get the data and then maybe show the data inside the GalleryFragment. So of course it passes from the parameter 1 and parameter 2, now you can use that.

Hope you will need something else and I will show you in the next video and this one I will just use the log and so you can see the data in the log and this is the mParam1 mParam2. Okay, now you go to gallery, and the tag is GalleryFragment. So the method here, the new instance is a very good way to pass a data around from one fragment to another, so now I want to show you the last part of the fragment.

This one I will check all. Include the interface callbacks. Oh! I forgot to change the name layout to it, but it does not matter, just an example here. So this is the method you want to pass it okay. The parameter1 and parameter2 and now you can have the call back okay. The call back is kind of like when something is done, you can get the data inside the main activity. Remember when you call the new instance, you can pass the data from outside to gallery fragment but the callback here is on fragment interaction listener, it’s a callback. Its means like after done something in the fragment, you can get the data outside. Okay, let’s call it. This one is blank because we have the new instance as well, so maybe data1 and data2.

Maybe I will give the number, so you can change the method as well. Let’s say this is a string and I want to change to maybe integer and maybe just one parameter. Let’s just delete it like this, okay and the param1 is a string, so it is a string, so I have to change to integer this or it is going to have some problems here and we got getInt instead of getString. Now inside here, we want to change something and remember this, you need to call like; okay when you are done, then you want to send the data back, so this is the method.

Android Studio Navigation Drawer 5

The ButtonPress is the method for you to call to send the data from this fragment to outside okay. So you want to call it inside here as well and this method as you can see, so you are free to change anything here. It is just an example for you, so if you want to change, maybe now you want to change this to string, right, so I want to change the string. So now I get the data as an integer and I want to multiply it by 5 and then send the data back. This is just an example and I will send the data back, total now is a string. So now when we press it, you will send the data and then you will call the on fragment interacts and anyone that is outside that implement the on fragment interact listener, you will be able to see the data.

For this one, we will get the data that may not be through to you yet. As you can see, now some error, because you want to get the data, so maybe just number 5, okay, and then you will need the same code here. Okay, so let’s run. The error here is not the real error, but actually it is just like a something to tell you that you forget to implement on fragment interact listener, okay, because remember here you need to get the data back when I press on this, okay, on button press.

When I call this method, someone will listen, but now there is now one to listen, so you expect you to be working, but actually you have to ask this activity to implement the method, so what is it? The BlankFragment okay, on fragment listener. So you have to call like this because the interface is inside the blank fragment. So now implement method. So here is the place that you will receive the data back. Okay, now you want to Toast the data.

So we sent the data as an integer and it goes to the BlankFragment here doing some calculation and calls the on button press and it will send the data back by the on fragment interact listener and inside here you can get the data back by the on fragment interaction. So this is the new way and this is the recommended method from android for you to send the data to fragment to get the data from fragment. So that’s it for the basic of navigation drawer. I will meet you in part 2 about the event and view on the fragment.