Login and Register Android Studio Firebase - Material Design Android Studio - Part 8 -

assalamualaikum my name is the Musa Condor and today we are going to create the next video which is the login video of the retailer screen inside our city guide application series so let me please show you what we are going to create so the first one is the splash screen and inside we have our dashboard and then when the user click on this we have created the navigation Pro and again the dashboard is having some car views if you don't know how to create anything you can go and check the previous videos so when the user click on this plus button at the right top corner even be redirected to a welcome screen of the retailer in which if the user is already logged and then he is not going to see this but if there is a new user or the user is logged out then he is going to have this screen at the first then click on this login the first thing is you can see the animation which is look like that the login screen is popped up from their specific button let's just close it and now let's open it again so you can see this animation or the effect we are going to create in inside this video so watch the video till end so again you can see we have added a user name so if you start writing anything then you can have a cross button so you can click on this to cancel and then again we have a password we will learn how to change the text color how to add icons on the left side as we have a question in the previous tutorials of the bull grant application and then how we can add icons to the both side like this one the password you can show this password or you can hide it as well then we are going to create this material design remember me and then we have forget password and two more buttons so that's it that's what we are going to create and learn inside this tutorial so it is going to be fun so let's get started okay so let's get started with the login screen so you can see this one is the startup screen of the retailer we have created in the previous video which is a quick one you can go and have a look so to create a login screen again go to the Java and open the first one folder and in here if you watched the previous video we are we have created this login folder and we will put all the login and sign up activities inside this folder so create a new activity right click new and inside the activity select empty activity and you're going to name it login so activity should have a capital first letter okay now what another thing I want to do is insert the layout name you can see every activity have a started activity underscore login so I just want to make sure that all the retailer activities should be same inside the layout should place the same so activity and the score retailer so I will use retailer with all the activities of this retailer so inside the layout they will be stacked on top of each other so it will be easy to find because we cannot create a folder inside the layout so click finish to create okay once it's done syncing close the jar file and inside the rod XML because we are going to use material design inside our project so for that we need to add a dependency so to add a dependency go to the Gradle and inside open the app level build or Gradle file and in here you have to implement this dependency which is Android dot material Google or another material : material one point one point zero if you have watched my previous videos in which we have added the material dependency one point zero one zero and your app is crashing if you are working on the login or the sign of screens and your app is crashing then what you have to do is you just have to change it from one point zero one zero to one point one point zero because this is the latest one and Android three point six is sporting this library so after adding this after changing one point 0.02 1.14 1 then go back to the resources and insert the values open the Styles dot XML and in here you have to change the parent theme the default one to material components because we are using the material theme material components dot light dot no action bar if you have removed the action bar and dot you should have to use dot bridge this dot bridge is basically using the colors of this current theme as well and also using the material components so both are working side by side so you should use bridge otherwise there might be a problem of the colors so there is nothing else you have to do simply close it and also for adding this you have to sync the project and close it again ok inside the retailer go back to the split view and we want to change this constraint layout to scroll view and also want to add a background color which is the yellow and a color primary in my case and again we need to add padding as in the previous video I told you that I'm going to use a same space for all the screens the inside the scroll view as I already told you that there is only one child of the scroll use so we have to add a layout so which is going to be masked parent and scroll you cannot have a height match parent because it cannot be defined in the scroll view the insert is linear layout the first thing we want to add is an image or you can say a icon I am going to use an image for the back button with wrap content width and height then added source general back I already added that button as this is a linear layout so we don't have to define any ID currently but we need IDs for the Java file so let's assign their IDs as well back button and it is login so I'm going to define a login back button one more thing let's add some heading 5 BP so it can easily be clickable ok after this back button we need to add a text view and this text view is going to be a trap content width and height and then we have to add the text I already added all the text in the strings dot XML in here so you can if you want to get I will here this code as well on my website and the link is in the description so you can get these strings as well they go back here and inside the text this is a login so let's write login then currently you can see the login is next to the arrow which is the horizontal Direction what we want to change change the orientation to vertical so insert the linear layout to find its orientation is vertical and even see over here then we do add its text color and is going to be black then the size is going to be for tsp then we add new to add upon family in the previous video we have seen how to add the fonts local fonts of the Android studio and I told you that I am going to use this one and we have three versions I'm going to use the bold one and then to make everything all caps all-capital then you have to write text all caps and make it proof now you can see we have the text on the right ok the last thing is we need to add some margin top and it is going to be 50 DB from the top and close it press alt ctrl L to rearrange the code okay after this text view we need to add our text fields so as this is a linear layout again we can add the text fields as it is but the good way is the good way to practice the design is use another layout which is a bit going to be mash parent and height is going to be wrap content and again it is a linear layout so we have to define its orientation should be vertical okay inside this linear layout as you can see it is placed just next to this login so the next thing we want to do is margin top to add more space maybe 80 dB okay now inside this linear layout we want to create the edit text field so user can enter the data because we are using the material design so to use a material design we have to add text input layout and inside this layout we will add our edit text field which is again going to be the material design you can see this one is material door text field dot layout so you just have to make sure that width is match parent and height is again wrap content before adding anything else inside this input layout let's add a text field but not the first one but the material dot text will dot text input edit text and this is again going to be masked parent width and height and now you can see on the right side we have one edit text field first close it now insert this text input leo we have predefined four styles so you just have to add the style and inside you can see we have a text input layout make sure you use the material components dot text input layout and we have let me so you can now see we have four designs text input layout the first one filled box filled box dense and outline box and out plug moves dense I am going to use the outline box so it will just add and outlines outside the text purity that you can go and check all the other three ones but for this tutorial I'm going to stick with the outline box the next thing we need to add is a hint or a placeholder for the other languages maybe Java and something else but hint inside the Android so hint is going to be user name and this is the inter username over here then we need to add the font family but the font family will be inside this edit text so that's add upon family again it is going to be the same fonts are you using and again we need to add the text color over here and it is going to be black now you can see the hint color is not changed yet now to add a hint color you should write hint text hint text color and it is going to be black now currently you can see the side lines of this text field are grey so to make them black we will use stroke so we have three options over here the first one is box stroke color and it is going to be black then we have box talk with focused and simple with simple with by default is one DP so I am NOT going to change it but you can change it as per your own requirements so width focus when the user try to write something inside the username so it should be highlighted with the two DP so currently you cannot see any effect over here but once the application is running then you can see everything clearly after that to add icon on the left side you just have to write driver start icon drawable and and it is user name icon I already added this as well so now you can see it is again a great gray color so we are not going to chain occur inside its drawable file but instead we have option here start icon tint tint is basically a color a top color so I want to make it black but you can change it to any color okay now there are a few people asking me inside the previous tutorials of the bull and that how we want to you want to cancel the data written over here then how we can appear at icon over here when the user presses this icon the text should be here so by default there is an option it is called icon and icon mode and you can see we have a bunch of options over here a drop down menu should appear when that specific icons should be clicked nothing should happen password toggle should be appeared or you want to use the custom one and again a clear text so for this we have a clear text option when user will start writing something then Pio text will appear a pop-up and when the user want to remove anything then you should have to click on this icon and everything inside this text field will be removed again we want to make sure that and icon tint should be black currently you cannot see this because nothing is written over here we are going to run it in a minute okay so I think username is pretty much ready simply copy this one and paste it one more time for the password so hint is going to be inter password black and black which should be focused that's the thing we want to change is the start icon field I can password icon is changed then and icon mode is not the clear text but it is our password toggle you can see over here the icon is appeared and now one more thing you have to define is the input type and it is going to be Tex Tex password form number sign but it is going to be text password and now you can see the eye is closed by default because the password at the start will be invisible and the username over here you should define the input type if you want to make sure that user cannot write the text then you choose the number you can choose the form date time and many other things you can scroll it below there are a lot of things but currently I am going to make it simple text okay now we have a username and password and after that we want to add a button over here which is a remember me and then we have a forget password button so close them close this linear layout or you can add that inside this linear layout but this is going to be again another linear layout because want to make two buttons in a horizontal position so width is matched pair and height is going to be web content by default its orientation is horizontal so whatever we will place inside this TD layout will be placed in a horizontal position so to add I remember me we have to define a checkbox the first one and is going to be wrapped content width and height then you have to define its style and it is going to be compound button dot checkbox so now you can see a checkbox over here and then let's add its text I remember me then again we need to add you can see the color of this remember me or this one is not black so to change it change the icon color you have to write button tint and it is going to be again black then we need to add a text color and is again going to be black as well so that's it now insert is linear layout let's add some top margin 10 BP maybe here okay we have a remember me over here and after that we need to add one more button button is going to be wrap content width and height and it's text is going to be forget password then make it background transparent so add double zero for the four make anything transparent and then one two three four five six zeroes for any color code you can see the forget password is now completely transparent so now what we want to do is want to make sure that forget password is sticked to the right side of the screen so and we are using the linear layout I just want to show you guys that it's not that everything is not easily happened inside any layout so that's why we need to switch the layouts as there is a question to me that why you are using sometimes relatives sometimes linear layout so now you can see I don't have any option inside the linear layout to place this forget button over here but we want to play some or to add more lines in here to place this project button over here insert the linear layout so instead let's add a relative layout so it's same the button is appeared on the top of it so we just have to mention a line parent and or the right make it proof and you can see the forget password is jumped to the right side it is saying that a red line because we need to add parent right is equal to two and it will be gone like this one so now you can see the Remember Me is at the top again the relative layout is allowing us this way by adding center vertical through and it will be at the center of this forget password width and height so now you can see they are aligned perfectly so the next thing we want to add is a button so close this relative layout and in here we need to add one more button it is going to be match parent ideal wrap content then let's add its text it's going to be log in then we need where it's background and it is going to be black then we need to add its text color and the text color is going to be white now let's add some space from the top and make it 20 dB that's it for now the next thing we want to add is inside this linear layout or outside this Union a over for you now we need to add one more button which is going to say that if you want to create an account don't have an account then simply go from here to the login account so we have created this button forget password I'm going to copy it and paste it below this login button like this and this is not inside the relative layout so I have to use gravity layout gravity and make it Center to place place it in the center so we need to change its text as well to create a count then add some margin top to 20 DP currently you can see that this create account is not in a horizontal position but the create is at the top and then we have an account so instead of writing anything let me show you one thing over here inside the text you can write this this is was this was a question in the comments so that is why I am going to explain this let's say I have written create but I want to write account on the next line so I am I just wrote the count over here and you can see it is not going to jump to the next line so instead I will just remove this space and press backslash and n so you note this one but backslash n as you can see it is just jumped from the top to bottom so but this way you can add the next lines by adding a backslash and n okay so that's it for the log in screen but one more thing I want to add is which is the animation to the screen as you can see at the top I am in the I have added the background color inside the scroll view so I want to make sure that our shared animation should work for the background instead of the one we are using so this is just because how we can use the animations or the shield and emissions differently by using the different ways so let's jump back to add the animation to the retailer startup screen because in here the user will press the login button and the animation will be started so in here the lock click on the login button and add its ID login button and at the sign up ID as well which is going to be signup button ok inside this log in go back to the split mode and inside the login you can see there are two ways to make sure that this button is clicked and get or perform any action inside the Java file the one method everyone knows is the onclicklistener and the second one and most of the time people are asking me and they don't know what is happening so the better way is let's say when the user click on this onclick method we can simply define it on click and let's make a function called login screen do not add any brackets over here the just you have to defined a function name so it is currently showing the error because we have created the function yet so I'm going to copy this and jump back to it's Java file and in here instead of creating the UP button book button variable and then onclicklistener you just have to come here and make sure the function is public not the private and void then function name we have just passed over there and the next thing is it should have a view parameter inside it so for the error press alt interval for the class and that's it we have created a function so go back and now you can see the error is gone okay what we want to do is we want to perform the animation by using intent so first create enter to import this class intent is equal to new intent and in here you can use get application context or name of this Java file which is a retailer startup screen and we want to move is want to move to the login dot class and close it now we have to pass the peers or we can create any Wishon inside the pair so let's add a pair this one with a square brackets and don't have to write anything and add the name phase is equal to new pair and how many animations we have only one how many elements elements we want to animate so in my case I just want to make sure that one element which is the button should be animated so you can change it as per your own requirements then we write pairs at zero index zero index means one at first position is equal to new and again it is going to be pair and inside here we have to define currently you can see it is say it is asking to use object and then comma again object but we can define that we want to use is the first one will be view any element and then the string name of its and now you can see the first one is view the view is basically let's back to the screen and this these everything is a view in the Android so this button is basically a view but I have to call this pattern and I again have to mention the transition name transition name is going to be login button so this transition name should be same I want to make sure that this transition should be appeared on the background of the login screen so what I will do is I will copy this transition name as it is without changing anything to where we want to show this animation let's say you want to change this login to this login then click on this login and you just have to paste the animation name over here but as I am NOT going to do this I am jump back to the scroll view and I am going to add this animation or transition name over here so this transition will be take effect on this whole screen so you will be we will get in a minute jump back to the startup screen and we have define the transition images transition in this pocket copy it so you should define or the every time transition should be started from the calling activity so in here we will first define the button which we haven't created the hope yet but the second thing will be this string which is the name of the element or you can say an ID of the element you know we have to create the button hook so one way is simple way we can simply write find by ID or dot ID dot it is a login button I'll just make sure it is login in the school button and it is a login button the way around is you can simply go back at the top create a button variable and again use the hook find you by ID and then you can use that button over here but if you don't if you don't have any need of that button then the simple coding will say that use this technique okay we have created the pairs now we need to call the next activity using an indent and we need to pass the space as a transition to this indent so we use to make the transition we will simply write activity options is equal to activity options dot make scene transition animation this one and click OK now inside you can see we have to pass the pair the first thing is we are inside the retailer startup screen dot this and then what is the animation it is peers and that's it now the error is basically it is saying that car requires EPA level 21 but the project is using and minimum is 16 so make sure that application do not crashed when the next activity is called so you can simply wrap it by hovering to this Bulba Bulba icon or press alt + enter' and add the require api which is the lollipop annotation and so this one is not recommended but used sound with if so now you can see only this position will be activated when the version is 21 or higher and inside this if now want to start our activity and we will not just pass the intent here but we will also pass the bundle options which is options dot to bundle the options are basically this one we have created activity options so make sure that this variable should be e same okay we have called the API level 21 or higher but we haven't called for the other lower levels so for the lower level you just have to start that activity and fast intent over here and you cannot use this options so that's it for the coding side so let's run our application and see what's going to be happen okay we are inside our dashboard so when the user click on this + icon he will be redirected to the welcome screen of the retailer so you can decide whether to login or signup so when user click on this login button so you can see the animation it is now let me close it you can see it is it looks like that this everything will appeared from this button but it is just an animation so let's do it again so that's it for this tutorial to again remove the top bar or the status bar you just have to add the line over here which is layout prams copy it and open the login screen at the top offset content view we just have to paste it click OK to add or to import and rerun the application so this is a splash screen and then off to the dashboard click on this plus and insert the login when the user click on this login button then this thing is going to be happened so that's it for the login screen but again remember we have I got a lot of questions about remember me and forget password so in this tutorial in the coming videos I am going to use the remember me or you can use it as well remember me you can store this username and password once they are authenticated you just when the user click on this remember me you first have to check that if the checkbox is checked and login and user name username and password is correct then you can simply store it using SQLite database which is the local database not the global one or not the cloud server so every time when the user again login then you can simply use the priest or login username and password and show it to the user you just have to press the login button and that's it again for the forget password there are two options the first one is we are going to use the phone number verification first users forget the password then we will send the verification code to his number and if the COR matches then we will allow the user to re-enter their password and the second way is using a Gmail or the mail so we are going to create them in the upcoming videos so thank you for watching if you learn something new please like the video and if you're new to Channel please subscribe it as well thank you for watching take care Allah

Channel: Coding With Tea

Views: 42,811

Keywords: login screen in android studio, login screen android, shared animation android studio, material design android studio, simple login screen in android studio, login screen ui, login android studio, animation in android studio, ui design android studio, android studio animation, android studio, android ui design, login and register android studio firebase, animations android studio, simple login app android studio, ui design in android studio, ui design to android studio

Id: jh5woifGidw

Length: 36min 8sec (2168 seconds)

Published: Wed May 06 2020