Setting up Ride Details BottomSheet

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] Hello guys. Welcome to this class. So in this class we're going to be looking at something different. So let me go ahead and demonstrate to what we want to achieve in this class. All right so what I want to achieve is that when we set our destination I don't bottom we show and when we keep on DON WATSON It's you produce these bottom layer. So our focus in this particular class would be to design and implement these bottom sheet. Right. So without much ado let's jump right into it. So the first thing we need to do is to go into our layout file and create our Don button. OK so we need to load our layout file so that's it. So let's go to the end of our document so let's copy this and paste it again to create a new button this time around we need to change the I.D. So we're gonna call a location set and button I want everything to just remain the same because I think he's OK is that will change the test. We're going to change it to Don. And I think every other thing we just remain the same. OK so if we clear created this button. So the next thing we need to do will be to create a new layout file for our bottom sheet. OK. So to do that we again set out in new layout found went to code is cheap details. OK so let's quickly rush up the design. All right so the first thing we need to do is to change these to firmly out. OK OK. I went into bringing a new Asimo namespace app so we're going to see Android a d So again a code is treat details by time sheet OK so high to change it to your content so guys just follow my lead. OK. I say make these faster so it is just an eczema. Is roughly the same thing. So now we are done with this. Then assuming that you're doing this to do a view much prevent when you said it colorfully OK so the next thing we need to do is to define a new linearly out we're going to set a predefined height for this array say layout height equal to 240 DP Right. The background is going to be white we're going to be using layout. We took. So we actually intend to have two linear layout. So we're going to divide the entire layout into two using layout weight. OK. So this way we're going to set it to zero point seven. Seventy percent rather 60 percent of the entire space. OK. So I'm going to set the weight to match parent. So instead we need to do would be to bringing in my image view so if you add actually are vicious to do your intelligence may not be walking is this why it took ages. Go ahead and type out this test. OK. So let's get to Inside. DP Sara C. So we need to bring in the image that was supposed to be using in that place. That particular icon. So let's go ahead and add it. OK coal resources so let's continue. None of I did it see drawing hydrothermal slash in age 25 will actually be very small. So let's just go ahead and make it 70. So this is the free that is going to be displaying our trip estimates. OK so inequality is a steaming fair terrorists okay. Okay okay. So we're going to set some margin to say lay out margin 10 DP So we gonna set the test to say two hundred to two hundred and fifty dollars. Okay. S. Android the layout height may outs week gravity making bold stone down test size and econo Tesco along. What I want to use back. Okay let's go to our caller X amount and just define a new black caller to just to be on the safe side. Can easier to resolve. So we are done here we need to leave you so we are done with this linear layer. Okay to supposed to being say right so everything is coming into shape. All right. So let's go back and continue with our design so let's close this. We need to define a new linear layout. Okay. So let's go ahead and do that Sandy nearly out orientation and vertical layout height zero DP rich parent zero point four. OK. So let's go ahead and continue with this. So Dennis so we need to do is to define a new linearly. All right. This time around the orientation need to be horizontal. I guess these will want achieving. OK this little guy here. So this is what you want to achieve. So then you manually are we are defining now need to have a horizontal orientation DP orientation horizontal. We are tied in a sentence which is if I DP layout with each parent. So we're going to add new linear layout gonna make this clickable so I want to always be able to select between cash or card right or I want to be able to do that Sarah see. So we're going to use our wallets icon which we have in our navigation drawer to move to meet lamp slash. I see one at action. OK so the layout hides. We use 25 DP and the weights will be 25 as well. Gravity me and gravity need to be center of article and to give you the nice orange glow again. You need to set the tent so going to set I sense color as a tent. Now the nice thing to set here will be TextView. Let's put it TextView or just cache. Leo gravity will be center our tweets. We wrap content we outside or simply wrap content. OK so the less I want to do it is to set some margin to the left. So I said this to be fine. DP And I also want to send a color to be black so we don't hear. Let's go ahead and close this. OK so gonna put a new related layout inside this to match parent on the layout we've said this to zero DP because we want to use the weight so I'm going to send a layout wave. So with zero point six OK. So inside of you we're gonna put it TextView so let's add this to twenty five means. So this will always be indicating the time of our driver arrival or the time for us to get to our destination and all those kind of stuff. OK so let's go ahead and continue with that. So we're going to make this record is new and trip trying to write tests to balance. So because it's a relatively out I'm going to say Android layout a lone parent. Right. Okay. Because we wanted to be on the right side. So we're gonna sit said is true and I'm going to sentence vertical to say this futurist well and not content OK so we don't hear now the last part of it will be too different. Another related reality. OK not too different and not every natively which would probably be the last thing we need to do. OK so we are done here. So the next thing we need to do is to define button and our button need to be inside of a relay team. Lam OK my experience. So to be on the fastest I can just head back to include me and copy these parts in templates. OK just go ahead and copy paste it here. OK. More this time around we need to make some dates. We need to change the test to request cab Neutrogena I.D. to request driver button OK. So instead of having to wait to just be 200 DP women to make this to match appearance so we're going to get rid of some things we're going to get rid of this I'm gonna get rid of this and we're going to add this because we're using a relatively ounce here you're gonna send me out lying here in Baton Sandy is true OK so let's look at what we have. All right so we need to get rid of this as well. We don't want that. OK so dribble left to remove this. So this is exactly how we want our bottoms shoot me out to look like. All right. So let's go ahead and save this. OK. So before we proceed seems like we are getting an arrow here. Right. So anytime you see an element you know that is with do white collar you know that there is an error somewhere along the line and our arrow is just that we didn't even close this would include this tag. All right. So once we do that this call out to blue guys you should always be mindful of this because to actually cause your ammo to wash properly may be getting some errors. And I just hope that's all. So this is exactly how we want our bottom ship me out to look like. So no need to head back into I mean lay out an ad despite a foul. So I mean. OK. So to do that we're going to go to include me. So under our frame layout we're going to say include me out treaty details so we're going to go to the design and show that everything checks out. Well here so we need to make these button to be invisible at this moment. OK. So we're going to see Android visibility right so now no I don't want the designers go ahead and save this country as save. And we'll do the same here as to save. So the next thing we need to do is to head back into our main activity and set up our bottom sheet. Okay. So to do that we'll go to our main activity so under layout we'll save bottom sheets and the festival. We want to see a bottom sheet behavior need to bring a reference of that so we're to instantiate treat D2 as what on sheet behavior this is very long. OK. So once you've done this you have to go back to our connect control to complete the setup. So the first thing we need to do is to grab an instance of our bottom sheet layout. OK that's the friendly out that we are using as our bottom sheet. So we might need to grab that view first. So going to say from layout treat details view this is going to be equal to frame layout fine view by a d cheap detail was put on sheet. OK. So now the last thing we need to do is to say treat details behavior equal to what's on sheet behavior or not from keep the till 0. So now that we're done with this we need to get a reference of our favorite places bought and Dumbarton. OK so to do that we need to define new buttons. OK come here and we say button musical this forever right. OK. You need to find another one musical at this location said button right. So let's reference these buttons to go to our connect controllers. OK. So we're going to say the right places Button Button flying you buy a d resource or I d that favorite places button. OK. So let's do the same for location bytes and we're going to say button would be equal to flying view my I.D. soars to a D and don't location send button. So let's add click event handlers to these buttons. OK so to do that we're going to see your favorite right what's in our clique lines equal to space right. So we're going to put it here so let's do the same thing for our location send button. So same location. So what's in the klieg lights equal to space to not have a click event had left for our location said Button as well. OK. Our favorite places but we want to make an invisible when we set our destination. OK so to do that we just need to define a new method to call this method three locations set. So when we've sent our troops location want to say for the right places button don't disability and call to view states dot invisible. Right. And our location set and button dot stability. What do you states the visible when we click on location said Button want to display our bottom sheet. All right. So to display our boat on sheets we're going to see tree details. Bottom sheet behave you got state. We're going to say this too but should behave your state spending. All right. So it is to actually make our bottom sheet to display. All right. So now Vanessa wants to do is to call this Pensacola method. All right. So we're going to call it in our on activity resort. That's when we successfully set our destination. Want to call these particular mental. All right. So we're gonna go to the place where we set up our place such as a complete so in this Pensacola sports you're going to call that particular method. All right location set. Okay. And also you can go to our camera. I do event handler. Now we can said this here as well cheap location sent. So guys let's run up and see our bottom sheep in action so OP is deploying OK so we are here boom. So we're going to set our destination bone is going to see this shoot up so we're going to click the dome button and boom. This is our bottom sheet exactly the way we designed it. So I'm sure we now understand how to set bottom sheets. OK. So our done but it has enjoyable left. So we're going to go ahead and change it as well. OK so Drogba left Dumbarton OK. So we need to remove this. So let's save this. Good. So let's run it again and see the difference. OK. OK. Location is said. So let's set our destination by moving our map as we're going to see had done but in these now visible. So in subsequent classes we're going to be learning how to read between my favorite places Watson and Dumbarton. Right boom. So everything works out just so well just the way we planned it. So guys hope you really enjoyed it class. So stick around. Let's continue be beauty see you in this class.