Latest Android Studio Navigation Drawer Tutorial (Part 1) - 2016 - Hello friends Android tutorial and tips trik, The article you are reading this time with the title Latest Android Studio Navigation Drawer Tutorial (Part 1) - 2016, we have prepared this article for you to read and download the information therein. hopefully fill posts article -, article (LATEST, article (Part, article 1], article 2016, article android, article Drawer, article Navigation, article Studio, article Tutorial, we can write this you understand. Well, happy reading.

Title : Latest Android Studio Navigation Drawer Tutorial (Part 1) - 2016
link : Latest Android Studio Navigation Drawer Tutorial (Part 1) - 2016

Latest Android Studio Navigation Drawer Tutorial (Part 1) - 2016

Hello everyone, my name is Oum Saokosal.

Today, I will talk about how to do the NavigationDrawer in Android Studio.

In this lesson, I will use Android Studio2, which is the latest version today and as you can see this is the Navigation Drawer.

It is a typical feature for Android applicationthese days.

So, you can contact me on YouTube at: youtube.

Com/user/oumsaokosalFacebook.

Com/kosalgeek twitter.

Com/okosal orYou can download my source code at kosalgeek at github.

Com/kasolgeek So I will make three videos about this kindof thing, because there are many things to be covered.

In this video particularly, I will talk aboutthe 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 viewson the fragment, for example how to add in button, edit text, LibView, RecyclerView andyou 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 navigatordrawer from the left side to the right side.

As you can see on Facebook, if you go to Facebookapp, you see the navigation drawer still exist there, but are not from the left side, itis from the right side.

So I will show you how to do that and alsothe 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 likethe basic thing.

So let's go to Android Studio.

As you can see now, I use Genymotion whichis 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 aswell, but maybe I will skip it first, so this is the user interface for the Android Studio2.

It is a little bit different from the version1.

5 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 oneat first, you can just use the basic activity as well and then later on you can add an activityand then choose the navigator drawer, but because we don't have any, you know, startupactivity, 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 activitywith navigation drawer in, so let's just run it and you will see the navigation draweralready, so it is not kind of big thing to do it, you know, like in this day, becauseit is a template.

Like in the old days, you have to write yourown 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'sit? No, it's not because you gonna have to changea lot.

This is just a template, okay, but beforeI go on to the code, I want to kind of like give you a concept of this.

Actually, the navigation drawer is a new conceptand Android just put it very late, you know, the early version didn't have that and itis kind like a mess, because they want to put something, like a new thing and then wantto 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 theanimations 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'thave any kind of mechanism to hide all the things, it shows you all the code and if youdon'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 thatyou can catch on.

So, first you have to understand the layoutokay, 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 aswell.

The activity_main is the real layout for anythinghere, okay.

Let's go to the code, you will see better.

See the activity_main has the new tool calledDrawerLayout.

The DrawerLayout as well didn't exist in theearly version of Android, so it just add it on, you know, and this one you can thing likethis maybe we can do it.

Like all other thing here that you see isthe DrawerLayout and you can change, you can make it size like that, but I will show youhow 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'snot inside here; it is up here, okay.

So the app_bar_main is similar to the activity_mainin the layer activity, you know, it holds the tool bar and the floating accent buttonand it's not nothing special here.

If you want to change it, you can change itin the app_bar_main and then go back to activity_main here to see the navigation view is a new thingas well.

So there are two things here, DrawerLayoutand 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 navigationdrawer.

You can change the icon; you can change thecolor as well.

So, I don't want to change it now, just wantto 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 insidethe menu here.

Okay, so now you can see the whole menu andthere is no preview for menu.

So, there are two part, one is the group andinside 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 youcan have a menu and you can have an item and inside the item you can have another menuand item as well.

Nothing here because it is just a simple oneand 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 thatmenu, you have to go to main and this one and over here you will see the all navigationitems like this.

It is for the navigation menu and you cando anything over here, so let's say you want to have a Toast something like this and youwant to do it on the Galley as well.

So, there are a lot of things over here andthe one thing I want to show you as well are that this method is duplicated, so you haveto change to add.

So I think it is kind of the IDE code generatedthing.

So the app menu is for this which is not thatimportant much and you can just change, if you do not want to change anything, just don'ttouch 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 isin the drawable/side_nav_bar.

So you go to hear, this one okay.

If you want to change, you can change thecolor here and the icon that attach it to the menu here is the icon that created bythe XML code, so it is going to be very flexible and you can increase the size and decreasethe size without any change in the resolution, but it's a hard thing to do, you have to understandhow to draw it okay.

So, I would not type it now, but I just wantedto point it out.

So if you want to use it you can just useit or if you don't want you can just browse for an icon from the internet and change itokay.

So, here is the menu.

If you see, it takes to the icon from thedrawable 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 themenu 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 apiece of theme inside an activity.

It is not the whole part, may be some sortof this, okay.

So you can have multiple fragments in oneactivity and for now, as you can see, when we click on this, you will text one thinghere which is the fragment, okay.

If you click on gallery, you will see anotherthing which is another fragment attached to the activity.

You have to understand and use the fragmentin the navigation drawer, but actually direct fragment is not that hard.

Fragment is a, you know, like a differentkind 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 isnot the whole thing, it's just something here and in the fragment, you see, there are threechecks, okay.

So, the first one is very important becauseyou want to have layout attached to the fragment and then this one will make a lot of codefor you, but sometime you don't it, but let's start from the unchecked one and I will createanother activity with this check and the last one with the old checks.

Okay, so let's uncheck it this all and maybewe want to change the camera fragment like that, so this is the fragment and you do noticeit.

It extends to the fragment, not AppCompatActivity.

This one is AppCompatActivity, but this oneis fragment and the code is less than activity.

You need only one method, it is called onCreateViewwhich is the most important method for a fragment, and I want to point out one thing here inAndroidManifest, usually when you create an activity, you will see an activity attachedto AndroidManifest here around here, okay, but one is not.

It is not an actually, it is a fragment, sowe will not attach any code in AndroidManifest.

So, here is the fragment and maybe, you wantto add something okay.

It has the layout as well, so here is thelayout fragment_camera.

It is kind of mess now.

There are a lot of things, and before layoutfor fragment is frame, but you are free to change to anything.

I want to use RelativeLayout, it's just thetext, 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_activityhere.

I will explain this code later, but I willjust show you the basic thing here; this is the camera right.

So you want to call the camera, so first youcall 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 thisto set something with the real fragment for the camera and click on the gallery, you wantmaybe attach the gallery to this one.

So what is this one? This one is in the content_main okay, andif use these kind of navigation drawer in the early version, maybe Android Studio, nowI am using Android Studio 2, but 1.

5 was okay, but if you use maybe 1.

4 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_mainyou 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 becausein the activity_main here it attach, like include the app_bar_main and inside the app_bar_mainit will include the content main, so it is like a layer and a layer and a layer.

So it's kind of tricky, but it is importantfor flexibility.

Now you can have a separate layout for thefragment, you don't have to write any code inside here, you have their own layout.

So you have to know the name of this RelativeLayoutand then.

So remember, when we click on this, you canchange 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 thelayout 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 replaceand remember the camera fragment here attaches to the fragment_camera here.

So it will replace something from here tosomething in there.

So remember, first create an object from thefragment, use the fragment manager here and then call the beginTransaction, Replace, andwith this, but maybe you need another one.

This is very important as well called getTag.

The last option here is important when youwant to call the fragment back from the fragment manager.

You can call it by tag.

I will explain it later on and if you wantto know now, maybe we can cover this, but now we don't it, but it is important for lateron.

Okay, so now camera.

You can see the layout from the camera fragmenthere.

So even the Hello World is not removed, youjust write a text to that, so it is like place something over that, so you might want togo to content_main and remove this one, okay.

Now, it is done, but maybe you want to discovermore when you want to add another fragment, so like I told you early on when we createa fragment, there are three options, now I want to leave this and use only the includefragment factory method and I will call it maybe gallery.

Okay, so this code is a little bit messy actuallybecause it will generate a factory method for you.

It is important when you want to pass somedata 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 param1and 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 youhow to call the method here.

So, GalleryFragment and then we call GalleryFragment.

NewInstance.

Now you can pass the data from here, so let'ssay some1 and some2 and then you need the same code here, except we want to change thisand you will pass the RelativeLayout for the fragment, because you want to use the samelayout and in GalleryFragment maybe you want to go to resource and you want to change something.

Again I want to change the Frame Layout toRelativeLayout 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 thedata and then maybe show the data inside the GalleryFragment.

So of course it passes from the parameter1 and parameter 2, now you can use that.

Hope you will need something else and I willshow you in the next video and this one I will just use the log and so you can see thedata in the log and this is the mParam1 mParam2.

Okay, now you go to gallery, and the tag isGalleryFragment.

So the method here, the new instance is avery good way to pass a data around from one fragment to another, so now I want to showyou 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 itokay.

The parameter1 and parameter2 and now youcan have the call back okay.

The call back is kind of like when somethingis done, you can get the data inside the main activity.

Remember when you call the new instance, youcan pass the data from outside to gallery fragment but the callback here is on fragmentinteraction listener, it's a callback.

Its means like after done something in thefragment, 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 changethe method as well.

Let's say this is a string and I want to changeto maybe integer and maybe just one parameter.

Let's just delete it like this, okay and theparam1 is a string, so it is a string, so I have to change to integer this or it isgoing to have some problems here and we got getInt instead of getString.

Now inside here, we want to change somethingand remember this, you need to call like; okay when you are done, then you want to sendthe data back, so this is the method.

The ButtonPress is the method for you to callto send the data from this fragment to outside okay.

So you want to call it inside here as welland this method as you can see, so you are free to change anything here.

It is just an example for you, so if you wantto change, maybe now you want to change this to string, right, so I want to change thestring.

So now I get the data as an integer and Iwant 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 thedata and then you will call the on fragment interacts and anyone that is outside thatimplement the on fragment interact listener, you will be able to see the data.

For this one, we will get the data that maynot be through to you yet.

As you can see, now some error, because youwant to get the data, so maybe just number 5, okay, and then you will need the same codehere.

Okay, so let's run.

The error here is not the real error, butactually it is just like a something to tell you that you forget to implement on fragmentinteract 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 youhave 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 theinterface is inside the blank fragment.

So now implement method.

So here is the place that you will receivethe data back.

Okay, now you want to Toast the data.

So we sent the data as an integer and it goesto the BlankFragment here doing some calculation and calls the on button press and it will send the databack by the on fragment interact listener and inside here you can get the data backby the on fragment interaction.

So this is the new way and this is the recommendedmethod 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 eventand view on the fragment.

Please don't forget to subscribe to my channeland I will see you in the next video.

Thank you.

Thus Article Latest Android Studio Navigation Drawer Tutorial (Part 1) - 2016

That article Latest Android Studio Navigation Drawer Tutorial (Part 1) - 2016 This time, hopefully we can give you all of the benefits. Well, I'll see you in another article post.

You now read the article Latest Android Studio Navigation Drawer Tutorial (Part 1) - 2016 the link address http://svedda79.blogspot.com/2016/02/latest-android-studio-navigation-drawer.html