Login Screen Implementation using Jetpack Compose | Keyboard Options & Actions.

hello everyone welcome to Native mobile vids in our last video we have developed one basic flow for one authentication module where we have already completed our registration screen and terms and condition screen in today's video we are going to continue that application and we will start from implementation of login screen and then we will add one custom routing between all of these screens and then we will learn the official navigation of Jetpack compose you only need to do one thing if you are new to the Channel please hit that subscribe button and let's start today's video okay so we need to start with this login screen we have already implemented this registration screen let me show you in the emulator so we have implemented this and if you have missed this you can check out the implementation video at my YouTube channel this is the most recent video which we have covered and today we are going to start with the slogan implementation okay so we have the components ready tube the components we already have so we need to just go to our screens we will just create one new file we will say it login screen okay and inside this we will just create one composable we will just create one function login screen okay and inside this we will just start with basic surface so if we just consider our sign up screen right let me just open this in the right side okay okay so to start with we can just take this surface and we can use this as a parent for our login screen so that one container will be there with white background okay so first of all let's add one preview so that we will be aware that how our screen is looking so we can just use login screen preview okay and inside this we can just directly use our login screen so right now we have added one surface which is kind of a container and we have one background color and we have some padding here okay now if we consider our image of design so we can just see that we need this component which we have already designed so we can just use one normal text component okay and inside this we can pass one string resource we can just pass login and we need to import this resource okay so after importing this we can just pass login one normal text component will be there now after this text component we have this heading so we have designed one heading component also for this we can just use the same we need to pass a string resource and that will be welcome back so do we have any string for this yeah we have this welcome so we can just pass this string r dot string dot welcome and now again we need to use one column as well so that we can arrange the children inside one orientation we can just take both of these children and add inside our column okay so if we don't add any modifier here it will just respect to its parent modifier okay but still if you want we can just add the same here as well and one thing I would like to show so if we just add one background here right and let's say we add color dot black so you will see that only this area will be in black color because parent has one padding as well okay I hope you understood this and now inside our column composable we will proceed with further design so now we need this uh text field for email and password right so we also have one component if you just go to our app components you will see that we have one component for text field component as well we only need to pass level value and resource icon okay so we can use this my text field component we need to just import it and inside parameters we have two parameters label value which will be our email string so we can just use r dot string dot email okay and we need to pass the icon for this okay so do we have any icon yes we have we can pass with painter resource driver Dot message okay this is basically one email kind of Icon we are using so we can see that our screen is getting configured very fast and this is how we can utilize the benefit of our components which we have already designed now we need to use for password as well okay so we can just pass log here so our password is also ready now we have one forgot your password One Click your text okay so for this as entire text is clickable we can just use one normal text let's say we Design One new component for this what do you say right so we can just use this and we can create one new component and let's say under line text component okay we say it like this and inside this we can pass some color also little bit grayish and let's try to use this I will show you why I have created this new component right so if I just add underline text component and do we have any string resource r dot string Dot for good password we don't have right so we can just create one new string first of all for gold password and we can just take forgot your password as the value for this okay we can utilize this string inside our login screen for this string resource okay so our forego your password is coming but if we just check out the layout there is one underline as well right and if we just check the size also the size is little bit reduced I guess because it's looking very small size is 18 and how much we are using we are using 16 that's fine but we need to add one underline okay so we can use text decoration dot underline and this text decoration with underline decoration We'll add one line below our text so if we just Zoom it little bit we can see that we have our design which is similar to this right forgot your password and we also have the similar kind of design but let's go back to figma and let's see do we have any space in between we can add one space I guess and for that we can just use one spacer and we can just pass one modifier with some height let's say we are just passing height as 40 DP okay so that some space will come up right and then it will look much better right yeah okay now we need to add the slogan button and we have already created one component for this button right this button component and I will again mention this that if you are not familiar you can check out this previous video here we have created all of these components which we are using right now so we can take this button component and we can come back to our login screen we can just add one button component and we can pass one string resource okay and we can pass login okay so that we will have one button and you see that now how quickly we have designed the slogan screen right we can add some space here but I don't think we need space like this like if we want to have this button at this much portal I feel this is fine but we can just add little bit of space so we can again use this for DDP and it is fine right now we can just utilize this we can add some space here as well below this welcome text right so let's say here we can just add this 20 DB okay so at least little bit of space is there in between this so after the slogan button we have this divider and text component we have this component as well divided text component and as the text is similar which we are using a directly or with the help of one divider then one text again one divider so we can use this so let's get back here and let's add divided text component okay so it will come below this login button one divider text component will come which will have these two dividers and this but let's add one space here as well I guess let's say 20 DB right so some space will make it more beautiful now we need one clickable text component which is like don't have an account yet and register we have one similar component which we have designed for this right so now let me show you how we can utilize one component with the help of parameter and for multiple use cases right so right now we have this four login now let's try to make it configurable so that we pass one parameter and we can use here as well for login and for register as well here as well right let's add one parameter trying to login and let's add this as Boolean flag okay and by default this will be true okay so that if nothing is passed for this like we will understand that they are trying to just you know make this click for login so as of now this clickable login text component is built using this static text right so already have an account and login right we have this text but now if we are trying to login then only we will show this text so let's try to add this condition that if we are trying to login then the initial text will be this else initial text will be this don't have an account yet and let me take this from figma okay so if we are node coming for login if we are not trying to login and we are coming in else condition then we will just use this text okay and this register will be here else register and the initial condition will be that if we are trying to login then login else register so basically now this will become one string and this will become one a string okay and here we can pass trying to login true okay because this is the sign up screen okay and inside sign up screen yes we are trying to login so we are passing this as true now we can utilize this component inside our login screen and we can add here okay and here we'll pass this as false because inside our login we are not going again to login screen we are going to the register screen so we are not trying to login we are trying to register a new user so we can pass this trying to login as false and we have our clickable text component ready so if you just check out don't have an account yet register don't have an account yet register right so let's run our application once and let's see how it's looking inside our emulator okay so we are at our register screen and if we try to click here okay I think we have not added the click yet so first of all we will go back inside our sign up screen we can just you know use our router post office app router dot navigate to we can just add a screen dot login screen but okay we have not added the screens as well so let us go back to our router class we can add one new screen object here login screen and I will suggest that you just go to your screen first okay and then you take the screen name directly from here so that at least some similarity will be there and just use it here okay and then you can just go to our post office app class and here inside this when condition we'll just add the new condition check as well that if login screen is there where someone wants to navigate so we will just show login screen okay now we will be able to use login screen here inside our signup screen and if we run our application now now we will be able to navigate to the login screen from this right strategy screen okay so our application is installed fresh and now if you click on the slogan button login clickable text we are coming to this newly designed login screen now one thing is missing are you able to guess what it is if you press back button we will just go out of the app because we have node added back press Handler inside our login screen so how we can add that if we just go to login screen below this surface which is the parent container we can add our system back button Handler okay which we have designed and inside this we can just use our post office app router node navigate to and if you press back button inside login screen where we want to go to sign up screen if you remember inside terms and condition as well we have added the similar thing and if you run the application you will see that now navigation is working as we expect okay this is our application we click on this we press back button we come to our sign up screen right we need to add one link to navigate back to register right so let's go back and add one navigation inside our login screen let's close everything open our login screen and inside this clickable login text component whenever we will click will come inside this won't text selected you already know that how we are coming because we are passing this as a high order function here okay and whenever this login text is getting clicked we are going back to own text selected and if you are wondering that how come this span is changing and matching to this because we have added this condition here that if trying to login then this is the text else this is the text and that's why it's matching and navigating back to our login screen okay so inside this we can just add post office app router dot navigate to and we can just go back to screen sign up okay now this is fully functional with navigation okay so let me just show you once if we click on this login button we came to login screen now if we click on this we'll just go back to register screen but now we also have this functionality that if we are in the login screen and we click on this register button right register text clickable text so we will go back to sign up screen again okay and from sign up if we click on this we'll just go back to the phone main screen right so it's looking beautiful right we can just go back to privacy policy we can come back to the sign up screen if we click on login we will go back to login screen we can go back to register from here as well and we can come back to register from here as well so this is one complete login flow application which we have and in our future videos we will do a lot of things now let me show you one another important thing which we can do so as of now if you see we don't have any next button from the keyword right okay so if we want to add that next button inside our keyboard instead of default options we can just use ime action and we can use ime action dot next okay and we also need to use single line okay true and its node coming as a prompt because we have some other text right so if you will add here then it will just pop up okay and we can just write true we can use max lines as one okay now I always want to add these together because this is related to keyword like this okay now if you run our application we will see that our application is having one next button okay and we can Traverse all of our text field like this right but this password is not having any button it should be actually a done button so that once user fill the password it just finishes so for that we just need to come inside our password text field component and we need to add one ime action here which will be ime action Dot done okay and for this also let's add one single line true and Max lines will be 1. okay now it will work and now in both of our screen these text field will respect these properties so if we click here we can Traverse okay right how good this animation is looking and at the end at the password we have this done button so we need to add keyboard actions basically this and inside this we need to just clear the focus now on clicking of this done we need to clear the Focus right so we will just take one local Focus manager and we will use one locusfocus manager dot current okay and we'll just take this and inside keyboard action we'll just clear Focus okay now let's run our application and let's see will it work or not okay so if we just go to next next and now it's getting cleared right so this is looking pretty cool now if we just come here we can just go to the next button okay did you notice that why there is no done button and all because we have two different text field component this my text field component is used for all of the field except password so we need to add this password text field in login screen as well okay we need to just use this password text field component and now it will be working fine so let us just see this okay we go to login now this is updated right so if we click on this we'll come to the next screen then we can clear the focus right so friends that's it for today's video now we have our sign up and sign in flow ready in the next videos we are going to use some real-time database and we'll create some actual users using this flow and then we will be able to login inside the application with the help of actual account created by users so stay tuned and that video will also be coming very soon if you enjoy this video please like share subscribe and comment down your favorite part and I will be happy to reply you and also you can do one thing you can share these videos with the people who are learning Android so they can also get benefit from this video and I will see you in the next video [Music] thank you

Channel: Native Mobile Bits

Views: 14,237

Keywords: AndroidAppDevelopment, LoginFlowTutorial, UIProgramming, AndroidUIUX, AppDevelopmentTutorial, AndroidDevelopmentTips, AndroidStudio, Compose, Jetpack compose android 2023, Login Screen Implementation using Jetpack Compose, Jetpack compose tutorials, Android tutorials for beginners

Id: n9IrkANVGxU

Length: 21min 37sec (1297 seconds)

Published: Fri May 12 2023