Login Screen UI Design - Adobe XD to Android Studio XML | Part 3

hello guys and welcome to the final part of login screen UI design from Adobe XD to Android studio in this final video we are going to implement this login screen design into Android studio so open up the existing project and we are going to create a new activity it will be an empty activity and we are going to name it simply login activity click finish and then head over to main activity layout and we're going to change the ID of our button to let's say login BTN and we are going to use that existing button ID to initialize the button in our main activity and in oncreate method we are going to find the ID of our button and associated with our login button variable and next we are going to use that button to set click listener and we are going to use intent to navigate from main activity to login activity so just type intent and no intent and we're going to pass two parameters first parameter is a main activity that this and the second is login activity dot class and just type start activity and pass intent parameter inside and that's it so now that we have our onclicklistener we can proceed back to our activity log in XML file so we're going to add two input fields one for email and a second for password like that and we are going to connect those constraints right left top and bottom we are going to connect our first input to this and we don't need to prank the second to the first because as you can see when we move move it around eight both of them are moving so let's connect left right and bottom for the second okay let's move just a little bit higher okay next what we are going to do we are going to go to drawable and create drawable resource file which will name the input field so type shape and shape rectangle attribute here we're going to add three elements first is solid for color and we need to use the light gray color as you can see we have added here gray color with opacity of 10 but it will be easier for us just to a print screen like this save the file and then import that image and now that we have imported image we can just pick the color from it and we'll have the exact hash code like there so we're going to place this light gray color in our color XML file we will I'm it light ray okay and now we can go back to our input field XML file and add light gray color okay the second item will be so will be corners with a radius of 50 let's say and the third will be for padding will just add padding left to let's say 25 or 20 but let's say 25 s people okay and now that we have created our input field you will can use a background attribute on our edit texts to import that input field but before that let's add a hint here and let's say email address let's add text color hint to grey for now color gray down below alright and now let's use the background and drawable input field external file okay now we need to change the width and height in height of our input field so with will be 300 and height let's say 50 okay for now let's stay this way and we are going to do that the same for the second field 300 DP and height 50 will copy these three lines of code so we don't need to type will just change email address to password for our second field and let's see okay now we have those two fields but I think we can increase the width from 300 to 310 and do the same for the second input as well alright so now that we have that we can add a button I will use the same drawable file for button which we created in the last tutorial in last video so okay now we can add the background drawable button as you know from the previous video text to login and text all caps to false okay we need to add text color to white and let's check out on our main activity layout to copy some lines to our button can't just delete that one and there we go now we just need to copy within height of our button from the first activity will use the same dimensions like that okay now let's move this a little bit on the right so it's aligned with our input fields top constraint will be 24 for now maybe we will switch to 32 we'll see next we're going to add text view here sorry text you this will be text view for the text need help but first let's connect all those constraints okay let's change it to need help I change the color text color to red and let's add text size to let's say 16 SP okay let's see okay this text is 16 font is irregular so let's use the font when our need help text to a regular as well alright it's moving a little bit on the left and we should change the constraints okay something like that for now next what we need to do to add one more text we'll need two more tests sorry I like those on the first layout you are not a member one text and the second register so we're going to copy all those elements from from those texts to be the same on the our second screen let's just tell your Android studio is informing us that we need to add the margin start as well so we need to set it 16db as well that's when the activity main.xml don't worry and let's copy those lines but first let's connect all those constraints right left top and bottom okay let's add some lines we just copied before that lados do we have already and that's it for now I will add one more text and we're going to connect its left constraint hood to our first text here okay and all those other constraints right and on the top with this second input field next we need to copy a few attributes from the activity main layout for this register text and paste here so we don't need to type anymore okay let's just change the need health text font from a regular to ball it would be much better I think okay it looks better next let's change this left constraint of register maybe okay let's change this to 16 okay and left constraint to 4 for the register text like that and it should be now for it should be okay for now now let's proceed next we need to add we need to add the text view again for hello there text by debt alright let's add it one more time here the top of input and let's connect all those constraints right left top and bottom bottom will be connected to our first input field email address and let's add a few attributes for this new text so text should be hello there and we'll add text color to gray font to bold text size to let's say for the SP I think it should be fine all right let's just move this text a little bit on the right down constraint will be 16 maybe for now okay and the last thing we need to add is this arrow on the top left corner just seconds that's all this let's move all those elements on the down a little bit okay and let's add constraint to eight next we are going to use this resource this back button and we are going to export it in different sizes for Android so as you can see in those folders we have one more element we are going to copy all those folders in our project project directory let's locate it first UI application source main resources and let's paste all those folders and replace it so now we have our back arrow in our project and let's import that back image back arrow we need to change width and height to let's say 30 I think the 30 will be fine okay it looks good so now it's although connect all those constraints and having a bit of trouble connecting those but don't worry I will do it in a moment down constraint will be connected to hello there text left on PA all right move it there connect this the right constraint I'm sharing a little bit trouble but don't worry it will it will succeed okay let's move this over a little bit to align it with hello there text like that so let's check out our Adobe XD project to see the dimensions okay now that we have that we can check our middle base the project to see the top and left margins for this arrow and copy those numbers here so as you can see top margin these three to six and the left margin is 28 so let's type in the constraints here 36 and the left 28 and it should be the same as in our project and there you go okay let's start the app to see if everything looks okay okay just going to wait until Android studio finishes build the project okay click login and it will lead us to our new activity we just messed up those two text views on the bottom you are not member in the register and we'll fix that in a second so head over to login layout and we'll set constrained to 216 or to 8 and we'll move this first text a little bit higher and now let's change the image view for our back button the ID will be login okay let's just in our login activity add this image view we will name it back button and let's find the ID of our back button which will be back BTN and we'll set onclicklistener as well hearing the oncreate method and let's just add finish the finish code means that this activity will shut down and which will lead us back to the first activity so let's write out click login ok and we click arrow it will lead us back to our first activity as you can see it works fine so we need to fix few more things I think that we should lower down let's let's see side by side I think we should lower down and those elements a little bit they are too high ok let's open it let's use bold font for our login text ok and let's slow down our fields a little bit like that let's run this app again click login and okay I think we should move a little bit those two text views on the bottom right there there they should be a little bit higher so we'll change down on our bottom constraints a little bit and the left constraint as well as you can see on our first screen it's a little different so let's set to 24 16 okay down 16 down 60 and left I think it should be 24 like that okay I think we got it now this time run the app again click login and there we go I think now it looks away better so that was it we have successfully created two screens from the our Adobe XD design height project I hope you enjoyed and learned a few things here thank you for watching guys please subscribe to my channel if you haven't already and see you next video [Music]

Channel: Stevdza-San

Views: 83,298

Keywords: login, screen, welcome, ui, design, adobe xd, to, android, studio, xml, beautiful, how to, tutorial, guide, part 3

Id: iF6ja7pU5hQ

Length: 19min 31sec (1171 seconds)

Published: Wed Jun 05 2019