Login Page Design

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] Okay guys so in this class we are going to be designing our log in page so as you can see from my emulator here this is what they log in page you look like. OK so we are going to jump right into it so that we can do it together and produce these simple stuff here and we can use it as our log in page 4 or by write a map. So guys let's dive in. So the first thing that we need to do will be to add a new layout file and to do that we go to solutions Explorer on the layout guy right click on the new item Android layout of course and I call it logging so we just wait for it to complete loading so that we can start writing our code here. As I write in an example hood we'll be seeing the design you know take shape when you set aside that. So there's a couple of things that we need to do. First of all we need to define a new team that will be using for an app. OK. We are currently using the default team that can we Visual Studio but probably don't want to do that we need our own team. So before we do anything we need to define our team. OK. So to do that we go to our style file in values for the so we are going to define your style. This style is more like a team that we'll be using for our app. As you can see we have we have some different code lines here. Some these are sent. CALLER We need to bring it in our team and you can see the primary goal here. So we need to define those so that we can roll with that. So I'll call this so defining our team we'll call it we'll call it all by team member team parents will be team. Don't call in fact light and we don't want an action by. We don't want any action because we want the top spot to be freed up. We don't need you for anything. You can see the toolbar is not added to this particular layout. So the team will be using would be no action about so the parent team will be using it will be no action the came so the eyes I didn't add the values because we've not defined the colors. So to do that we head over to our caller the example here would define Carlos. OK. So let's go over here. Right call your name let's call this all about primary and we'll use harsh I'll use a hash. 1 0 2 8 3 8. OK so this will be called so the next one name we will be. Hoover sends Carlo this will be a harsh e 8 6 or an F Ok. This will be our sense Carlo. So the next one will be primary doc name meets all over primary doc earned value will be harsh. 1 0 2 a 3 8. So serious. I made a mistake. This appears to be one c 4 3 5 8. So now I've completely defined the color values in our current example. So we just have to head over to our stars the X and all and assign the values here. So assigning values the Murdoch sent corner so dice we are doing defining our team. So the nice thing to do is to hold back to lead file and continue in designing log in page. The two sections here the top section and the down section. So we need to divide our page. So I would try to be fast with this OK but I will ensure that it Page is ok that you will follow true so I set the height to zero DP because once you use layouts wait OK to divide the two segments of the page so I sign D zero zero point six and of course the background. OK so that's our related layout. The first section so this exit the second section needs to be a linear layer. Orientation should be vertical layout height zero layout we'd be equal to much parent and of course our layouts weights would be zero point four OK so successfully divided eighty two page. So the next thing we want to do is to bring gain an image around image that we saw there we need to bring that in. So to have our own image here we need a circle image view so we can grab that forward from the nugget package manager. So let's download a not good package for the so-called image circle image. So this is the circle image of your controller that will be using to achieve the rounded he made that we have at the center of the page okay. So we just have to install this installation was successful. So rule of thumb is always to be used after installing the new nugget package. Seems as an error in style as king. They can't that Okay so beauty is successful. So now let's define our circle. You mean view or this really mean meatball and said this little tiny say nice 200 DP layouts we've said it as all 80 DP and also how to send dates and parent new parent which is relatively out quite true. So the next thing we need to do is to bring in our image the image that is going to occupy this space. So I already have such image design and is on my desktop. So I have to add it to my draw before that to do that I right click on my draw before the need are existing. Item so I go to my desktop I will look at the file center image. That's the file I added to my project. So now it has been added I will no need to reference it as the source of my sexual image view. So Android that SRM see a to its durable slash center image so these outside are saying the image to our second image control. So it is going to show up in a bit. So after that we need to know right. All right. Under the Second Image view. OK just the way we have it here and to do that we need to add a Texas view to our layout for you Android the outside will be wrap content Android the layout suite pardon me for that may are tweets to be match parent or Android or gravity. Gravity will center the test show the next thing you might need to say is our deck size we send these 220 SB we're going to put it below our center he made so hundred below because we're using the relative layout. So we need to set all these things is very important to ensure that everything is well aligned. Lay out below. So we go to reference our Second Image view control. OK. So the next thing I want to do is you have to align this particular tax view to the bottom of reality. Layout a line pair in bottom so we're going to say these two true and of course we need to set the said the desk follow and this should be white. OK. So we need to define a white collar in our holiday x amount. So just go ahead and define by white color lower mean over lines. So we head back to our logging design here it's called a slash. OK so let's build this and ensure that everything is fine so everything seems fine. So sometimes a vicious circle boy haywire and the design wins resolve appropriately. But don't worry just go ahead and keep typing to code. So what we're going to be doing in the downside of the design is we're going to use it testing purely out to define our e-mail and impact toward a deep text boxes. So we'll go ahead and do that. So we're going to add a little bit of some padding to our nearly out so we're bringing in test imprudently out and to do that Xenical. Android don't support the design. We get recalcitrants here. So we just select that OK so I said some attributes here or Android. Layer with said I've got too much parent Android Lee outlined the send out to rob content so less said the name the I.D. to be e-mail or text and inside of it we're going to define a detached thanks content. I'm joined now tweet much parent or Android dog named Emile to type text e-mail address and I think that's it. You can see this is proper result. So less add and not the best team layout for a password. So just copy this paste days and change this to password test changes to password or ancient time will be password Spash ward. So the nice thing to do is to add a button to do that we want our voting to be center and so we could just go ahead and do really to layout for that. So I said that's a much parent March parent. So we're going to define our bulletin inside of it so that we can align into center. OK. So define your bulletin the Archibald Android's neon tights I'd like to use 45. OK so about you can use the height that appeals to you the most. I really like 45 we've 300 DP he's just ok and honest I detest to logging in this corner to be white or its lines. No one said a background or an extended background to be I since going to an accent. OK so now or once and make the boards into be centralized. Okay so how to online layout centering in parent. To that to true so is no center. So guys as you can see our boards in those we have from round corners but we need that just like we have in this when we need these soft edges. Okay so to do that we need to create a little list. To do that we have to go to our draw before the Oval and add a new XM or file and call it over around bottom. OK so this new example more file quality will be around in Okay so inside the file I have the code already so I'm going to paste it and explain what happens here guys. So a festival defined in unionist and I don't I don't want any margins of any kind. So I just want everything to remain the same. So the gradient if you want gradient fewer for your button you could add and colour and it starts corner. So I took our time you know to add all this thing so that in case you want to more like playing around colouring you know for your own button. But if I want mine to joins me one color so I use one caller to. If you want a gradient fuel for your button. You can have that here. OK. So if you want a different strip Carla or a different stroke thickness you can increase these to two if you want a higher thickness. OK. And if you want to set the color of your stroke you can set it here as well. But I don't want any of those. So I just let the miners by I the color. So the red use is actually won't give you see the round edges. OK. If you want it to be perfect around you can increase the value of these reduce. OK. But I don't want any of that just wanting to just be slight cold at the edge. All right. So if you want some padding you can achieve that with this. So what I did was I define a new collar. So when I click my button where the button is pressed I want something different. I want a new call to be applied to my button. I call that well but I sent it. So fortunately I have not defined his corner yet. All right. So we just head over to our corners so I can define these pants up when I call. So it has to be different from our toolbar ascent. The reason is because you want to be notified when you press your button. OK you want to get some feedback so a different colour we give you feedback that you actually press department. So. So we call this over I sense click. All right. So the value for this will be there. So the value for this should be harsh. A 2 5 5 0 8. OK. So is no one to use for that. All right. So we are done with this. Now we need to assign this one our own button eczema as the background of our button. OK. So instead of having background as well as in color. Right. So we set the example as our button background so to do this will not assign the A button eczema as our background which is a draw will slash over I'm going to. So guys you can see how beautiful this is. So this is what we have here. So the last thing we want to do is to add this small text here and I said not already distantly to register. OK. Which is very simple to do OK. So I did a 94 button so reduced to the call it is a logging button so add in you text v you content may answer to be much parent gravity will be Senator. And so imagine just making a DP of course or a test to be so head over to a string or or undefined in your string so we can add this string name quote to you care can just call you click here OK. So the value will be not registered say that so you know layout file not a friends or a string in a string the clique that should suffice. So as you can see he jumped over the A button. So we need to make it to be on that important. And this is the usefulness of relatively out. So we just ran Android below layout below our button. So the next thing to do is to define our logging activity. OK so now we can say that we can load in this view when we want to test it. So what you do here is to go into our activities for the and add a new activity called log in activity in new item an activity to call this log in activity log in activity. So want change laid out the first thing we want to do is to change the lapel reference our string name and run of time send a team at St. team OK. So we want to make this the main launching. So I could just see it turned and remember to make base not to be there alone men on China anymore. OK. Which is our I think our splash activity. Once you remove it for now. OK so let's set these to force. So get back to our logging activity. So this is where will load our view. She said content if you resource me out don't logging so guys this is it. I think we're done here. So we're going to view it and ensure that everything works fine. So beauty succeeded so seems as an arrow so I'm going to quickly find what that is and fix it. OK guys so I just fixed the arrow what I did was I figured out that my my circle image control landings really install appropriately. So what I did was I removed the nugget package from the project clean my project and it started again. And when I started I gave you some time you know to save then beauty again and I now pasted my code and everything worked fine as you can see it is well resolved and is showing. So the other thing that I didn't do was to add a tax for my taste view which is supposed to be who were you were either so these things could be tricky at times so Majesty. So guys the last thing I want to do is to Khaled joined me below equity mage so everything checks out. So guys now we are finally done so we're going to debug it. We you know Ron is on our team go and see that everything is fine. OK. So nice deployment OK so Judy's computing that I did out that I did not turn into that in the ta ta ta ta ta ta ta ta ta ta ta bam. So guys you can see this is exactly what we have in the form of design. OK so our log in page is ready. Just the way we wanted it. So guys I hope you enjoyed the class. So see you in his class.