Setting up Favourite Places and Current Location Buttons

Ufinix Academy
A free video tutorial from Ufinix Academy
Learn programming and app development
4.3 instructor rating • 4 courses • 4,787 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] So guys in the last class redesigned you know our pickup and destination bars which is what we have here. So in this class we're going to be designing our main location button and favorite places. So to do that let's jump right into it. OK. So I'm just going to minimize this minimize this OK and also minimize this. All right. So here I'm going to art in you really to me out because this we need some attributes right. Layout height I want to use standard five DP. So for you guys we take no we are designing our current location button. All right. So we have under the layout with layout with real code to 25 DP as well. OK. So we need to make a clickable if that's the case. That means that we need to earn a 90 for a so let's call it my location you know be on display. So it is more like we needed to be centered and aligned to the right. So if that's the case you need to set a little gravity to be sent to and right. OK. We need to set the background so that we can be seen in the way. So this is really to layout. So no need to add so margin to the right should be sustained DP OK. So here we are. All right. So now we need some image. We need to put an image inside of it. You know our location image. So I've actually added the icon that I used to do resource for this class. So you guys could download it and add us as well. OK. So I have it on my desktop so I would just go ahead and add it to my map for the so it is the one I used enjoyed for NDP for exhales DP for says HDP and the last one. So now we are done. We now need to add an image and an image view. Now take up a Nikon Winter Wrap content me out tweet interrupt content swell let's add a tent or a tent will be sent to that sounds kind of OK. We need some bonding five DP. And of course this reference the image see which is excellent to meet. Map slash. I see my location block forty eight DP. So guys here we go. All right. So now that I've added that I still want to do is to add our right places button. OK so let's define button because this we need an I.D. Faisal right places button we outside a hundred DP file with call this my favor right. This is resounding over here. So less and little gravity now gravity should be center and button OK. So if that's the case we'll want to add some margin to the bottom one to talk to DP to lift it up a little bit. So we don't want the text to all be copied to Atlanta. Right. So we're just going to say test all caps and send that to force. OK. So we're going to send some budding so we we need to you know bringing the favorite icon that we have here right. So like I said before everything I actually need I've already added in resources but I have mine on my desktop. So I'm going to go into my resources. I'm going to look for the MDI and copy this. All right. I want to copy this and add it to him to my draw before that. OK just a very small one. OK so I'll paste it here and I'll grab a reference of it as our dollar bill left. So say draw more left and draw a bill slash I see. Action fave white OK. So you guys could see he's actually shooting here right. So let's continue. Let's add some part into our button. All right. So I want to add some bad left and we need some bad into tonight as well we need some bad into the riots as well. Said this to they say 12:00 DP C DP and we need some prodding to the bottom we've said this to the Saudis the NDP and to the top sell it to a deep yes. Well okay so we need to elevate this a little bit so let's add some elevation to DP and won some shadow so I can just say trans. Translation Z to A DP yesterday to add this lovely shadow here. So guys will add around edges to the button. You guys remember that. We did something similar when we are designing a log in a registration page. So we are just gonna do that same background and set it to drone war over random button d d And XM or found that we created earlier on. So you guys remember how we achieve this right. So this file that we are calling these drivable. This jawbone we create any earlier on when we are designing our log in a revision page. So this X M.O. is Y is actually giving this button. Iran edges it and as well the the the arson scholar they has the arena. So the next thing we need to do is to make a test called to be white. So we're going to say under his desk follow a code to I'd call a slash over white man. So we are done with that. So guys another thing I want to do is want to add some soft edges to our family out and our reality layout so to do that we need to create a shape. All right. And for me to do that we now need to add a new XM or file calling around and. OK. In that way it too will be able to implement a shape that will help us achieve the around edges so a new item maximal round edges squatting around edges so let's call it round edges and we've had this so how to do this is actually very simple and straightforward. Okay. So first of all we say shape and of course I'm gonna bring in our namespace Maxima namespace which would be an android is key. Maria's got Android dot com slash AP okay slash the rest slash Android OK. So you guys she and should I you spell this appropriately if not everything will work accordingly. And you're proud of me and you're wondering why is not working for you so instead of the shape we need to define a new solid okay and add weight to it we've wanted to be one DP and we define it Carlos. Wow. So we just have to add something you know that looks like ash. So I'm going to say Android color code too harsh see. Easy easy right. This is a shade of ash so the next thing I want to do is to define our corners so we say it corners inside a corner. We're going to have Android but done right re diamonds. Okay so you guys ensure that you sell. You spell your read is appropriate leaf notes you will be having issues. Okay. Anybody may not know why he's not working for you ADP and Android. The bottom GDP Android radio is GDP Android 3 Dios GDP OK. Correct yes. So guys that's all we need to do in this place. So let's save this. So now we head back into our design layout. So for the relatively out instead of having the background to be equal we're gonna sit around and edges to be the the background. OK. So we're going to say at drivable slosh around in ages. Okay you know you go Okay so you can see it has changed yeah. But I think we have days in mistake somewhere right. Okay so you guys could see it here right. But the background is not like. I think something is wrong with our round edges okay. This was supposed to be stroke okay. We're supposed to have solid thus as the color Android that corner where this is supposed to be white. All right. This should take care of that. So let's save huh. So now we are here. So the last thing we need to do is we need to apply these round edges to our frame layout as well. OK so let's open these up friendly out instead of having background to just be white or assign our round edges to be the background draw or slash round edges. Boom. So guys this is it. So to confirm everything that we've done so far we need to run it and ensure that everything checks out very well. OK. So let's run this OK. So it seems there is an arrow. Of course we know what caused that bottom left reduce a misspelling. So we're supposed to have putting okay. So now we're done with that. Let's join it again okay. There's another era. Okay so we got some arrow. So when you whenever you come across this kind of error what you do is to clean your project. Okay. Clean your project. So let's go ahead on clean as OK. So now we can our own app so once you actually cleaned your project naturally beauty into your app naturally it takes time to actually be longer than usual because it means to generate some binaries you know from your packages need to compile the whole project from ground all began. Right. So that's why it's taking a little bit of time on how we go bam. OK. So guys this is our beauty. All right. So we're successfully designed this and everything seems to be working just the way we want it. All right. So guys I hope you really enjoyed the class and thank you for being here. If you've come so far I encourage you to keep pushing hard. All right. We're going to get to the end of this together. All right. So see you in the next session. And of course in this class.