Master Jetpack Compose Fundamentals by Building a Login and Registration System- Step-by-Step

this video we're going to create this simple application here but we're going to learn a lot so we're going to see how we can use Jaa compos to create simple uis also we're going to learn how to manage a state and navigation from different screens so we're going to learn a lot throughout this project so if you're new to Jaa compost then this project is really for you so actually it takes a tremendous amount of time to create these tutorials so if you find helpful please don't forget to provide a like share And subscribe so let me know your thought in the comment section below so this is just the login page and it's just really simple so basically here we can just enter a username so for example here I'm just writing a username and also a password which we can use here to log to another page and for this case we can just click here then we're going to be navigated to our home screen and whenever we click here back we're going to create your application because we have already finished the flow from our login page so as you can see again we can just go to sign up page if we don't have and for this case we have this page here which we can use to sign up as you can see here we're just filling up our forms and now we have an option to sign up or we can just click here sign in to be navigated back to our signin page and basically we are back here to our signing page so guys without any further Ado let's get started so if you want to follow along with me you can just get the GitHub project stter code from the link provided in the description box below so the things which I have changed here is just the UI and basically inside here I have added colors so basically I'm using these three colors here inside my theme so as you can see I have changed several colors here and also inside our light color palette so you can just get it and also I have changed one thing which is just the status bar here so you can see we are changing this status bar to this background color so these are just basically the things which I have changed and another thing here is I have added one uh dependency here which is just compos navigation so you can just add them and also inside here our drawables I have added these three uh icons here so I have this GitHub icon and also we have this other so you can just easily get the startup project and we just good to go now let's set up our project here so that we can start create our code so the first case here we're going to insert one package inside our UI here basically inside our UI package let's create here a new package and we can call this for example the login and also here we can add another package and call this sign up and the last package here is the components which we're going to store our components if we're going to have okay so for this case let's create first our sign up page and for this case we can just create here a new quoting class of file and let's just call this sign up screen uh sorry login screen okay so let's create here new composable and basically we can just call this login screen and this is basically enough for us okay so let's look here at the thing which we're going to be building here so you can see we are using this login screen here and basically we can just split this to the right so that we can just see it okay let's keep it this aside so you can see here we're going to build this simple screen and basically what we have here is common things like a text field which we are going to be having here so we can create a component for this text field so that we can just reuse it throughout our package so for this case we you can just go here inside our component and create our login text field so let's create here a new coting class of file and basically we're going to select file here and we can just call this login text field okay now here let's create a new composable and we can call this so this component we're going to reuse it throughout our application okay so for this case let's use our outline text field as you have seen there we're using and outline the text field and there are several parameters which we have to pass inside here so the first case here is I want to pass in a modifier and we can give it a default modifier if we don't want to pass and this is just a best practice the second thing here is we have to create a value that is going to be of type of string and the on value change okay so on value change here is going to take up a string Lambda so we're going to have a Lambda function and we're going to see why okay so these are the bics parameters which we require for now we have to pass in here a modifier okay so here we have to pass in the required parameters so we have okay so here is our text field rendered and I think everything is looking perfectly so let's go to our login screen here okay so here inside our login screen we have our data and we want to create this UI so the first case which we want to do is to create the default variables so for example here we have our default cing which I'm going to give it a 16 DP and for this case I can use them to change another case here is default spacing or items spacing so we're going to give this atdp let's import this extension function so for this case here we can easily reuse this in order to uh make our UI consistent throughout okay so you can see here our data is arranged in a column format so for this case let's create here our column okay so one thing which I want to add here is this header text and as you can see we have this loging and basically you can create a separate composable inside here our component let's create a new coting class of file and select file and for a case here we are going to call this header text okay now let's create here our composable and we can call this header text and basically this TT in two parameters so the first parameter here is the text which is going to be of typ of string and the next case here is the modifier okay okay now let's create here normal text that's just simple and for case we can pass in here our text with the text that is going to be passed and another case I want to change here is the style and basically I want to change the typography so I can use here my material theme typography and I want to use display medium because this is going to be large and also I want to change the font weight so for this case we can change the font weight and make it bald and then lastly let's pass in here the modifier and we can hook up with our modifier okay so now we have here our header text let's navigate back to our login screen okay so let's call here our header text and basically we can pass in here our text composable so the first case is the text and this is just going to be the login okay so the next case here each I want to pass in here is the modifier okay so I want to give it a padding so I can pass in here modify padding and give it a padding vertically because you can see here horizontally we already added through our column so vertically I want to give it a padding of default padding so that I can create here a spacing between these two text composes as you can see here we have a little bit of a spacing so this one is going to do the trick review composable so that we can be previewing whenever we are writing our code so let's create here composable and call this preview logging screen and let's add here at preview annotation and inside here we want to show our system UI and make this to be true okay so here I want to call the theme which is just going to be generated by Android Studio when you create your program so this jet login theme and basically here I want to call our login screen so that we can see it okay now let's kick start here our preview so here we have our preview but the stying we are going to worry about it at the later time because right now we have something that is going on so here we have our screenshot and here we have our preview okay so for this case let's continue here adding so the next case here is to create this text field and basically this is just really easy for that case we have already created our login text field so let's call here our login text field okay so let's pass in here our parameters the first parameter is the value and their on value [Music] change also we can pass in here the label text and for case this is just going to be username and also we can pass in here the leading icon so for case we can use the icons composable so this Android X compose and we want to use the default and select a person as here inside our design is looking so everything is looking perfectly and pass in here a modifier then we're going to change this okay so now let's preview again and see this text composable that is going to be created okay so you can see here is our output but this is not taking up the whole WID so we are going to fix this another case here you can see everything is aligned at the center so I want to make this through the parent composable to make everything centered so that whenever we create here other items they are going to be added so for this case inside here our column composable I'm going to add one parameter here which is just the horizontal padding sorry horizontal alignment and by default here I can give this alignment center horizontally so this one is going to Center everything horizontally but whenever we do this then our login text is also going to be centered here so let's look here which is just going to be different from our design so our design our l Lo text is at the left see everything is centered so we want to make this loging text to go here so how can we do this basically let's go inside here let's add here another parameter and this parameter is called align and we can pass in here alignment to this child de composable in order to align it different from the rest of other composable so for this case I can call here alignment do start and this one is going to send it to the start okay and make here our composable take up the whole width so we can pass in here modify and give it fill Max width and this one is going to make the streak now let's revie again and see okay now our design is starting to take shape here okay one thing inside Android Studio you can start an interactive mode so when you H around here you can start an interactive mode and you can see now we are inside an interactive mode so we are expected inside the text field to be able to touch it or to insert things so you can see we have a CA but right now I'm typing here inside my keyboard but nothing is happening so why this because here we have passed in empty parameters and in JEA compos everything is stateless so we have to create a state in order to change this particular composable okay so we have to make a state and in jeer compos there different way which you can use to declare state so I have a dedicated video speaking about state so you can check in ja compos playlist okay so for this case we can create here a variable and I'm going to use this type of State declaration so for example here we have a username and we can specify also the set username and basically here what we want to do is to use a remember because when we have Rec composition then this variable is going to be lost if we don't use a remember so for example here when we use this remember it's going to keep this state whenever we Rec compose because JEA compose is going to call this function if the state is going to change so if this variable is directly going to be a variable and not using a remember then this variable is going to be reinitialized to a default value that is going to be bad for us so for this case here we have to use a mutable and this one is going to say hey this is just going to be a state and for case this is just a mutable state of an empty string okay so one thing which also I want to highlight here we're using a remember which is going to be remembered during recompositions now what if we have for example a orientation change basically this data is going to also be lost but we can use another remember this one is similar to remember but it's going to save it during these composition changes so for example if we have an orientation change then we can change it and now when you H around you can see this is just going to be a l function that takes up a string and then returns a unit that's what it's going to be take from here so as you can see inside a loging text we have a on value change that is just a string returning a unit so directly here we can use our uh username and let's look at the difference which we are going to have now so now everything is looking the same but visually so you can start an interactive mode because we did not end it so for this let's just click here and you can see now we have the cura but now when I type everything is appearing and this is because we have a state what we want to add also here is the sper between these two composable here and that is really easy we can use a sper composable that is going to render empty space and because we're using a column here we can pass in a modifier. heate and give it a set he so we can use here item spacing in order to keep this spacing here the next case is to create create also this password which is just a similar so what I can do here is press contr D in order to duplicate this and you can see we have the same okay so similarly here I can just press contr D to duplicate this to have uh another state so instead here of username we can have our password and here we can call this set password okay so ins here let's change this state and to be password and also here to use set password okay so on this here we are going to use a lock as you can see here we are using an icon that is a lock and give it the same another case which I want to change here is the keyboard type so for a case we can use keyboard type do password and also we can change our visual transformation so so here basically we can call password visual transformation so this visual transformation is just an object and you can easily create your own so we have this one with a composable that is actually going to mask this particular text and have an effect like this one here so let's preview and see the changes we have made now let's try to click here and because we are inside a interactive mode you can see now we have the effect as inside our design okay so let's continue to add other things so another thing you can see here we have this remember me and these are aligned inside a horizontal sequence format so for this case we can use a row composable to handle this so for this case let's create here a row composable and for this case we have to use a checkbox CU here we have a checkbox and we can create also its state because we have here the checked that is going going to be false and also we have the unchecked change which also is going to be a Lambda function so as you have seen here you Jaa compos we're using a lot of Lambda functions so also let's duplicate this PR control D here we can just change our state this to be checked and here we can just call this unchecked unchecked change or you can just call it set checked everything is going to work but the different part here is the mutable State instead of a string now we want this to be a Boolean and by default we know that whenever user is going to start here it's going to be not checked so we are going to pass in here false so inside here our checked instead of passing directly forse here so we can just pass in here this state so we can observe it and whenever we change here we can just call here our un checked change so we have our check box the first case then the next case here is we have this text here okay now let's create here our text this is just going to be a normal text and here we can just call remember me okay so you can see here we have our checkbox and also we have our text but you can see also here we have our password so we can add here another one by adding a specic or we can use something that is going to be really easy and let's just press crl X we cut this two text and add another row composable inside here and this row composable is going to give us this okay so we have two rows so this one is going to hold up between these two text here so this uh checkbox and also this remember text and the last case here is we have this here forgot password and we can use here this by using a text button that is going to be really easy and add here the on click which we can pass in here an empty Lambda parameter okay now now let's pass in here the text and this text is going to be forgot password and give it a question mark Or Not So we have here this two okay so now let's preview here and see the changes our text are just scrumbled so in order to make this fit perfectly here we can pass in here parameters inside our row composable so you can see inside this row which we have inside here checkbox and our text because this is happening because they're not allow aligned perfectly so for this case we have to pass in here the horizontal alignment and this is going to help us to arrange them to the center so we can just call here our Arrangement and also we can pass in here our vertical alignment and give it Center vertically so this one is going to help us to align them perfectly another case When You observe here you can see these are not touching here to the uh end and we can use this by using a modifier and also the horizontal Arrangement functionality here so inside here the parent composable that holds between these two child the text button and also the row composable here we can easily fix this by passing here the modifier and give it fill Marx width and the next case here we can pass in here the horizontal Arrangement and we want to space them between so that they can touch both ends so we can call here space between and this one is going to do us a trick okay okay now let's observe here the changes which are going to happen so now you can see here they aligned perfectly we have made a bit of progress so we have created this part so the next part is to add this button here okay so for this case we can just go below here and go below our row and below the low here I want to copy this let's press contrl C and copy the spacing and paste it here okay so let's create a button and give it the on click and give it a text here and call this login okay so now we have our button but this button is taking up the whole width so we can pass in here modifier and call do fill marks width and this one is going to do us a trick okay now let's review again okay so we have here our button and everything is looking as inside our design cre this composable here and you can see this composable is actually aligned to the bottom here so we're going to see a trick that we can EAS accommodate this so for this case I'm going to create a separate composable and create a new composable and let's call this which are going to be the options that we're going to have okay so the first case which I want to do is to make these three buttons here are going to be clickable so for this case I'm going to add the on icon click which is going to help us whenever this icon is going to be clicked so we can show a message and this is is just going to be of type int and this one is going to be unit another case here we have a button that is called sign up so we can just call this on sign up and this actually is going to return a unit not taking any parameter and the last case is to pass in here default modifier so these are the parameters which I'm going to require so the next case is I want to get these three icons here because they are inside our draw so when you go to our resource if you have the package uh from repository then you are going to get this icons here so these are icon uh resource so I can just call this icon list and use here a list and inside here now I can access all the drawable let's import our CR and I want to select the icon GitHub so let's start with Instagram then let's duplicate this three times so I can create here a column composable okay so the first case is to give the modifier and I want this to take up the whole width so we have to use our modifier because this is the parent composable okay so for this case I want to give it fill Max with another case I want to align everything Center so for this case I can just call vertical alignment and call this Arrangement do Center another case is for horizontal alignment and I want to align it to the center also so I have to call alignment do Center horizontally to make everything centered okay so we have here the text so we can just call here our text and this text here is going to re okay so I have the icon list so I can call here our icon list and use for each index so the great things about JEA compose you can use cotl functions here so we have the index and here I'm just going to call this icon rise [Music] ID and use the icon composable and for now we are going to pass in a painter because these are just inside our project so we can pass in here a painter resource and pass in here the icon res ID in order to get the resource so if we had the image Vector then we can use the image Vector uh modify software case and for Content description here for example we can just call this alternative so this is just for accessibility purposes and it's going to help people who cannot see well okay for this case we can pass in here the modifier okay so I want to size this I give it a size and the size is going to be 32 DP so this one is going to shrink it take this another case is I want to make everything clickable and inside here now I can call on icon click and whenever I click the icon I want to pass the index of that particular selected icon and also you can just call here do clip now another case I want to give it a little bit of a spacer and give a modifier. h I think here we have to call this alternative options inside here okay now we have here our on click let's now handle this by passing an empty Lambda let's pass in here a modifier because we have a default modifier let's leave it as it is for now and on sign up click okay so everything is going to look perfectly let's preview and see the changes we have made text is rendered here and as you can see these are rendered horizontal uh vertically and not horizontally so we can easily fix this let's just go inside here and instead of these icons here we can just press contrl X to cut this and now one thing we can add here a row arrow composable and inside here let's give it a horizontal Arrangement and we want to space everything evenly so we can pass in here the arrangement and we can press contrl V to paste back this now let's review again and see the changes now we have everything looking perfectly but one thing which we want to do is to move this text to move from here and go down below here and right now here we have to use use the same technique which we use to align this and it's going to be somehow different but similar so for this case I'm going to pass in here a modifier and what we want to do is to use fill Mark size so it's going to take up the whole size but there is one composable that is called wrap content size which is going to wrap it to the content size which it has and for this case we can pass in here the alignment that is going to give us the freedom to align it whenever we want so for our case we are just going to give it alignment do bottom center this one is going to take it to the bottom to align it so now let's review again and see the changes okay now you can see here our text are lined below and everything is looking perfectly okay so the only thing which you can see here we don't have spacing between these items and I have observed that we kept this out outside this for each index so for this case we can press contrl X and inside here this for each index actually we have here and we kept this but with a he and instead this is just inside a row so we have to use a width instead of heit so we can call here width now let's review again okay so now you can see there is a space added between these two items here and it's looking perfectly now everything is looking perfectly so one thing which you want to do is whenever we click something like this to show a toast message because when we have this inside the real world we are going to perform a network request in order to login a user and basically we have used this on click here and passed in the index so we can identify which one we have clicked so let's just go inside here alternative and when you look here you can see we have an integer that is going to be passed here we can rename this to index that is going to be the index that is going to be passed past so for this case here we can use a way statement and use the index actually whenever this is going to be clicked then we have the index so if the index is going to be zero then we know this the user clicked the Instagram logo and call current in order to obtain the current context and call here our toast message and actually pass in here the context and here it's going to be for example let's press contrl C to copy this and here it's going to be GitHub and lastly here is going to be Google so we're going to see this okay so when we preview this inside here this is not going to show us a toast message so we can easily go so if you have a preview function and you can see we have this icon here so this one is going to let you run this through an emulator or an Android phone if you have a physical phone so I have connected here a physical phone so I'm going to click this and run it now preview is actually running and you can see we have installed it successfully so in order to view it with Android Studio head H home you can easily just click here running device let's go to our device manager sorry so when you go here through the device manager you can see here the devices which you have so I have connected this one so you can see we have this start mirroring and this one is going to mirror the device directly here so this is just my phone actually and you can see I'm not typing anything but I'm just touching through my phone here and you can see it's launching so this one is just a great feature in order to visualize yourself so for this case you can see here we are typing and also here and everything is working perfectly so what we wanted to test is this one here so you can see now Instagram login click and here GitHub and also Google login so everything is working perfectly but only the theme Here is not working accordingly because we have not changed our color here so for this case if you go directly to our main activity let's go to our main activity and test this so inside here we had the greeting so you can see this surface here is going to change up the color and we are using here a background color scheme so for this case we can just remove this and call here our login screen directly okay so when you want to run this now you can see inside here we have our preview login screen so you can just change this to the configuration that which we want we can see we have all configurations and here we have app so you have to select this app in order to run this configuration so for this case I can just click here run now and everything is going to run otherwise it's going to run that preview which we had inside here our login screen so we can see we had this preview we can see our device is actually running through our phone and you can see everything now is looking perfectly according to our design and everything is okay okay so I think our login screen is almost complete so the next case here is to create the second screen and that is just going to be the sign up page so let's create here a new cating class of file and actually select a file and call this sign up page let's create a new composable and we can just call this sign up so here is our sign up page and as you can see it's looking like like this so we can just follow along so let's create here a column and this is just going to be similar to what we had inside our login screen so basically I can just go inside your login screen let's go to top and copy this so the next case here is to create this text here and you can see this is just similar to login screen so what I'm going to do is go to login screen and press contrl C press contrl e and and we can press enter to return back to where we were and here we can just PR in here our header text and this is going to be out to imported so instead here we can just call sign up and the layout is similar to what we had inside our login screen okay so the next case here we have a bunch of text fields and this is just also similar to what we had so we can press CR e and go to our login screen let's just just copy this press crl C press CR e again and go back to our sign up page and paste it here the only difference here we are going to change this because here we have our first name and also we have to create our state so we can easily just go above here and create our state so for example here we have our username sorry this is not username it is first name and we can use remember savable and we want to use a mutable this is just going to be a mutable state of string and here now we can just change to our first name and here we can just call on first name change and this one is going to work perfectly so I'm going to do the similar process to other items here okay so we are going to do the similar process for all other this so I'm going just to add this state here so as you can see we have the last name email password confirm password and also agree which is just going to be this checkbox here and basically below here we can add other text Fields okay so I'm just going to paste this because I already added here okay so what I have added is just this first name then we have here AA and basically I can just import this and it's going to be imported so we have added a sper with default padding so we have added for last name email password and the confirm password and basically here you can add visual transformation but because this user want to confirm their password so you can just leave as it is or you can just transform it so for example here on the password we can change the keyboard type and give it keyboard type password so let's press contrl C and actually we can duplicate get it here also and press contrl V now let's create a preview function and see let's create here a new composable and here basically we have to add that preview composable and show system UI make it to be true so here is our preview and I think everything is looking according to our design but only one thing is just this first name here we have to change as you can see we have this icon here so inside our first name when you click here actually it's going to navigate you to this place here so what I want to do is to remove this icon here so I can just press contrl X and basically that is going to remove that icon here so everything is going to remain similar so the next case is to create this one here so I'm going to show you a different way because inside the login screen we actually created similar screen so when you go here below we created this by using a row composable and this actually is a valid way but also we have another way which is by using spans so let me show you these two ways which you can pick yourself the favorite which you want and here basically let's create a row and this row is going to create us this checkbox and also this text so for this case let's create here our check box and for our checked here we can pass in agree and the on agree change okay so the next case here is to create this text we can create a row and use a text button which is just going to be a valid way or we can use a single text that is called an annotated text and this one is also a good one so for example here we can create our text so we have our privacy text so let's call this priv text and instead of privacy here we can just call our policy so the next case here is to build annotated text so let's create here a liter room and create annotated text and we can use build annotated string okay so here we are going to use annotated string and for this case we can use with this style so with this style here we're going to you pass in the style which we want so for example here we can pass in the span style and basically we can change different things so for our case we're just going to change here the color and this color we are going to use material theme do color scheme and use on background so with this we are going to use here a clickable text in order to make that clickability Avail available so if not then this text here if we don't change using this on background then you can see we have here a dark background and this text here is going to be rendered black so for this case we have also to change this span here by using this on background because this is just automatically figuring out if it's on a dark background then it's going to show something that is going to be visible otherwise it's just going to render a black text so for this case we have to change this also now what we can do we can call here a pend and for example here I call I agree okay so we append this first text then we can append here the spaces which we have so by rendering a space we can just append an empty string by inserting here a space okay so the next case here is let's just copy this press contrl C and paste it here now we want to pass in here the Privacy so let's just remove this first and instead here of color scheme on background we want to use the pr AR color because here we are using this privacy so we can just use here primary color to change this and for this case we want to put to push this string so that it's going to be clickable when we want to observe it so for this case we can pass in here a tag and The annotation string so the tag here which is just going to be the Privacy text and also the text which we want to push actually is just the privac text so just with me this is just going to be really easy and what we want to do is to append so this one is going to create a tag and here we are going to append the actual text so for this case we can just call here our privacy text and this one is going to work as expected so the next case let's just copy this and append it here now we can just add a little bit of space between so we have here space and here space and added here an end now we have our po policy so we can easily now change instead of privacy text now we can just call here our policy text and also here our policy text now let's upend also our policy text so this one is going to render the text here now here we have our annotated string so previously we used when we want to render a text we used a text composable and actually pass it there so this one is also applicable but we can use directly here a click text so for our case then we can pass in here the annotated text so let's pass in here annotated string and pass in here the clickable the on click or we can directly because this is just the last parameter we can just open up here so you can see here we have the offset which is just each particular index of that item so let's just call this offset so inside here our offset now we can just call our annotated string and what we want to do is to get the string annotations and here we have to pass in from where to start and where to end so for a case we can just pass in here offset and offset in order to get it so this is just as a list as you can see it's returning a list of annotated string so we can use here a for each index so let's use for each index sorry we can just use here for each no need for the index okay so we have here the annotated string so we can check here when which particular tag is going to be clicked so we can use here A Way statement and call it tag now we can change here our privacy text if our privacy text then it's going to be clicked so for this case we can show a toast message so let's write here a toast okay so we required to pass in here the context so let's just go above here and create a context and also here we can check our policy text let's show a tost message and instead now of privacy so here we can say policy which can be used to navigate from this one screen to another screen so you can see here we have pushed the tag here inside our annotated string when we use this push string annotation we added a tag which is the tag here that is the Privacy text and also here the policy text so we are going to use that tag by using this annotation here string. tag and also check if this is going to be clicked then we show a toest message and also here show a toest message accordingly you can see here we have our text and is actually available here but one thing you can see they are not aligned perfectly so we can use here our alignment functionality in order to align them to the center so we can just go here because we have a row so we can pass in here the horizontal Arrangement and we want to arrange them to the center so we can call Arrangement and also the vertical alignment we can pass vertical alignment and Center it vertically so everything is going to be centered okay so we have completed this part with the text so the next part is to deal with this and here we have our signup page and also our account here so that is really easy so we can just let's go below here let's just collapse everything here so we have our row and the row is collapsed okay so now here we can add a little bit of a space between these two items so let's just press crl C and paste it here and you can see this space is a little bit bigger between these items and here so we have our default padding so basically here we can just use and add other padding so we can call here hdp because this is just the variable and we can import the extension function here now we have our spacing that is a little bit bigger now similarly we can just call here our button pass in here the on click the next case here also is to give it a modifier and now we have our button so lastly we can just create here let's press contrl C and add a little bit of a spacer here so we can use here arow to do the similar process or we can use the spannable text so also I'm going to use a spannable text so for this case I'm just going to call this signin text and basically call this sign in now let's create here our sign in annotation and call here our build annotation and basically now we can just build this so we can create here with this style and pass in here our SP style and change the color so use here a material theme and use the own background for now so you can change different things here on this spannable text so for case we have here uh let's add here an append text and all here already have an account then we can append another text which is just the space which we have so basically you can see here we have two spacing so we can just add another space now let's call with this style again and pass in here this pable style and for color now we can use our material theme do color now we can use our primary color okay so inside here we can call push string annotation and for the tag part we are going to pass in here the signing text and also signing text to be rendered okay and here we can append now so this one is going to push and not render it so to render this we can just call sign in text and similarly here let's create a pickable text so let's just call here clickable text and here we can just pass in the sign in annotation okay so for this case let's just go outside here so we have here our signning annotation so we can just call Here sign in annotation and the last part here is we have our offset similarly we can use here assign in annotation and call get annotations and we can pass in here offset comma offset now here we have to check if it do tag because we have only a single tag so we can just check here our sign in text then we can show just a toast message here so let's create here a toast message and here we can pass in the context okay so we have done similar process as we have in the previous section okay now let's preview and see the changes we have made okay now here actually our data is rendered and you can see we have here our text and everything is looking perfectly so now let's try to click here you can see sign in text clicked policy text clicked and Here sign in text clicked and we can try to run this through our application directly so we have to go to our main activ AC it and since here we are just rendering a single screen we don't have navigation yet so we're going to see how we can insert navigation so for this case let's just call here our sign up page in order to view it actually so we can call here our sign up screen and before we run it because we're just going to run our preview so we have to select app then rerun it okay now this is just relearned and you can see everything is looking according to our design designed so we have here everything let's try to type here for example everything is actually working okay so I have just typed a bunch of items here now you can see our data is actually out of the scope and we cannot even scroll here so I don't have the button so we have to add the scroll ability so you can use a lazy column to fix this issue but because we don't have the advantages of lazy column so we can use a state in order to add scroll ability on this particular page and this just makes sense and then I'm going to show you how you can add the scroll ability to this page so let's navigate back to our sign up page and see so in order to add that scroll ability so we can just come inside here our modify and basically add a vertical scroll and here we have to pass in a state and we have a member scroll state which is just sufficient to make this scrollable and you have to use this if you want you have only small screens that are rendered and don't affect performance but if you have a large list then you can use lzy column but for a case we just using this vertical scroll because we don't have many items to render and they are actually rendered uh on one time or on one go okay now let's try to rerun again okay so it's launched now we can just go inside here and you can see now it's actually running here let's try just to rotate our device because this one is going to make us our screen smaller now let's try you can see we can easily scroll to the bottom and also scroll to the top so now we can just return back to our normal State and even if here we type a bunch of characters okay so we have made our text field really big and you can see now we can easily scroll back to the bottom so we have all of our screens but now we don't have the navigation mechanism that we can use to navigate and also I want to add other three screens that are going to help us to learn what is navigation in japac compos and how we can handle the navigation properly so inside here our sign up page I'm can to create the privacy screen and also uh the policy screen so let's create here a new coding class of file and also let's create another class here and let's call this uh okay so let's create here a new composable and here we can just call this privacy screen okay so here I'm going to use a box box composable this one is going to help us so we can pass in here a modifier and we want to fill the max size another case here is to provide the content alignment so we can just align it to the center okay so a box it's just a similar and then we are going to have this text here so one thing which I have is just the text that shows us the privacy screen and also the button which is just going to be finish so we have to pass in here the call back on button click and this is going to return us a unit and this is basically for navigation purposes so we have this privacy screen so we can just press contrl C and go to our policy screen and paste it here so instead of privacy so we can just call here our policy screen and here is just going to be our policy screen so here we want to demonstrate how we can use navigation to navigate between a login flow and different things that is going to simulate in a real world application okay so the last screen which I want to add is the homepage so when we finish up everything I can add here inside our UI let's create a new hting class of file let's call this home screen okay so instead of privacy I'm just going to call this home screen and we don't want any call back here because we're going to be navigated directly to the home screen so let's change this and basically we don't require this column now because we have only a single composable here okay so we have here our home screen now we can deal with the navigation part so for this case let's just go outside here and create a new cting class of file let's call this navigation okay so we can create here new composable and let's call this my navigation and one parameter which we are required to do here is to create the navigation host so the navigation host is a composable that is going to help us to decide what screen to show at that particular destination so we should have a state that is going to help us to observe between these different screens and that in JEA compose is called the navigation route so for this case we can just call here our nav poost controller this one is going to help us to control the navigation between different parts of our our composes so for this case we can create our navigation host which is just the navigation composable that is going to host the graph so we should create a graph and this requires two parameters so the navigation controller and also the start destination so this are the two parameters which are required and the third parameter is the navigation graph so basically the list of composes which we want to navigate from one screen to another screens which we going to see so these basically are the required parameters so the nav host controller we already have so we can just pass in here directly then have host controller and the start destination which we have to Define here and in order to Define this destination they can be a string and in order to manage them you can create a way which you can remember them by creating constants so there are different ways in cotl to create constants but a clean way is by using a seal class so for example here we can create a SE class and call this route okay so here we can Define the data classes which we have so for example here we have our login screen be our first route and here now you can pass in parameters so this is just a simple navigation without passing parameters so if you want to learn more about navigation I have a complete navigation uh tutorial inside my playlist so this one we're just going to call it login screen and this is going to inherit from the route okay so I'm going to duplicate this and create other screens so we have here our login screen the next class we have the sign up screen okay so this our route and we can use them as our start destination so for example here inside the start destination so we can use here our navigation uh sorry our route and call our login screen but name so basically here we getting the name directly here to be our start destination now we have to define the composes or the graph in order to map between these routes and the particular composable screen and that is by calling here a composable and this takes in two parameters that is the route and also the particular composable so here for route we can just call this route and basically now we have our login screen for example so we can call here r as our composes so if you have for example arguments they can be passed here in a separate parameters so for case we are not going to deal with that okay now we can press contrl C and paste this several times because we have six screens here okay so instead of login screen here we can just go to our sign up page and directly here we can just add a Lambda which is just the on button click and here basically we have our home screen and basically we can just call here our home screen okay so we have all of our screen defined inside here our navigation host so this is just our navigation graph now so whenever we tell our navigation controller that hey we want to go to our signup screen then it can use this route to map together with this screen and display this particular composable but right now here we when we run our application so let's just go directly to our main activity and instead we are calling here our sign up a screen directly but first we have to get the navigation route so we have to call our navigation nav uh controller remember nav controller so we have our nav controller as a state now we can call here my nav my navigation and basically we have to pass in here the nav controller and we are hoisting the state because we can use this nav controller uh beside here to control navigation differently rather than keeping it inside my navigation so this is just a concept in JEA compos to hoist State up to the composable color okay so we are inside here now my navigation so when we try to run our application basically we are going just to have only our login screen because we don't have any mechanism to navigate from one screen to another screen so in order to do this we have to hook up inside a login screen for example here as you can see we had this click ability but we didn't have anything that is going to be invoked here so we can just uh pass in the event back to the composable caller in order to manage this so you should not pass here a for example you could pass here the nav controller so and then use this nav controller to navigate but this is not advised so we have to pass in here the events which are going to be called inside my navigation in order to navigate from one screen to another screen okay so for example inside here login screen we can have for example the on login click which is going to return us with the unit and also on sign up click which we can use so if the user clicks the button then we can log in so let's just go below here so here we have our login so we can just call here our own login click and pass the event back to be handled there now here if you had for navigation to different places then you could pass in here for example on icon click and handle it inside your my navigation so for case we are not going to be navigating to these screens here because it's just a demonstration purposes now we have here the on signup which we want to navigate to the on sign up page so for this case we can just call on sign up click and pass in the reference directly so here now our login screen is going to have this and we're going to get some errors because we have here our preview so we can pass in here Mt Lambda composable because this is just for preview purposes then we're going to handle this later so now if we go back to our navigation so let's go to our navigation you can see our login screen is getting some error so here we can pass in the on login click and handle here our login and on sign up click and handle the sign up so for example here inside our login we can use our navigation host navigation host controller and call do navigate in order to navigate to a specific destination now here we can just call our route do home screen name so this one is going to navigate us there because we are already clicking here so you could have here for example to perform uh validation request and send this data to the server so basically before you navigate here you could call a view model for example that communicates to the back end so for case we don't have the back end so we just going to call this navigation to navigate to our home screen and inside here the on sign up click now we want to navigate to the signup page so what we can do let's just copy this press contrl + C and paste it here so instead of home screen here now we can just call our signups sign up screen so when we call this this navigate here is going to link to this particular uh route name and then it's going to render this part particular screen so that's how DEA composable navigation works and we are going to see here there are some problems which are going to arise and we're going to fix them so for now let's go to our sign up page so inside our sign up page here we can add several parameters that we're going to require so the first case is on sign up click so this is when we want to sign up and navigate back to and also another case here is the UN login click so so here is we want to navigate back hey I have already an account so navigate me back to the login screen basically we can navigate there or for example a user wants to go to the policy so we can create here a policy and lastly here is their own privacy click or if they want to go to the Privacy Screen so here you could open for example a website or if you are rendering it inside your app then you can just still use this simp architecture which we are using here okay so now we can just go back here okay so you can see inside here our clickable text modifier we have here our clickability which we used here inside the on click so we want besides showing just a toast we can call here now our privacy so for example here on privacy click and basically now we have to invoke it because we are not passing the reference so you have to invoke it here Let's uh okay come here also instead of just calling on policy the next case is whenever we click this on sign up button and basically here we can just call on sign up so here we are passing the reference we don't require to to invoke it here because this is going to be invoked outside of here okay so the next case here is the clickability which we had inside our sign in so here we show the toast only signing in to go so for this case we want to navigate back to our login screen so basically here we can just call Here sign in we can call this on login click which is going to send us back to our login screen okay now we are having here error so we can just add here empty Lambda parameters because all of these are just lambdas and everything is going to work as uh before now let's just go back to our login screen sorry we go to our navigation screen and here inside our sign up we have some errors okay so we can use this click abos in order to navigate from one screen to another screen so similarly here we can just press crl + C and copy this and paste it here now we have our navigation controller so we want to navigate now because the user is already signed up so we want to navigate them back for example to our home screen so for this case we can directly go to the home screen whenever we click this button and when we click on login so we can just go to our login screen so instead here we can just go to login screen and this one is going to send us there another case here is when we click on privacy so we can just go to the privacy screen and whenever we click policy we can just navigate to the policy screen and now we have it so inside our policy screen here when we click finish we want to do one thing that is to navigate back and instead of navigating using the route we can just call. navigate app which is going to send up back to the composable that is back in the navigation stack so if this is going to be the sign up screen that we go there and this is just as simple so we can just press contrl C and also inside the Privacy Screen we can do that also now I think everything is looking perfectly let's try to run here and see there are some issues which are going to arise and we're going to fix them so let's run it here okay so now our app is launched as you can see here because we set here our start destination to be the log Lo screen directly here the navigation has set us here okay now let's try to write here for example hoot and pass in here the password everything is working fine now we can do one thing is click here for example go to sign up page and when we click this sign up page here we are navigating here and as you can see right now let's click here privacy we are going to PR versus screen when you click this back we're navigating back and everything is looking perfectly okay so we are navigating to our home screen so one thing which I want to do is whenever we reach here the home screen we cannot send the user back to the navigation flow because this is going to be out of sync so now you can see we are going back to the sign up page so this is not ideal and here the sign up page when we click this we are going back to our login screen now let's click here inside our login screen screen and click login we going to the home screen now when we click here back button you can see we are navigating back to the login screen so this is not ideal in a real world application so you have to manage this and we're going to manage this in a simple and cleaner way okay so before we manage this loging and logging issues you can see here I want when this text builds are going to be empty I want also this sign up page here or button to be disabled until we fill out all of this because right now you can see there is nothing that is selected and basically we don't have control over anything so we are going to send weird things to our server if we do actually like this so we have to fix this first so we can just go for example inside our lockin screen so let's do first inside our lockin screen and fix this so if these are not going to be empty then we can allow the user to send it so this one to be checked is not necessary because the user is not required to set this so for that case we have to go back to the button here so inside the button you have to pass in here for example enabled so this is just a Boolean variable and we can check here is is Fields empty and if this is going to be true then this one is going to be disabled and if this is going to be false basically it's going to be uh not disabled so for that case we check here if our field is going to be empty another case inside here our sign up page what I want to do is compare between these two password Here let me show you because here we have the password and also the confir password so this is just going to be a simple way to show that between these two passwords if they are actually together so for this case we can check here Val and as you can see I'm not using remember State because these variables actually depend on a state so they're going to change according to the state that is available that's why I'm not using remember and mutable state for these variables okay now we want to compare between the passwords so in order to compare this we can check is password same and this by default we can use here a byy delicate method and call this remember and by default here we have to use a mutable state of force okay so I want to use this VAR so I'm going to use a different way of declaring a state so this one is going to give us the availability on how we can change it so I'm using using here a buy delicate method in order to use this as the variable so you can see when you press contrl Q this is just a Boolean and not directly a mutable state so if you use here an equal sign you have to use his password. value so inside here button whenever we click this so let's just press contrl X let's invoke it here okay so before we can compare here we can compare here is password s and what we can do is use our password now we can use here an if a statement so if not is the password the same then we want to sign up actually so right now we have to invoke this here we are supposed to use confirm password and not password and password okay so these errors are going to go away so as you can see here now we are comparing between this so if this is not going to be the same then we don't want to log in here and what actually we want to do is to show an error so we can just go above here so above our column and for example above our text field Here sign up we can create an if an for example you can use an if statement or you can use this composable that is called animated visibility so here basically we can pass in a Boolean function so we can check here is password the same so if the password are not the same then it's going to show up this text okay so the last thing which we can use to manage here is the fields so this one is going to look if is fields and basically here we can use similarly as how we did so for example we can use here first name okay so these are just our Fields so you can see we checking this if this is going to be empty then it's going to return us with the buan value so what we can do is directly go to and also here beside adding this modifier here we can just add enabled and right now here let's try to rerun again and see the difference which we have made so you can see now our button is actually grade out this means we cannot click it and this is the grid part you have to make first validation from the client side and basically when you have for example uh a server then you have to do this on the server side also to validate the data which is sent from the client so for example here I'm typing but the button is still not yet turning now let me type here you can see everything now is looking perfectly now we can click just login and this one is going to take us to the login screen let's go to our sign up page let's click agree you can see sign up page here now when I click sign up here it's not going to navigate us and show us an error here so you can see password is not matching so if we have to make it matching so we have to change this password here now you'll see the error is going to go away and we're navigating back to our home screen okay now let's fix the problem with navigations okay so one thing here I want to create a simple function extension function so let's create this and basically here I want to receive a route that is going to be of typ of string okay so inside here I'm going to use the navigate in order to navigate to the this particular route which we have but here I'm going to open up the navigation option Builder so inside here I can pop up too so this method here is going to help me to pop up so currently when you see here let's navigate here we're navigating back here so let me click here and click here again to sign up page so I'm navigating multiple times from these different screens and you'll see one problem which is arising here let's click back we are navigating back to login screen again when we click back we are going to sign up page we're not quitting our application then going back to loging page because there is multiple backstack of this particular screen inside there so it's going in a sequence order and returning until everything is not inside the backstack then it can quit the application so what we are doing here using this popup to so we want to remove everything inside that particular particular back stack and remain until that position so for this case I'm going to use here a graph so this graph is going to give me the list and what I want to do is to find the start destination so this one is going to give me the start destination and receive the ID and when I receive the ID now I can pop up everything and this is going to work smoothly now one thing which I want to do here is to save the state and make this to be true if it's going to be available then the next case here I want to call launch Singo so this one is going to launch only one instance of that particular back stack inside our our back stack so for example if we have a home screen then we are going to have only one instance of it inside our back stack so if there is anything else then it's going to be removed so I'm going to make it be true and because here we have saved the state I can restore this State here and make it also to be true okay so we have this navigate to single toop which is going to help us tremendously so when we want to navigate from one screen to another screen then we can basically use this navigate to single top so for example when we navigate here inside our own sign up page okay so for this case when we are inside here there we can just create here navigate to single toop so I'm not going to use here navigate to single top and I'm going to explain why and inside here our sign up screen I'm going to use navigate single top so for example inside here also I'm going to create navigate to single top and here basically we can just call navigate to single toop okay so I have used these two as the navigate to single toop and also here on sign up we have used a single top then I'm going to rerun again now let me click this multiple times here okay now let's click this back you can see we are here inside the login screen so last time we navigated back to our signup page now let's click here you can see we are quitting our application directly so this is really crucial because now we have fixed one problem okay so another thing here you can see our composer are still in a messy because here we have different routes this is just the login screen for example and also here we have our home screen so this navigation here is like I'm creating a new navigation graph and basically differentiating between different types of navigations so I have this whole contained inside the navigation flow so this requires us to pass in here the start destination and also the route so basically here I'm using nested navigation in jepa compos so the first parameter is the start destination and here I can pass in the composes so what we can do is defining here the start destination and the start destination here is going to be our login screen so we're going to change this now let's press contrl X and pass in here our start destination now this also can contain its route so these are going to be the two composes inside your navigation host so now I can reference these composes from here so I don't want to reference for example here directly going to this composable so we can Define this by calling it for example login flow so if we had also other multiple composes that are related to home feature then I can create a navigation that is directly related there so now you can see I have full composes that are related to our login feature so I have all the screens and now I can just use this as our navigation graph for our login screen now to start our start destination because now our composes is inside this navigation instead of calling the login as our start destination from our navigation host I can just call this login flow here so I have a complete video that goes in depth about nested navigation so you can check it inside my playlist or inside the card here so here I'm going to pass in the login flow to be our start destination because we are referencing now here so when we reach here this is going to map directly to this it start destination to be this one here okay so basically here I didn't use navigate to single top what I want to do is when we navigate to our home screen I want to quit the application entirely so for this case I'm going to customize this navigate to home screen directly and remove everything inside our back stack so when I reach the home screen then I'll I'll quit the application so here what I will do is call popup to and pass in the [Music] route so what I want to do is to use this login flow here as the route so I'll remove everything from the login flow if is available and basically pop up everything and this one is going to help me to quit out of application and because we're going to quit application no need to save the state or restore the state because we're going to recreate our application entirely so also here inside our privacy I can just call launch single toop and make it to be true and I can do similarly to our privacy so let's press contrl C and inside our policy screen also I want to Launch single top so everything is going to remain the same now let's try to run it and see if this is going to help us now our app is launched let's type here and also let's type 1 2 3 4 5 6 let's click login now we are in the home screen so we are supposed when we click this back button we quit the application let's see if the changes actually helped that now we are quitting the application and before we navigated back so we don't want when they user is in the home screen to be navigated back to the login screen and otherwise else now let's try to our home screen okay now we are inside the home screen so let's try to click here back is actually navigating us to our login screen which is just the start destination of our application and when we click here we're just going to quate our application so now we are inside here so I think when we navigate from our sign up page we should quit entirely so I know how to fix this and basically okay so we inside here the home screen so when I click here it's looking for the start destination of this particular login flow and as you can see here our start destination of our host is just the login flow so basically it's popping up everything inside our back stack except this login screen so that's why when I click here back button it's taking us to the login screen so what we can do here when we are navigating from our on sign up page so instead of using navigate to single toop can just call here navigate then inside here we can just pop up everything as how we did until our okay now let's go to our sign up page okay now let's navigate to our home screen now let's try to click here back button you can see that we are going to quit our application directly here so this is how you handle your navigation inside J compose it's just really easy so guys let's leave it here for this video so if you find this helpful please don't forget to provide a like And subscribe for more videos so bye-bye for now see you in the next video

Channel: HoodLab

Views: 1,476

Keywords: login screen, jetpack compose, android studio, android studio tutorial

Id: OlO58LDfN14

Length: 86min 13sec (5173 seconds)

Published: Tue Dec 26 2023