Material Design Signup Screen in Android Studio - Part 9 - City Guide App - 2020

assalamualaikum my name is the moon cylinder and today we are going to create the next part of the city guide application which is the sign up screen and in this sign-in screen we are going to learn bunch of things so let's get started so this is our splash screen we have created for the first time then we have our dashboard and when we click on this plus icon now we will be redirected to this retailer welcome screen and inside when the user click on this login so you'd be redirected to the login we have created in the previous tutorial but for now when the user click on this signup button he will be redirected to this signup screen and in which he will be entered his name username email and password so you can see we can simply remove them or hide or show this password now when the user click on this next button you can see it is basically a next activity but with the some animations we are redirecting or letting the user know that it's just a screen changing some fields so he can select the genders you can play with the age and when the user click on this next button the same way we will get his phone number at the top we have a list of countries you can scroll to any country so by default it will show your country mine is Pakistan and then name of the country then code of the country and if you want to reduce it you just want to show the flag you can do it if you just want to show the name of the country you can do or just the code you can do it as well so that's it for this tutorial so let's see how we can do that let's get started open Android studio project so I am in the login screen which we have created in the previous tutorial if you haven't watched yet please go and check out this video the link is in the description ok so to create a sign-up screen go to the Java and inside you guys know some of the guys know that we have created this structure if you again don't know how to create this one please I suggest you to watch the previous videos and then inside the comment we are because login and sign up can be used by any user so it will be inside this common folder and we have a bunch of login or signup files so I you created an another folder and inside we have a startup screen then or the welcome screen then login and then now we are going to create a sign-up so on this folder right click new and create a new activity empty activity and we are going to name it sign up click finish to remove this letter press alt' + enter' and inside you can go for the import + ok one more thing as i told you in the previous video that we cannot arranged every xml file inside some another folder so but i have used the approach that we are going to use underscore retailer with all the xml files which are related to the retailer so that we name it right-click refactor and rename it to and pre-factor okay before moving further if you haven't bought the login screen so I want to tell you that you must go and check it out because we have to use the material design dependency in the project okay so let's get started first of all press alt ctrl L to align the code and then we are going to change this constraint layout to scroll you and this background is going to be the yellow one this is the color primary in my case you can get the color course from the link inside the description okay as scroll you can I have only one child so I am going to use a linear layout width match parent and scroll you cannot have a match parent height because we cannot define height inside the scroll view and then again for a neat and clean design I am going to use 30 DB space from the sides okay now inside this video the first thing let's go back to the login screen and you the first thing you can see is we have a top arrow and then we have a login text so I want to use the same thing on my create account page so let's go to the split view and we are going to grab this image view and inside this we have just pasted so it's just a icon I already have added in my drivers so with the wrap content width and height it has 1 ID and it is not going to be long and back up but it is going to be signup back button then it has a heading of 5 DP and then it's just added a source ok after this image we need to add a text view text view should be wrap content width and height and text is going to be create account okay one more thing we need to define its orientation we call linear there by default is poison but we wanted to be vertical now add its text cover and it is going to be black then we to define its text size is going to be 40 SP and then we added a font family and we are going to use the same one we have sorry the bold one which is black then to make everything capital we need to define text all caps and make it true I already explained how to if you want to break the line or break the text inside the text view I explained in my login video how you can do this so if you want to break it just add a backslash and in the string so it will be break down to as many lines as you want now we also want to add some space so it is a margin talk to 20 DP ok we have created our back button and also our text now we want to add all the text fields so before going as this one is linear layout with vertical orientation so we don't have to create another layout here but in case we need to change something then we need we just have to copy this linear layout or to cut it or something like that so width is match parent and height is going to be that contact I am just going to wrap my all the fields and the buttons inside this linear layout so if you don't want to use it it's up to you guys then again it's a linearly also we have to define the orientation vertical now inside this linear layout the one more thing we need to add is a margin top and it is going to be not SP but so DP ok now inside as we are using the material design so search for text input layout which is material dot text field the text input layout we are going to add the text field or to wrap the text field inside the text input layout to enhance the design so it is going to be mashed parent width and height is wrap content to make it visible let me first add edit text inside it but this time it is not going to be the first one the normal one but it is going to be the material door text field your text input header text again the width is going to be match parent and also height can be match parent or the wrap content now to add a hint right and and it is going to be full name add a drawable at the start start icon driver and it is going to be full name icon now let's change it colors but first I want to change its styles so it can have border on the four sides so it is going to be text input layout which is the outline boxed there are four type of styles available for the material design you can check my previous videos for that or you can also play by your own and now let's change their colors to change the start I can color you can write start I content and it is going to be black now to change hint color you can write hint text colors and black and also text color hint and it is going to be black make sure that the first one first one is with the app and it is hint text given the second one is Android which is text color hint so text color hint will change the text currently when nothing is written and hint text color will change the color to black when it moves to the top when we write something in it okay one more thing we need to add over here is and I can mod so what this is and I will enable the password toggle clear the text or we have a drop-down menu and custom also but for this I am going to use the clear text and also we need to add and I content and it is again going to be black currently it is not visible because when we write start writing something in here then it will be visible that at the right side with the X and when the user press on this button everything written inside this field will be closed okay now last thing is we need to add stroke if you want to make sure that this field which field is selected by the user then you should use bak stroke width focused so this is the focus width so but if what it is one DP but when the width is focused then change its width to two DP then again right bak stroke color and is going to be black but currently but if all it is one you can change it as well and our first field is ready let's just close this and copy it ok I have pasted it four times now let's we need to add one more thing which is input type and for the full name it is going to be text now we can change it for other fields let me change your names and icons okay just change all the names and all the icons and added input type in the password you can see I have changed the input type to text password and then in the phone number I have change it to the form and then in the email you can see it is text email address so rest of them are input type is simple text okay now inside this password I don't want to add a cross over here so change and I can more from clear text to password toggle and write password toggle enabled to true now you can see we have a white color icon over there the one more thing is and I can mode can be deleted from here - and then we need because we don't need and I can mode if we are using password toggle enabled then we can write passport or girl tint to black as well and there we go we have a black color password okay as we have added all the text fields so the next thing we want to add is a button now outside this linear layout I want to add a button which is a simple button with this match parent and I it is going to be wrap content then we need to add a text text is going to be next button because on the next screen we want to get some more details like date of birth and we want to get phone number by a specific country okay now let's add a background color it is going to be black as well and we need to add some margin top 20 DP and close the spawn then we need to add its text cover and it is going to be white and if you want to add some elevation you can write elevation Android colon elevation and let's define 5 DB elevation it will add a shadow behind this button okay so we are done pretty much I guess one more thing after this burden we need to create one more button and it is going to be just change its next to login change the text color to or the background the background is going to be transparent so to make it transparent to zeros for making anything to spare and then as six digits for some color code so I am just writing six zeros over there text color is going to be black and that's it we can change its phone family as well okay so we are pretty much good for the first screen so let's move to the second screen but now for the second screen when the user presses this next button I want to make sure that we can use fragments as well but the but to get data and pass the data between fragments is pretty much tricky thing for the startups so I don't want to you guys to be confused inside the fragments and it will be very complex signup screen so I don't want to make that so that's why I decided to go with the activity instead of the fragments so when the user presses this next button I want to make sure that this next button then lock in and this these two top elements should animate so user cannot feel that he is moving to the next screen but instead he will simply feel like that this portion is removed and new one is arrived so to do that to add the animation we first have to mention the transition name to all the elements we want to animate so transition name is going to be transition login button so let me just copy it so we want to make this to transit as well so transition this is going to be next button because we have to we cannot change the transition names in the next activities as well so transition name should be same in all the activities to the related elements so we need to add transition over here as well transition title text and then the top one transition back arrow button okay we have created for transition names and we close this one the centered one okay now the last thing we need to define their IDs so for the back button we have signup back button for the textview let's copy it and it is going to be signup title text then for the next button we have signup next button and again it is going to be sign up login whatever now we can call we want to animate to the next screen when they either click on this next button but first we will validate and the validation will be in the next video so in in this video we are not going to validate any of these fields but we will jump to the next screen using the animation so when they click on this next button we want to call a function instead of the own click listener as lot and lot of people asking me that where is the on fit listener and it is not there is no on click listener and they don't even know that we can use this on click method so that is why I'm using again and again this on click we can call this on click Android colon on click and then we can create some function with the name call next sign up screen so this is going to be the function name without any brackets you have to mention it here I am just going to copy it because we have to create it now go to the sign up and we are not going to create any hooks for the button yet but instead we are going to create a public method so it should be public because it has to be accessible outside this Java class so public void name of the class which we have mentioned over here which is called next sign of screen in here and then inside the brackets we have to write a view press alt enter to import the class and then create a function okay now let's move back and you can see the error is gone now when this function is this button is going to be clicked this function is going to be executed so the first thing is we need to if want to add the animations we need to get their hooks as well so this one is image view then we have two buttons and one text view go back to the signup and first of all we need to create variables the first one is the image view then we have two buttons next and login and then we have one textview just going to be title text and that's it now we need to inside the on create we are going to create the hopes so for the back button it is going to be find view by ID order ID dot signup back button then press control D to duplicate it okay we have created the hooks now let's go back to the function when they either call this or click this function to move to the next screen we will first validate but let's suppose the validation is done now we want to call the indent press alt enter to report it is equal to new indent and inside get application context or you can pause sign up dot this then - we want to move we haven't created it so inside the login sign of right click new and create a new empty activity this is going to be signup second-class click finish again press alt enter to import this and we are not currently doing anything in here in the Java class close it and go back to the signup then we are moving to sign up second class dot class okay we have created the intent but we haven't called it yet because we want to add transition so to air position we need to add pair and going to name the variable which is pairs is equal to new pair in here we need to pass how many elements we want to animate or how many transitions we want on the elements there are four so define the value over here and that's it now for the pairs at zero vocation which means the first one is equal to new pair and this time we have to define what this pair is going to be looked like the so the first one is going to be view which is the element on the XML where it can be button text image anything so it is the first one is view and then second thing is going to be string which is a transition name so now it is going to ask you to enter the view the first one is let's say a back button and then the string is going to be we have to pass the string name which the transition name over here so we have four press ctrl D to duplicate and change their values to 1 2 and 3 make sure you should change them otherwise they are going to be crashed or your f app is going to be crashed now in here in the strings we need to pass the transition names so head back to the sign up and in here the first one is so go back to the sign up and for the back button we have to pass it here so for this way we can add all the transitions no need to call the next activity by adding this transition to it so again this is a simple way you need to call the options activity options sub variable options is equal to activity options dot make scene transition animation and inside this we need to pass the first sign up dot this and then we need to add the pair's which are the animations and that's it close it now the error is going to be the API level so I suggest you to go for the if choose the second one wrong with if it is going to use the API level 21 or higher so if let's post the API level is not 21 then we are going to simply call the start activity like the normal way we call our next activity and we are going to pass intent in it so that's it but if the API level is 21 or higher then we are going to start the activity by intent but we will also pass the animations dot to random so this will attach the animation with the intent so if it is not the API level 21 or higher then it is going to be use the normal approach press alt control L to clean the code so that's it from this activity so for the second activity which is the sign of second class let's go back to the sign up as we have these four things in common and common and we also have a background in common so I am going to copy everything from here press control all to copy and in here go back to the split view and I'm going to paste it now you can see we have the same design we got the same transition names over here I'm going to change position name because if the position name is changed then that animation is not going to take effect but I am going to this linear layout and inside this let me close all the fields and we are going to delete them and in here let's just add a text view which is going to be wrap content width and height and the text is going to be choose gender that said we need to add its text cover and it's going to be black then we need to add its text size to 18 SP to make it a little bigger so after this text view as this is a linear layout we need to add two checkboxes so to add a checkbox in a quick way go back to the design section from the top and go to the buttons in here search for radio group and we are going to place it inside after this text view inside the linear layout and we need to add a 1 radio button inside this and then second one and also the third one okay once we have added all the three buttons go back to the split mode and we have a radio button let's change its orientation to have a default its vertical will change it to horizontal as you can see it is match parent width so the next two radio buttons are next from this point so it will be OK in a minute so change it to wrap content their width all of three to wrap content now they are visible change the text to male-female and other now one more thing we can place them Center by adding a layout gravity to Center but again we need to change the radio group width to that content as well so there we go let's add some space from the margin top by adding ten DP as you close this video button okay now before going to add a calendar I just want to add one view view is going to be basically a simple horizontal line so width should be matched parent and height is going to be aligned with the height of two DP so to make the line visible we should add a background color and I'm going to add a black one so now you can see we have a line so let's add margin top 20 and again the margin bottom to 20 DP to add some space so let's copy this text view for the edge as well so after this view I'm going to paste it and change the text to select your age okay now after adding the text we need to add date picker with the width match parent and height is going to be wrapped content now currently you can see it is a whole calendar but we want to change it to smaller one to the spinner so let's change the date picker mode to spinner instead of the blender then add calendar calendar view shown to false and add spinners shown to true so that's it for the date picker when we are going to run this application you will see the effect again the same thing we want to do with the icons and when the next button is going to be clicked we want to move to the last screen let me create a new activity by using the same process and I am going to copy the same code and we'll remove the centered one okay I have created another activity which is a sign-up third class and in here I just copy the same code and remove the centered one I have but one more thing when we copied the signup class then we haven't changed its context it is assigned up but the current one is signed up second class and in the third I did the same from sign up to third class so this is a context of its own Java class and inside the second it is has its own Java class reference so that's it for the second class so let me close it I already added the hooks and variables and again appears to hit with the same process just copy and paste it the same way I have done it here and the same one is over here so let's close it for now and we are inside our third one so change this text to or maybe we don't need it in here in the third third one we need to get the phone number from the user by adding or by choosing their country so how you can use a country picker to add a contributor there is one dependency you need to add so let's go this app and go to the build or Gradle file to add them implement or have the dependency in here you need to paste this one which is comm dot hbb 20 colon country code picker and this is its version 2.3 point 1 and click on the sync Now button okay once the Nancy is added then inside this linear layout you can search for country core picker which is this one so width is going to be match parent height is going to be a wrap content it has some functions like if you want to show or hide the country code show or hide the country flag then full country code and sector etcetera so the first one is auto detect country make it true if you want to detect the country automatically then we have a flag show flag so make it true if you want to show the flag as well then we have a country code show name code and make it true as well and there is one more show folk name and make it true so but this way we can have a flag full name and then code as well so the name of the country this is the name of the country then code then flag and it is going to detect the country automatically so it is not going to appear over here but when we run the application we can see it by default its background is going to be nothing it's going to be fade so to add a background or to add a border line way like we have in the material designs so let me first close this one so to add this background like in the material design we need to create that background so quickly created by going to the resources and dryable right click new and new driver let's name it black border and click OK now move to the split section change it from selector to shape or ctrl L to a line and shape is going to be rectangle okay now inside this shape we want to add solid solid means we need to add its color and color is going to be transparent so double zero and one more thing okay now we need to add stroke the stroke is here and it's stroke width is going to be one DP because all the text fields are having one DP so closer then we need to add its radius for the corners so the radius is going to be five DP so it can be little curved stroke colors is going to be black as uu so that's it we have a black border so close it and inside this core pickle we will add a background as black border so again it will be appeared when we run the application so our country core picker is pretty much ready now the next thing is we want to add again let me just copy it from the signup screen maybe a phone number basically this phone number is not going to be appeared at the first screen so let's just cut it and move to the third screen paste it over here and inside after this one we have a phone number and it's going to be fun so pretty much ready so let's try to run our application okay so app is running inside the dashboard when user click on this plus icon you will be redirected to the retailer screen and inside the way we have created this login the animation in the same way you have created for this sign up button so when the sign up button will be pressed you can see a sign up screen is appeared with the text fields and this password is being toggled easily and again the full name and you start writing something there's an icon which can be cleared the text so again click on the sign up and when the user click on this next button you can see it looks like that the items are being replaced instead of the activity is being changed so again as we have added a group inside all these check boxes so only one item can be select at one time and then we can select the age by using month year and date so when the user click on this next button there is country list over here and the Lord Lord lot of countries and then we can enter the phone number so as you can see the phone number is having a bit more width and the country code is having a little less space so we can add some padding to increase it so go back to the country code picker and inside let's add some padding of 5 BP baby so that's it for this tutorial so that's it for this tutorial if you learn something new please like the video and if you are new to the channel please subscribe it because more amazing things are coming on your way so thank you for watching take care all office

Channel: Coding With Tea

Views: 28,976

Keywords: material design android studio, login screen android studio, login screen android, login ui android studio, login activity android studio, android ui design, material design login screen android, login screen ui, login ui, login page in android studio, login and signup page in android studio, sign up, android ui/ux, ui design android studio, login android studio, login ui design android studio, signup form in android studio, android ui, registration form in android studio

Id: 1LDek78WU0Q

Length: 39min 8sec (2348 seconds)

Published: Sun May 10 2020