Xamarin Android Tutorial 27 Creating a Right and Left Drawer Layout

what's up guys welcome to the 27th zamaron Android tutorial and in this video guys what we're going to be doing is coding up a drawer layout okay and to be more precise we're going to create two drawers all right and that's going to be a left and a right drawer so the left drawer is probably something that you guys have more than likely seen and it's a great way to give your users the capability to easily navigate throughout your app all right now the right drawer can be used for the same reason or I've seen it been used to show your downloads to show notifications and just to offer some more easy to get to features for your users okay so it is pretty common I've seen now to implement both a left and a right drawer inside of the same application and S the same activity so I decided to show you how to do both that way if you just want a right it'll be easyier to do if you just want a left it'll be easy to do or if you want both then this tutorial will be pretty much just plug and playay uh right out the box okay so before we start coding guys a few things to notice is that when we do the left and right drawers we need to make sure that they are never overlapping okay so so if the right drawer is open but we want to open the left drawer the right drawer will close and vice versa okay so also that's going to be happening if you slide or even if you push the buttons they should correlate pretty well okay the last thing to notice is the toggle that is listening to the left drawer okay so as the left drawer opens and closes the drawer toggle will also animate depending on its state okay now notice the right drawer does not do that okay so we'll also have to program that in as well all right so I just Tred to add in as much kind of thinking to this tutorial that way hopefully I run into any of the problems that that are that can appear with this kind of layout that way you guys won't run into the problems yourself okay so that being said let's get started guys now the first thing I'm going to do is I'm open up a new instance of zamon studio and for those of you guys that have been following along in my previous tutorials this might be pretty new to you uh of me using zamon Studio because I do usually use Visual Studio but uh some people have actually suggested that I make some tutorial series some tutorials with Zaman Studio IDE just because they're the ones they're following along with with some with zamon Studio I assume and they don't have visual studio so great idea guys uh I could agree more so wish I done it sooner now um so the rest of the tutorial I'm going to use zamon Studio but if you are using visual studio guys then it shouldn't be too hard to follow along and if you are using zamon Studio then you know hope you feel right at home so that being said let's get started guys I'm going to call this drawer layout tutorial this project and the first thing as always I like to go in and like to implement my my design okay so that kind of kind of gives me a good bearing on what to code so that being said let's go into our source file and you can see zamon sets up their normal template and we need basically just to erase all this okay so we're going to start from scratch and let me go ahead and get this thing out of the way and the first thing we want to do is we're going to want to actually bring in the the drawer layout okay so the drawer layout is actually going to be the parent of the activity okay so it's not a single view it's actually going to be the entire View and then we're going to implement a drawer inside of the drawer layout view okay hope that makes sense and of course we need our namespace and this is just going to be the usual stuff of course schemas okay okay and I will bring over the rest of the stuff for the drawer layout which is pretty common nothing new really here close it off the closing tag okay all right so now anything inside of here is going to be inside of the drawer layout all right so the first thing we want guys is you want our main content so this is going to be the main content actually on the screen so this isn't going to be the drawers this is going to be what's actually on the screen okay so the text you guys saw that's going to be the main content okay so what I'm going to do there is I'm just going to copy and paste that over but I will explain so the frame layout is usually meant for like a fragment so you would leave you would have no text view right and then you would just have a frame layout that you would replace with a fragment okay inside of the code but we aren't going to go into that because of the fact that this is going to be more based on drawer layouts but we have gone over a little bit of fragments so I hope you get the idea of that but we can also so we're just going to kind of hard set it and we're just going to put a text view inside of our main layout just to give it just to put something there okay all right so this is just going to be a text view which is a few properties and that's going to be all for the main content okay now the next thing you want to put is you want to put the actual View for the drawer layout and this is really important guys the drawer layout must come after the main content okay so the main content becomes comes first because it will have a because it goes off a z indexing so it'll have a lower Z index like a z index of zero and then this will have a z index of one so because it's a higher zindex it will overlay on top of the main content which is the effect we get when we slide out the drawer it goes on top overlays the main content okay so in order to get that effect and for it to work we need to put it after our main content okay and this is going to be the actual navigation drawer itself and notice that it's just a list View and we can put anything we want here we can put our own view we can put just a normal view a text view whatever any kind of view but a list view is something that is common so that's what I'm going to use here okay so our main our left drawer is going to be the aist view okay and we'll just put left navigation drawer and we have an ID and a really important thing to specify here is the width okay so the width must be set to something with DP and 2 240 is L you a good number but Android doesn't recommend more than I think 360 DP because they want you to be able to see your main content even when the drawer layout is fully extended okay so make sure to put your width somewhere around this value and the height match parent it must be match parent okay so the list view the drawer layout must match its parent which is the actual drawer layout okay so they must match the last thing that's really important for this list view is the gravity okay and the the gravity determines whether it's a left drawer or a right okay so because we want it to be a left drawer we'll put left for the gravity and these other things these other properties are just ones that are applicable to a list view that are pretty common okay so that's going to be our left navigation drawer and now we can go ahead and we can get rid of some of this content some of this template stuff and we want to start coding in our left drawer okay so we're going to do our left drawer first and then we'll come back and we'll do the right drawer now because the left drawer guys is simply just a it's simply just a list view then we're going to need to have a data set for our list view okay so we'll call it m left items and we'll state it here we'll need to bring in the generic library and we've gone over custom adapters for list views so we're not going to go over too much of that right now just to keep it simple and and get the point across which is more than enough we're just going to use an array adapter okay so the array adapter is going to be the adapter for the left list view okay and the next the next thing we need is we need to actually get a reference to the drawer the left door layout okay and remember the left drawer layout is just a list View and we'll call it accordingly we'll call it m left drawer the last thing we need right now is just the actual drawer layout itself okay so it's going to be dra of type door layout now because this uses the support Library we'll need to go ahead and get it from the component the zamon component store okay so if you don't yet have it open up the right click the components and click get more components and type in support and then download the version for the support library now since I already have it and zamon remembers that it says okay just add it to your project you don't have to redownload it or anything like that okay I'll make it easier on you so that is what I will do and now I can go ahead and import the widget okay so now that we have those things now we need to instantiate some stuff okay so the first thing we need to do is we need to get a reference to the actual dra layout okay and there's nothing new here we just need to do a find view by ID and we need to do the same thing for the list view okay another fine view by ID okay now the next thing we need to do is we need to instantiate the array adapter okay so let's do new array adapter and it takes a context which this will suffice and it takes a resource file okay and we're going to use the built-in list the layout for the for a list view okay that's built in the Android just something simple but it will get the job done okay so that's simple list item one and once again guys if you guys want to make up your own custom list adapter then I do have some tutorial tutorials before this one that show you exactly how to do that okay but for right now we're just going to use a simple list item one and lastly all we need to do now is pass in our data set okay which is going to be a list of strings and before we pass it in what we'll need to do is we'll need to add some items to it okay so we'll call it the first item first left item and then we'll add a second item second left item okay and the last thing to do now that we have our adapter is we need to set our left drawer adapter to the left adapter okay so now that we have that we should have our drawer at least in some sort of a working State okay so now before we run this notice that there's no devices right here and I'm going to go over this because if you might have the same problem if you want to run an emulator in zon Studio that just because the what I have specified in the Manifest isn't applicable to my emulator which is running KitKat okay so what I need to do is what I need to do is come into the minimum Android version and I'm going to change it to something like API 15 and then the target version is going to be api1 19 okay so this may vary for you if you're running some different os's on your emulator or if you're maybe not running emulator at all and just a device it might change a little bit but if you're not getting this showing up look into the Manifest okay now once you change that come into the tools and the Android devices and just do a refresh okay and now that refreshes and it shows up here okay and I'm going to run the Nexus 5 running the API 19 now sometimes samon Studio when you run it it doesn't really do anything and that's probably because of the fact that I changed it in the Manifest and refreshed it and something just didn't reset with with the ID or the emulator so if that if that ever gives you guys the that same issue Lu what I'll do is I'll kill the ID open it back up up and then restart the emulator through the ID okay so just in case you guys getting that same problem hopefully doing that will fix it because that Lui fixes it for me okay and that's Lui happens when after I change the properties inside of the Manifest right so let me go ahead and restart the emulator okay so what we should expect is is just a simple drawer that pulls out okay and that is what we get so far okay so everything is working as expected so far now when we click on it we see that our items are there but the color of it when there's not clicked in the in the state pressed they aren't there okay so they will be what we're going to do is we're actually just going to we can change it inside the list few but what we're going to do is we're actually going to add a theme to our activity and that should take care of that okay so but it is working the way we expect now the next thing we want to do is we want to actually implement the action bar drawer toggle okay and that's the icon on the top left that toggles depending on the state of the left drawer okay the way we do that is we need to import the action bar drawer toggle and we'll just call it drawer toggle and we'll need to import that and the next thing I'm going to have to do is I'm going to have to import the drawables which is the actual navigation drawer icon that the little three lines so that will need to be imported and it will be included in the project in the link below okay so now what we'll do is we'll create an instance of the drawer toggle and the way we do that is through the Constructor and the first thing it needs is it needs an activity okay so we'll pass it this and and it needs the drawer layout as a second parameter which we can give the actual drawer layout next it needs the actual image resource this is going to be the image that's sliding left and right depending on the if the draw is opening or closing okay so that's going to be inside the drawable folder called icore navigation drawer and the next thing we're going to need is we're going to need a another resource for the open door content description resource and they close the same for the close okay so these are just going to be strings but they're going to be the resources are going to be integers okay the IDS of them so what we need to do guys we need to come into our strings XML file okay which is created by default and we need to make some just some resources okay so if you haven't messed with this before all it is is basically a key value pair where the name is going to be the key that you reference in code so that's going to be like opencore drawer and then after the closing tag it's going to be the actual value of it okay so that's just going to be the string value which is we'll make open dra and let's do the same exact thing for the closed door resource okay so now that we have those two resources we can pass those two values in using their IDs and open oops and close Okay so that's going to that's going to be all we need to pass into that Constructor now the next thing we're going to want to do is we're going to come down to the bottom and we're going to need to actually call upon some of the action bars methods okay and those are one of them is going to be set display home as up enabled okay the next one's going to be set home button enabled and what these are going to do is allow the action bar drawer toggle that we just created right here to be to be used as a button and to slide and to show okay so make sure that we set these two values and up above it what we want to do is we want to actually set a listener okay so the drawer layout what we want to do is we want to actually set a drawer listener okay and the drawer listener is going to be the drawer toggle that we just created okay so that's going to be the actual thing that's be that's going to be controlling the opening closing so what we're saying here is hey the drawer layout is like Hey listen on on my open and drawer drawer and close events and to have this listen on it in on it and then do some actions accordingly okay so make sure that we set that as a listener the drawer toggle and the last thing we need to do to get this working is we need to override a method called on post create okay so in this method all we want to do is we want to First Call the base method and pass it the parameter and then we want to call upon the drawer toggle sync method okay and all this does is basically reset it okay so it syncs it at start and it it's ready to go okay so right before on post create right after the on create view the on poost create gets called and it syncs the draw toggle to the correct State okay which should be closed since the drawer we don't want to open up the main activity and to be closed or to be opened that'd be kind of weird okay so now let's go ahead and run this and make sure that our drawer toggle is working for our left drawer okay all right so there it is so now we have our toggle right here and as we open it should animate and there we go now notice when we click on it nothing's happening it's not open and closing it okay and the reason for that is because we need to override the method called on options item selected okay so the on options item selected if you work with it is the one that takes care of any of the action bars inflated methods that are inflated on top of the action bar okay so any of the actions on top of there so that's going to be no different for this action bar drawer toggle okay so all we need to do now is we need to actually call upon the drawer toggles on options items selected okay so let me show you how to do that all we got to do is first we need to call on drawer toggle and on options item selected pass it the item so if this returns true then it'll come into here in which we just want to return true back to our options item selected okay so this will check this if statement will fire this regardless and it'll come into here and return true which means that okay that action bar dra toggle was selected so don't go any farther however if it wasn't then it needs to go deeper inside and see what else is going on okay so this method call get called when the action bar is called and then inside of here we call the door toggles on option item selected which opens and closes the drawer okay so that's what that's doing and now that should take care of that all right so the next thing we want to do guys is we want to change the state of the of the action bar door toggle toggles title okay so the title of it what we actually want to do is we want to change it depending on whether it's closed or not okay so if you don't know what I mean let me show you all right so now the drawer layout is the toggle is is toggling open and close that's what we want but we want this actual text to change depending on the the state of the left drawer right so in order to do that what what one way to do it and pretty simple way is to go ahead and to implement in another class that inherits from the class action bar drawer toggle okay so let's go ahead and do that right now I'm going to go ahead and I'm going to add a new oops add a new file it's going to be empty class and I'll just call up my action bar drawer toggle okay so in here we're just going to we're just going to override a few methods guys nothing really nothing really to it besides that okay so the first thing we want to do of course is we want to actually inherit from the action bar drawer toggle class okay so let's go ahead and import that into our class and then what we want to do is we want to call upon its base method okay and remember that base method is what we called which takes all those all those parameters the five parameters right so that's what we're going to do here we're actually going to make a our own Constructor that just takes in the same parameters okay so remember it takes in an activity it we'll need to import the activity class so we want our Constructor to take in the same amount as the normal our base Constructor which is the action bar toward toggle okay so we basically want just we just want to MIM mimic it okay nothing really special there remember that it took in a draid layout as a second parameter and then it took in a image resource which is the actual toggle icon then it took in a string resource which is just the description we'll call it open door description and then finally the close description okay import that and now we can pass those same values into its base method okay so what we're doing here guys is we're just actually adding another layer on top of the Constructor okay and that's all that we're doing here all right so now we can come into our main activity and we can change this class to my action drawer toggle which takes the exact same parameter so that's not going to affect it at all and it takes these parameters and it comes in here and passes it into its base method which is this guy that takes care of the rest of the stuff okay now what we want to do here is we want to actually override a few methods okay which is the whole reason why we over or we inherited from the class in the first place okay and those few methods are going to be on drawer opened on drawer closed and on drawer slide okay so now that we have these methods they're not doing anything special because they're just calling their base method okay which if that's the case we don't even need to overwrite them in the first place because if we didn't overwrite it it's just going to call its base method like you know that's that makes no difference than just this okay but it's our own code that makes it nice makes it special and makes it our own okay so that being said let's go ahead and do that now what we want to do here is we want to actually set the title depending on whether the of the action bar depending on whether the drawer is closed or open all right so the way we do that is we need to get a a reference to the action bar okay and the easiest way to do that is to use the activity that we passed in already right here okay so we'll make a global variable and inside the Constructor we'll initialize it to our activity that's passed in then we can use that Global variable to call upon the action bar and then to change it title and this is when is when it is opened we'll say please select from list okay so that's when it's open and there's a there's a couple different items that they can select from so that seems appropriate and then we'll do the same exact thing for here except it's title will be just something like this drawer layout app okay and that should take care of that okay so we haven't yet implemented anything in this other on drawer layout but we will here in a fews seconds but let's go ahead and make sure that that's not working okay so what we should expect now is the title to change depending on whether the drawer has been opened or closed okay cool okay and noticed that it wasn't initialized at first okay until we open and close it but we'll fix that here in a second but the title is toggling back and forth just like we expect now instead of having the hard set code right here what we could do and the reason why we passed in the open door description and closed door description is we can set these Global parameters here as Global parameters and then we can call upon those those strings through the resource IDs and set them to here okay so when the user another programmer passes these in they know to to use these as the resources okay so whatever changes here will change here okay but just for now we're going to hard set it it's easier and it's not too important but just to make sure that that is what those are passed in for just the title of the open and close of the for the drawer layout okay so now that that's done we can come into our main activity and we want to actually add a few more things to our main activity okay and our main activi we need to override a method called on configuration changed okay and all we need to do in that method now is call the on configuration changed inside of that okay the door toggles on configuration changed method okay and that will configure it when this gets configured okay so this keeps them the main activity and the drawer layout both in sync okay so that's all that's doing right there now the next thing we want to do is we want to actually change the the theme of it okay so if you notice the theme if is it is a little different from what I showed you in the project and that's because we actually had a theme inside of the inside of the the the example project so what we're going to do is we worked on themes before but what we want to do now is we want to actually create a new theme okay and that theme will get rid of like the icon that the Android icon and it will get rid of the of the title okay which we don't want to happen right away but what we do want is we wanted to be remember if you remember back in the other themes what happened is if we didn't set a theme and we just set it in code like the icon to go away what happens is you'll see the icon here for a second and then it'll go away but you'll still see it for a second while the creation is loaded because the code doesn't run fast enough okay so if you have if you don't know what I'm talking about just go ahead and look back into the the the tutorial before this one on customizing an action bar and you'll see what I mean by that okay so setting a action bars style inside of a theme is the best way okay so what we're going to do now is do just that okay so let's come into the XML and let's just create a quick theme okay this is going to be a lot like the theme that was created in the custom action bar tutorial so I'm not going to go over too much with that but basically this one's really important display options okay and then because it's empty it's saying don't display anything okay so this is dis explain nothing that way it's not showing up and then going away and looking really ugly it will not nothing will be there and then anything it's loaded inside of the code will show up and then it'll give you a really clean effect okay so that's all that's doing is just having a custom action bar theme and then setting it style to everything that we override here which is just three properties okay and we can we can have the height to be 75 we can have it to be you know something something like that's more stock but anything you want to change here if you don't want to have that at all that's not a big deal so just to give you a little heads up on that but now that we have our theme we can come into our main activity and we actually we can actually set it inside of the activity itself okay so we'll do add style custom action bar thing okay and this one needs to we need to pass in the parameter for that and let's build it let's make sure that theme got applied correctly okay so the theme has been applied correctly and the items are now showing up appropriately but now our title isn't showing up okay so the way we can fix that is coming into our code and we want to set the title to show right away okay and the reason why we want to do it in code and then the theme because if we set it in the theme for the title to show what's going to happen is it's going to show the title for a quick second like a really generic title and then it's going to disappear and then it's going to show our our what what we want our title to be okay so if we set set it to initially show nothing then at this point when this gets set to I believe it's set display show titled enabled once this gets set to True our title that we want to show will already be loaded okay so it give you a really clean effect okay and once again if you don't know just go ahead and back into the action bar the customizing the action bar tutorial and I go into a little more in depth of what I mean by that okay all right so now that that should be back what we want to do here is we want to now create the right drawer top uh drawer okay so we have our left drawer but now we want to create our right drawer okay so the way we can do that is we want to come into our main file and we want to create our right right drawer now the right drawer is just going to be pretty much the same properties with a few things Chang one obviously the ID and the next thing is going to be the gravity which is right to specify that it needs to be a right drawer okay that's literally all we need to do inside of this design file okay so now that we have that we want to come back into our code and we want to go ahead and we want to change we want to add some some some variables to represent our right drawer okay and the reason why I copy and paste it is because it's pretty much going to be the same stuff just reversed okay so we're going to have a right adapter and then finally I write drawer okay and then now here you want to do is we want to actually add the items to the right items data set and we'll change that appropriately and the left drawer we want to make a right drawer instance which is just a list View and then now the adapters what we want to do is we want to make a right adapter for the right drawer okay and then we want to set the the adapter of the list view to the right adapter okay so that'll give it its items and then finally we want to set its data set to the right item data set okay so now that that should give us our right drawer okay so let's go ahead and run it and make sure that our right drawer is now appearing correctly pull this this up okay so we got our left drawer our titles are showing and we have our right drawer okay now a couple things to notice guys is notice the right drawer notice this toggle and notice when I pull out the right drawer this toggle is also pulling out just as just as well so if you guys want to have that that's fine but I was like eh I don't really know if I want it to actually toggle for the right door too you know I want it to be a separate entity you know so that's another reason why we needed to actually override the action bar drawer toggle here I'll show you in a minute okay so the last thing we need is we need the little icon here to actually be the controller for opening and closing the drawer okay now one more thing to notice I'm sorry is the if we open and close these drawers like this it actually closes the appropriate drawer if it's open like the right drawer is open it will close the left drawer if I come over here but if I do this it doesn't see what I mean so if I open this right door and I open it with the toggle it actually overlaps and we get this so we don't want that guys and what we'll need to do is we need to program in some logic to stop that from happening okay so just a few things that we encounter when we Implement a right drawer with the left drawer okay so that being said the first thing we want to do is we want to stop the toggle from toggling when the right drawer is open okay and the way we can do that is we want to come into our main activity and what we want to do is we want to tag the left and right drawers with values that we'll use later on to reference okay so remember that every pretty much every object has a tag value which is an object that we throw inside that we throw whatever inside okay so this is a perfect scenario to just throw an integer inside of the tags of the right and left drawers so that we know which one is passed in inside of our our on drawer open and on drawer closed and on drawer slide so right now it's just a view right and we know that the two views that are passed in is the left view the left drawer and the right drawer but it since it's a view it's kind of hard to distinguish between the two so what do we do we just tag each one with an integer value and then over here we check that to see which one it is and and we will program that accordingly okay so what we want to do is you want to come into here you want to get we'll make an integer call it drawer type and we'll cast it to and we'll take the drawer view right this is what's passed in so say the left door is passed in we'll grab its tag okay and the tag is going to be either a zero one right and then based on that we can tell if it's if it is the left drawer that's being opened or if it's the right door that's being open okay so we'll check for zero and if it's zero it's the left drawer so let's go ahead and note that and if it's the left door we want to actually call the base method and set the title and the base method is what actually what actually toggles that the action board drawer toggle Okay so we don't want it to be called if it's a left door we want it to be called and act as normal but if it's a right door this will never happen Okay because we want the right drawer to be a separate entity so that's just some logic to bypass the right drawer it'll come into here and say oh it's a left drawer then we'll do this stuff and it'll act as normal but then it'll come in and say drawer types one for our right drawer and it won't do any of this stuff therefore it won't toggle okay so in that case we want to do the exact same thing you want to do the exact same thing for the Ono closed event okay so let's cast that then we'll just check to see if the dra type equals zero okay and we'll note that and then of course the same thing we want to call its base method and set the title only if the left door is being closed and finally let's do the same thing for the on drawer slide so that the on drawer slide is what takes care of the animation of the drawer toggle where these ones are actually the ones that take care of like right when it's actually the when it's closed or when it's like in this case when it's closed when it's fully closed it's called and when this one's fully open it's called but the Ono slides called many many times throughout the slide hundreds of times okay and the offset is between zero and one depending on zero being fully closed and one being fully opened okay so with that we don't want anything to happen if it is a we only want it to happen if it is a left drawer and we will call it base method okay all right so let's go ahead and run that and verify that that's working right and and we're getting a little bit of a error because that's not the right object so we change that to right drawer sorry about that all right so what should happen now is the left dra should act normal just as it as it normally has but the right drawer should not you should not make the toggle animate okay and that is exactly what we're getting so awesome now the drawer the right drawer is its own entity and it's not listening in or the drawer toggle is not listening in on the right drawer Okay and like I said this is just a feature that I wanted to put in but if you wanted to listen in on that then that's something that you don't have to program in but I thought it would be nice that the right door toggle has its own item to listen for okay all right so that being said the last the next thing we need to do is we need to actually add in and the menu folder okay which is going to be the items that are inflated on top of the action into the action bar okay so we'll make a XML file and we'll just call it action uncore bar okay and then I'm just going to go ahead and copy and paste this over since we've done this before all it is is just saying we want one item and its icon is going to be the IC undor action download and the ID is going to be downloads okay so that being said let's go ahead and save it and then what we want to do is we want to actually override the on create options menu okay so we have done this before and it's pretty pretty uh pretty common thing to do in Android so if you haven't done it I will explain it but it is something that we've probably gone over before and you probably have gone over it yourself or in my tutorials but all we're doing here is we're inflating the any items inside of our our XML file that we specified here which is just one item okay so we'll go ahead and inflate it using the inflators inflate method and what we'll do is resource. menu. action underscore bar and then the second parameter is the menu That's passed into into this method and that will inflate it and do its job there okay now the next thing we need to do let's go ahead and do a rebuild okay so the next thing we need to do is we need to override the on options on which I have already overwritten sorry about that guys I've already over overrode that okay so now remember now in here guys is what we're going to do two things we're going to have to listen in on the on the action bar on the right side which is going to open up the right draw okay so what we're going to do is we're going to use a switch case which is you've probably seen this before pretty procedural when it comes to doing this and then what we're going to do in the switch case is we're going to have a case where the ID of the of the downloads button which is going to be the right button that listens in on the right drawer is clicked and then what we need to do is here is we need to add some logic guys we need to see first if the if the layout for the right drawer is already open okay and we can do that inside the M drawer layout object okay so we'll use a method called is drawer open all right and we'll pass it in the view the right door okay so it'll tell us yes or no if the right door is open or not so if it is open what we want to do is we want to close it right because it's clicked it's already open so the user must want to close it okay so we'll want to close the right drawer otherwise what we want to do is open it because that mean it is currently closed so then what we want to do is we want to open the right drawer now here's what's critical if the if we want to open the right drawer we want to make sure that the left door is closed okay and what we can do that is by using the same drawer layout and close the left drawer so we close the left drawer and then we open the right one and this will be fine even if it's not open it'll call this this method and if it's not open it won't do anything if it is open then it'll close that left door and open the right one okay and then finally in this case what we want to do is we want to return true since that is what it expect specs from here okay let me clean it up a little bit okay now we want a default case which is going to be this guy right here and this is going to be the ah default which just Returns the base okay now so that's going to take care of that now what we want to do up here is we want to actually add some logic to this and this is remember this is the item that's it gets selected an item in the action bar has been selected so down here what's going to happen is it's going to feed that to the drawer toggle okay so if it is if this if the on options item selected returns true in there what it's going to do is we're going to want to check to see now is if the right drawer is open okay because remember the action bar tole the the it controls the left drawer okay so it this controls the left drawer okay so that means that yes the left drawer has been opened or closed okay so we want to check to see okay well is the right drawer currently open and if it is open let's make sure we close it okay now remember this is what happened the overlapping that I showed you a few minutes ago what happened was the the right door was open and then we clicked on the left toggle and what happened was like we clicked on the left toggle up here and what happened was the left drawer opened and the right drawer did not close and they overlapped and it looked really ugly okay so this logic will prevent that from happening okay and let's go ahead and run that and make sure that it is in fact doing that okay so now we have our action up here and that is now listening in on opening and closing the right tour this is still opening the left drawer and remember that if we had the right drawer open and we touched this they would overlap but now the logic over here gets applied and that no longer happens okay so everything seems to be working in harmony okay so now we have now that we have this we have the finished product that I showed you in the beginning of this tutorial all right so there you guys there you guys have it that is how you do the left drawer with a list view inside of it and a right drawer with a list view inside of it and how to ensure that the two drawers never overlap by using a few logic and mostly the the the Android system helped you out by by stopping that most of the time but in a few cases we have to handle that ourselves okay so there you guys have it if you guys have any questions on this feel free to post with an on underneath to the comments or if you need to message me I'll do my best to go ahead and uh reply back with any trouble you guys are having the project the full project will be available down below and if you guys haven't subscribed yet please do so I'm I'm always do my best to upload new videos on zamon and I plan on doing a lot of uploads on some future stuff as well so subscribe now and and hopefully you can stay tuned to the rest of the Zam andreid tutorial and and if you guys have any more suggestions then I'll do my best to to implement some tutorials that are based on that and anything new that's coming out so as always thanks for watching guys

Channel: Joe Rock

Views: 51,104

Keywords: Software (Industry), Tutorial (Media Genre), Computer Science (Field Of Study), Android (Operating System), Xamarin (Business Operation), Mobile Phone (Video Game Platform), Drawer Layout

Id: bqRXHRs3_4I

Length: 50min 9sec (3009 seconds)

Published: Wed Dec 17 2014