Setting Up Your Navigation Drawer

Ufinix Academy
A free video tutorial from Ufinix Academy
Learn programming and app development
4.3 instructor rating • 4 courses • 4,828 students

Learn more from the full course

Xamarin Android Uber Clone App with C# and Firebase

Learn advanced Xamarin Android concepts by building a fully complete and functional Uber Clone app using Firebase

15:26:55 of on-demand video • Updated July 2020

  • Learn to build complete Uber Clone apps (driver and passenger) with C#, Xamarin and Firebase
  • Learn to create, remove, update and delete records in Firebase Database
  • Save and handle data locally using Shared Preferences
  • Learn how to use Google Location and Map services in your Apps
  • Learn to find direction from one point to the other with Google Direction Api
  • Learn to find place address with Location Coordinates using Google Geocoding API
  • Learn advanced usage of C# Lambda Expressions
  • Learn advanced usage and creation of custom C# Event handlers
  • Learn to create and design beautiful User Interfaces
  • Understand how to create Local Notifications using Android Notification Manager
  • Learn to make asynchronous WebCallls using Rest Api
  • Learn to initiate a phone call from your app using Native Intents
English [Auto] OK guys. So welcome to this class. So here we're going to be learning how to add navigation draw you know to our app. So I mean activities show again an example of what we'll be expecting. Navigation draw is going to look like this. All right. So let's quickly set this up immediately because this can actually take some time so let's rush it up at once OK. So the first thing we need to do is to open up the main layout for activity for the main activity. Right. So we have some designs that we generate. Get rid of it. Okay. So to be able to set up on location you need to bringing I draw early. All right. Before we get done. Draw me out. OK copy this right here. So then I still want to do is to change this to fewer parent changes to fewer parent and these are in need than orientation. Of course I need to set the I.D. because you will be needing this inside the app later on. All right. So the idea will be I'll call it draw layout. We actually need to layouts All right. So the first layer that we'll have here is the one that we're going to be using to define our navigation view. It's always very proper to include a new layout file where you will be having you know most of this stuff that you need or your main activity right. So I'm going to create a new layout and call it include and ask your name. So what we'll be using doing with this file we actually going to you know how our design in this particular layout and will include included to our main activity layout. All right. So I'm going to have to change this to coordinate the layout so I have Android and I support the design we get we get DOD's coordinate the layout. OK so copy is reported here. Right so I would just remove this and add an I.D. because well actually we'll be needing this later on in the app. So at night you said I can't always reference to it in our main activity called root for you OK. So the lesson I want to do is I want to add a frame layout you know iframe layout is always very useful because it allows you to lay out things about each other right. So we are going to be making user friendly our delight. All right. So I'm going to define your frame layout of course. And so my treat would layout hides real tight you're a parent layouts we'd a parent and of course I need to set the background to something something dark. All right so let's quickly rush into our calls this Excel and define an ash color that of course we'd be using for missteps. All right. So said on your name over each OK and the value will be hash E to E to E. OK soon. Let's continue with our design. So the background we've sent let's call slash will be ash. All right. So let's just keep it Ash said I will always know the difference from based on normal weight. So let's add view. OK. So now when we include this particular layout found two main activity if we can see tags here then we know that yeah. Everything that we did worked out well. All right. So let's add some other attributes. You're going to say android that lay outside. Say this are a wrap content enjoy. Earlier read much parent Android that test just said is mainly out. Very so. Still get rid of this text this TextView. OK. Text size. They say they're set aside to NTSB and render end gravity and send it to center and of course Android the layout. Gravity center OK so we now have this. So let's go back to our main activity layout design and complete our navigation view. So here to bringing our layout file the other one we we designed the other one we just curate and we say include So why do you want to include once include a layout file so say layouts airflow to add layout slash include main All right. So that's basically all we need to do so before them is always best we put this in any container OK so let's as much leverage here as orientation core to radical much bigger and much period and OK so we copy these down so as you can see this inclusion is actually working can see me later and this mini that is actually coming from this particular layout file. OK so now we are done with that. Let's go ahead and add our navigation. So to do that we say Android don't support the design and seating navigation view. OK. So let's add some attributes to this. So the festival and will be the idea of course we need the I.D.. Of course we need the I.D. So we call these cards in our view. OK. And under layout hide rematch parent enjoyed don't lay out weak. Of course we don't want you to carve out the entire place so 300 is my lucky number when setting navigation drama. Okay so the background is you use wide overlaid and recited to start. Okay. So we're done now. Some of the things that we actually need to bring in will now be the head layout we need ahead early on right ahead. Layout is is this particular section that has our account image in our town name all right. So to be able to do that we need to define a new in new layout. Okay so we need to add in new layout especially you know to save as they had a layout for our navigation draw. Okay. So let's add this add. Now so quickly we're going to change this to primly our guys in the way right. Because we want to lay eyes on items above each other. Okay so it is always very useful. And our height is going to be going to leave it as 200 DP and background background needs to be white under the background so going to call a slash over white sorry team. Let's send it team at St. slash team overlay team overlay. Let's just dunk. The reason we are using gap is to ensure that whatever we put on top of their primly are we. We actually show. OK. So I think I don't mean that said in next thing we need to do is is now odd why. Secondly me guys. We actually use the second image in it early on when we are designing a logging and position pages are right. So you can see that it has sufficed here. Right. So let's bring in some archery wood Android. I d I d going to call it account image layout Leon's high to be alcohol to see 100 DP layout tweet layouts week real points or hundred DP and Nia gravity would be a core to center. So now they're resourceful they are going to be using the image we're going to be display here. OK. Which is this. So guys I advise that you head down to the resources for this particular lecture of added every single image and icon that you'll be needing. So I have mine on my desktop so I'll just go ahead and add it from there. All right. So is this thing item so my desktop argued I lecture trying into one resources. OK so I didn't being G so now I've added the image we're going to reference it as our source. So Android as I see we're going to add drama or draw or slash account Santa Clause OK. So let's quickly add our tax view that would display the account name as if my name is you Phoenix. Then my name should be showing when I log into the app. Right. So Android don't I.D. I'll call it is an account data. All right so don't try and lay out and they are tied to vehicle to content. Well my layout with real code too much bearing and of course gravity will be center and they are gravity will be. But on my test will be username OK so of course I need to add some margin to the bottom so that a tune just just get too close to the Indian pie need to be strong we are only here right. Let's add some margin. Lay out my between and just add to our DP OK so that looks good. So that is if you notice days days a block is a very tiny line here. Right. So this line is so beautiful that I want to add it here. So do that with the view using view. So let's get some attributes. So I'm doing the layout now outside of airport to one DP on Android. The layout with the airport too much power in and Android layout gradually rebuilt. And of course the call. That's the background where the ground will be our to add color slash all but ash. All right so you can see it's showing off here. So guys this is all we need to do here. So now we need to head back to where we are we are designing our navigation view and I'd add our head layer. So had our layouts here we're going to lay out had a layer OK so which is exactly what we have here. Ali. OK. So now we are done with that. The next thing we need to do is to create our menu. All right. So while you guys are seeing here we need to create a menu. So to do that as we go to our menu folder in our resources seems to not have a menu for that. So he creates one calling menu. So let's add a new menu x amount. All right so it is the menu. So we call it now mean. All right bam. So it has been created for us. So that is let's go ahead and add our menu. OK so we don't need this. Let's get rid of this item. So the first thing we want to do is to create a group. So we wanted to be grouped so inside of the grill. I'm going to add so we have profound payment history from helping about. So let's add. So let's add the first one which is profile. OK so Android don't I.D. slash nerve profile. So I'm going to call it love profile. Tie to we profile. So guys we need to set the high cones. Well first of all let's define all of them and we'll get to that point. So item for the second one the second item will be payment. So Android I.D. So instead of doing this we could just just copy this and make it shorter for us so changes to now payments so we changed this to so it changes to NAV history on changes to history. So any changes to NAV promo changes to promo so we changes to NAV help and changes to help changes to about so that's exactly what we have here. So guys the next thing we need to do is to bring in our icons too. Like I said before I've already put in all the icons that you need for days inside the resource for this lecture so you can just go ahead and download it and add it. So let me just show you guys out to add this. All right. OK so I opened the resources so for the first time which is profile we'll be using persons. OK. So what we need to do is to add the images inside each of these photos to the corresponding meet my food as in Visual Studio. OK. So the first one for example this is for a hedge DPA. OK so we copied and place it inside out. It might be hedge CPI for there. And that has been added. So we do that for the second one which is m DPA so copy it and put inside of M DPA so s has DPA I paste it these excess hedge DPA So guys what I'm going to do is I'm going to give us a few minutes OK instead of me staying on boring you guys you know doing it one after the other I'm going to give you three minutes to go over that. OK so I want you guys to add every single icon that we have here just the way I've showed you guys. OK so I'm going to give you three minutes and I'm going to come back. So we continue. Of course it's only up to three minutes. Hello hello. So welcome back. So who finished first. Of course I did mine first. All right guys so let's continue. So once you reference the icons once and the icons. Now. OK. So to do that we see an android icon of course the age limit map for the. So we say medium medium slash. I see pursing action like so for payments think I have an OK. So instead of having to go about the whole thing over and over industry chin and see from old range came from Uncle range I can see a one to one they still have you know this range for you. OK. So we've got to make you checked if 90 to an inch sharp. So that's true OK so the next one is action and the last one help action. So guys this is it. So what we need to do is to go back to our activity you know our navigation view design and you're going to add demeanor so we're going to see a menu meaning slash meaning. OK so guys this is this is it. So this was and make this two feet this system window is OK today to get to the top. So I think we're done now. So what we need to do is to run this and ensure that everything is fine. OK. So guys let's check out OK guys so I think we have some as Rick I won't happen here. OK so let's click this festival let's go to our head Leah it seems there some areas in was no well formed. OK so this is he's taking so that they cannot get. OK so let's run this again and see this Butte DNC OK so I think the last thing is in our activity we defined his bottom before and we got rid of it. So let's and get rid of it entirely. OK. So I think we are now doing so last year on this OK so we still got this error. OK guys so what I did to get rid of the error was I I deleted you know our header which initially was had I lay out. So I decided to rename it to November. OK. I think you know it's kind of giving issues or something. All right. So that's what I did and I copied make good the formal code and a steady hand. Everything looks fine and OK to me. All right. So if you've done that the nice thing to do is to ensure that you set set you know how to you know to the header layout if you're done that the last thing we need to do is to go to a splash screen. We wanted to study immediately from an activity we don't want to log into Firebase and all those things. OK so now let's let's run it. And I also want to mention this. OK. You can run yours and get some error if you get any error like you know any error any or usual error guys. So what to do is enjoy you clean the projects OK clean the project and after you're done cleaning. You reviewed OK in that way to get rid of all the errors they possibly may have. Well for now let's run it and see this in action so that is coming up in a jiffy OK. So guys so these are mainly out. So if we slide from here out. So this is this is the menu. Something is wrong. So our text is not showing. So let's go ahead and resolve that. Well this one is showing very well. And we need to make this slow to come out as I sense kind of OK. So let's do that as quickly OK guys. So this is what we have for our TextView so everything is fine now. Right. So what I did was to add some colors to a tax view and I think everything is OK. So like I said the next thing we need to do is to make our I want this to be orange. So to achieve that we like need to define in your style. OK. So you will go to standard Asimo and define a new style. This will be very special fun navigation view. OK so this code is navigation down right. So we're going to use sense call for all of each right. We're going to use a sense corner on the corner attributes OK so let's go back to our let's copy this. So now let's go back to our navigation to use it is just a shorthand way of achieving that. So we see app team the team go to St. slash navigation style. All right. So that's that. So let's run you don't see what we have so the app is viewed in OK so happy is being deployed OK. OK good. So let's test this ban. So guys as you can see this is our navigation view. It's beautiful now in the next class guys let's get rid of this. You know this action by you want to make it transparent. So guys see you end in s class.