Login Page in Android Studio using Java & Kotlin || Android UI || 2023 || Foxandroid

hey there everyone welcome to another video fox Android so in this video we're going to learn how to design a login page so basically if your application is having any sort of authentication so the very first thing you want the user to land on is the authentication page right so you want the user to put in his credential the username and password and login to access the other screens of the app right so this app will mainly focus on the front-end design so if you want to learn how to design that then this tutorial is for you so let me just first show you what we're gonna get by the end of this video so if you can see here this is the design that will be implementing in this tutorial so here we have a back button so this button will help the user to navigate to any back activity then we have two input Fields the very first one is for the email or the username right the user can put in his email or username then he can put his password in the password field and we also have option for forgot password and once the user put in his email and password then he can just tap on the sign in button to sign into the application right then we have sign up button as well so if the user does not have any account he can just sign up by typing on this button so this is the design that will learn the implementation of which we'll be learning by the end of this video so if you want to learn the same then make sure you watch this video till the end so without Much Ado let's get started [Music] thank you so guys if you're into this channel make sure to hit that subscribe button and press the Bell notification icon for some notification of the upcoming videos and by the end of the video if you like the video make sure to hit that Thumbs Up Button as well so let's just get started with the design part so the very first thing is we want to add some resources so just right click on drawable new Vector assets so the very first thing will be Arrow so we'll add this Arrow for the back button then we'll be using lock this one is fine another Vector asset email this one okay these are the assets that we need and the another thing will be will be using some colors so I already have these colors copied here so you can just pause the video and if you want the same theme you can use these colors right you can just pause the video here you can just write down these colors and we are good to go so let's go to our main activity and let me just delete it so the very first thing is we need a guideline let's just set it to 35 percent okay now we need card View let's just sets it let's height to 0 DB and we'll constrain the bottom to the bottom top to this right and yeah let's just set the background of the main parent layout yeah you're good to go now for the round button here we need the Fab okay we'll be using this less constraint the start to the start of the parent talk to the parent as well and let up let us put up Margin here 24 and maybe 12 DB yeah looks good so okay now we need the background tent to white Maybe yeah it looks good and tint we want to change the color of this particular drawable so you need to change this tint so we'll put it to app thing okay so it should work so here you can see that the color is not changing so let's just go to the split window there is one trick to change this so just change this to app and it should work now you can see the color of the dryable has been changed and also let's just do it like this okay so now the next thing that we want is we want a text View so let's just align this start to this up here put the margin to let's keep it in the center of both these things and let's call it as welcome back right oops and the color for this should be white so text color should be white and the style textile let's just try to change the font first medium okay and we have changed the color right it's not implemented right and now let's just change the size of the text so let's try to keep it as 36 DB yeah looks good right so okay the next thing we want is we want the edit X so plain text yeah I have read okay let's keep the top margin as 32 DB and we want this inside the card View and inside card view we want another constraint layout and we'll put this inside that consent layout right so let's just consent it like this and 36 DB Maybe 32. yeah looks good so this is put another edit X and this will be for password and we'll consent top to the another edit text and take the margin as 32 DP only right okay we have implemented two edit X now we want a text View let's concern the end to the end of the period top to this and let's take 16 DB maybe yeah it looks good and here also that we take 12 DB let's just change the text to bobcat password style to bolt change the text color to app thing yeah that's good right and now we want a button the width has zero TP right the height as 70 DB maybe 60 DB looks fine okay so the text of this should be sign in looks good let's put some Marshall to the start and to the end let's get now we want a linear layout horizontal linear layout and inside this we want two text views another text view yeah so let's just wrap content yeah let's go and let's just put the text [Music] if you don't have an account right let's go and for this text View let's make it as 0 MD should be sine of color for this should be app thing tile should be bold skirt now let's just put this ah okay the height should be red content yeah this is considering this here to the parent to the parent and it should also be wrap content so this will allow you know align it horizontally in the center so if we want we can just give it some margin at the bottom as well so let's just give a margin of 12 DB maybe looks good Okay so this this take up Corner radius of 32 DB Maybe too much 26. looks fine so now we change the background tint as app Theme let's go try it and now we are left with two things the very first thing is we need to change we have to put the radius here right the top two corners we have to give it a radius to the card View and second is the background of this edit text so let's just first work out with the background of this edit text so for that let's just create a drawable resource file we'll name it as shape it takes background oops the headground right let's let's just give it a shape of rectangle solid [Music] color of theme light then we want to give some corner above TP we'll just change it if required all right we are given the corners and the color of solid yeah then we have stroke the width it's will oops we want to keep it at 2 DB and the color for this will be app team Maybe okay I guess we have another two colors okay border and background we'll just use these ones let's just try to give it a background [Music] foreign match parent write 60 DB don't worry we'll just change this background okay let's just see solid shock yes I kept it like 1.5 DB and it should be border 1280p right now let's just check it if we are getting closer to that if we have to give it a padding of ATP similarly to this is for email travel left for email drawable lift for the password yeah in trouble padding should be a DPS well okay let's just change the hint email or you can turn him foreign foreign don't worry about this we'll just fix this in a while now let's just work on this you know card view so for that we have to go to themes so we have to create a style here we'll just name it as Crystal card View and we'll set the parent as null Corner family will set it to round it foreign just press Ctrl d three times top left bottom left [Music] bottom right right yeah and now let's just create another Style [Music] set the parent as few thank you foreign so now let us just go to our main activities select the card View set the style [Music] yeah we need to implement this as material card view I guess make it 0 DB it should look good now so let's just go to the design part here you can see now we have got this uh some padding here for the edits as well right we might do this here foreign [Music] not getting that let me uh just demonstrate first let me see if we work with 5 DB you're not getting it just try to rebuild it okay I got the mistake that we have done for this [Music] um how you set the color for the background we just need to set tribe like is here it should work now okay now let me set it back to 115 DB [Music] similarly we'll do this trouble here looks good I guess we have reached our final destination and let's just yeah put it this way okay now this looks good and now let's just quickly give it the IDS so Fab back right so okay let me tell you one thing that we are done with the designing part if you just want to design the front end we are good to go right you can just uh skip the video after that but if you want to know that how can we you know implement the on click listeners on these buttons it will take another two minutes you can just watch that then you can like video will end up after two minutes so if you just here for the front end you're good to go so let me just quickly give it the IDS ET a username okay it's called as email the password TV forgot password s sign in foreign [Music] now let's just go to main activity private latent for pointing activity mean binding binding is equal to activity mainbinding Dot and play layout translator [Music] finding the suit foreign [Music] [Music] whenever user Taps on this button and then you have button sign in dots that one click yes no the sign in button binding dot TV forgot password just set on click desktop so whenever user apps on this forgot password text View the last one will be uh GB I guess sign up set on click listener yeah so we have implemented all the on click listeners on all the food buttons like two text views and two buttons the back button the sign in sign up and forgot password right so this is the design I guess that we aimed at that will be getting by the end of this video so I guess we have achieved our Target so and I also hope that you guys have learned this right you do not have any doubt but still if you have any doubt you can always ask me in the comment section you can DM your Instagram we also have a Discord Channel as well I'll highly recommend that you join that channel because I host a doubt session in the weekends on Discord right so you can you can ask by any means whichever you feel comfortable with so that was pretty much everything for this video and if you like the video make sure to hit that thumbs up button in case in this channel make sure to hit that subscribe button and press the Bell notification icon for some notification of the upcoming videos and yeah see you another video bye [Music] foreign

Channel: Foxandroid

Views: 31,864

Keywords: login page android, login app, android studio, login android, login ui android, login design android, login android studio, android, how to make login android, simple login page android, how to login android studio, login screen android studio xml, material design login screen android, login and signup page in android studio, andorid login and singup form, android login screen, android studio login, android signup design, simple login, android studio tutorial, foxandroid, 2023

Id: k35UTi5u9Hc

Length: 27min 10sec (1630 seconds)

Published: Sat Feb 11 2023