Building a Complete Login Registration Flow in Jetpack Compose | Step-by-Step Tutorial

foreign [Music] [Music] this is the brand new project which I have created I have just selected one compose activity and one thing to note here is if you are coming from XML background that compose activity extend component activity and this is the entry point set content this is a composable function and inside this we will add the main composable or main application so if you just go to the Declaration you will find the parent composition reference that means entire layout part or entire application screens part we need to declare here okay so let's start so we will just declare one package app inside this we can choose one Cortland file and let's say we are calling it as post office app okay this is because we are in progress to make our messenger app but in mid we are learning about jetpack compose so I am naming the project here as well Post Office application we can create one function here post office app and this will be a composable inside this we can Define one surface surface is basically a container we can Define one modifier here dot fill Max size okay so that it will just cover the entire space we are also going to add one color and let's say we add color dot white now this composable will be the entry point and parent composable for our application so we are going to take this and we are going to add this inside content okay so as we know that whenever we will come to this activity this site content composition will be started and here our entry point will be this post office app composable this will contain all of the screen's entry point and much more things but before that we need few screens right so to create screens let's create one new package screens okay and we are going to create few composables here so we are going to choose one file let's say sign up screen okay this will be one function again and this will be one composable function okay sign up screen so we have our signup screen composable function inside this we will Design the UI part for our signup screen this is our signup screen and it has few things it has few text field and then one button and few text so we can see that these text can be used as a common text composable so we can create few composable few component first before we start designing our composable right so for that we'll create one package composables or let's say components okay and inside this we will create some UI components which can be used across our project so we are going to create one file and we'll say components or let's say app components we'll create one file okay and inside this first composable we are going to create is one text okay so we are going to create one composable function for that and we will call it as normal text component okay we can name it as we like but we are going to call it as normal text component and as we can see that our text component is just having one black color and it can be used in both of these screens here and here right and if you reduce the size also little bit we can use somewhere at the bottom as well right so let's try to create this composable so this will be a text component so we are going to use text composable okay we'll pass the value directly to this component so we are going to add one parameter and we'll use this here in place of text now we need to modify this text little bit it should be full screen width or height should be minimum so we can add those things with the help of modifier okay so let's say we are going to add one modifier this is coming out of compose UI modifier and this will be fill Max width okay we are going to use height in so this is kind of wrap content you can think it like that so we are going to specify some minimum height okay so let's say we are specifying 80 DP so this will be kind of minimum height for this text View but if the content is getting out of the range from this height it will expand okay so this is kind of brap content you can say but we are specifying that tag should have minimum 80 DB as height okay now we can specify some text Style okay so we are going to use style and it will be of text style inside this we can specify some font style and font weight kind of thing so we are going to use font size first of all so let's say our font size is 18 SP and we are going to use one font weight which will be kind of normal we are going to use but let's see our screen so yeah this is kind of normal so we are going to use phone weight normal okay then we are going to use one font style also this is kind of normal again but we can change this later on based on our requirement we italic as well okay we can set some Shadow but do we have any Shadow we don't have as of now so this is one basic text we can check this text with the help of sign up screen but before that we need to add one surface okay and we are going to specify again white color here as the parent background color will also specify one modifier and this will be again fill Max size so that it can cover entire screen and we are going to add one preview for this screen as well it will be again one composable function default preview of sign up screen okay inside this preview we are going to add our signup screen basically okay and we have our preview in the right side so now let's say inside our surface we are going to use this composable so now you can see that we are defining components or composable independently inside this file and later on wherever we want to use we can use okay so we are going to use inside this sign up screen and we have one here there this is the text we are going to use so let's say we Define one string in a string file so the first one will be hello and this is having text as here there okay we can use this string with the help of string resource and we can pass the ID okay like this we can add okay so our text is coming up so that we can be assured that our text component is working fine little bit so I have the figma opened with me so we can check out all the design attributes here so this text is having size of 24 SP and this is the color I have exported all of these colors here in colors.xml so we have these color text primary secondary and so on so we are going to use these now we can come back to our text composable we can update the color here okay so we are going to use this text color okay it will be imported from our theme which we have here inside UI to theme I have created one color file color.kt and we have defined all of the colors which we have inside our color dot XML okay like this so instead of defining it here and using it from this colors.kt we could also use this directly with the help of this color resource okay and we could pass r dot color dot and we could use this color which is color text okay like this so this will also work the same all right so we can use any way which we want but let's keep it like this for now so now if we just go back to sign up screen this text should have this color now we are going to give some padding which we can find out from our figma so let's say we are trying to use one padding here inside our sign up screen so we can add one padding with the help of modifier and let's say we add 28 DP for all sides okay so it should reflect you notice this the moment we add padding here the color is coming after that padding right so for that what we can do is we can just come to our modifier we can add one background here we can take this color and add inside background we can remove it from here and then we can see that our entire layout is having this color white and then we have the padding as well okay now if you notice our layout this tag should be in Center like if we use this text here or at the bottom everywhere this is centered align right so you can just go back to our text we can add text align and then text align Dot Center okay now if we just look at our design we can see that we have this heading text okay so the difference are only two if we just check in figma we can see that it is Bold and the text size is increased to 30. ok so we have two option now either we can pass this text size and this style inside this as a parameter or we could create one brand new composable for this so I am going to show you both of these way first and easiest ways we create one new component and we call that component as heading text component okay we just update this to 30 and we make it phone weight as bold okay and then if we just try to use this inside sign up screen okay we are going to pass text as create an account so we are going to Define one string for this create account and we are going to use this string okay another string we have is welcome back okay case and strip fine so we have this string now we can Define with the help of a string resource r dot string dot create account ok but if we see we have some invalid input kind of thing that's because we have one parent container now we need one View group to arrange our children in one given order right so as we have all of the items inside this vertical fashion we can use one column composable okay like this and we can just specify one modifier modifier dot fill Max size and that's it and we can just take these children's and add inside our column composable okay so like this we have our surface then we have one parent column composable and inside this we have these two children okay now you can see that once we added one column composable so both of our texts are showing up but if we see the layout there is not so much height and difference between these two texts so if we just go to figma and check is there any specific height given for this so minimum height I think they are using 40 DB so we are going to use the same for our normal text let's say for DDP okay and for this we don't give any height okay so one another thing to note here is this text is having 24 as the size and this one is having 30 okay so let's just add this as well 24 and then we have 30 okay and in our normal text I am using one minimum height but inside our heading text I am not using any given height okay and now if we just take a look it is looking little bit like this only the text font is different but for now we are going to go ahead with these default font itself now for the stacks input field we are going to create one new composable okay and let's say let's call it my text field okay and we'll create one composable with the help of outline text field okay now we need few things for this okay so first of all we need one value so we can use one text value variable and we can initialize it with the help of mutable State initially the value will be empty and we can use remember block to store this value compose will take care of this value like last value compose will remember with the help of this function if you go inside this so it is saying remember the value produced previously and then whenever recomposition will happen it will remember the previous value that means if user enters something here like first name user enter some name Harry then they enter some other thing so the last value will be remembered with the help of this remember function okay so we are going to use this in place of value and inside one value change we are going to update this value like this with it okay so it will update once we add all the other things here so let's say we are going to use one label okay and this label will be of type text okay so we are going to use from our string so we are going to use string resource or let's say we Define one value level value we will pass directly from the place where we will use this okay so we have defined this then we have our value we have our own value change now we are also going to use colors here we'll use text field defaults okay and outline text field color basically and inside this we will specify few colors used by this outline text field so inside this we are going to use some color for the outlining so we are going to use focused border color which will be our color resource our DOT color dot primary we can also use directly primary color because we have defined inside color dot KT and this color will be imported here okay like this we can use then we are going to use focused label color also as primary and we are going to use cursor color also as primary okay now we are going to Define some keyboard options and we are going to use default option itself so we will write keyword option dot default okay so we need to add one curly races one Lambda basically for this text and our outline text field is ready so this is our text field component and we have one text value with the help of mutable State we are using that as the default value and whenever our value change so this function will be triggered on value chain inside this we are updating the value of our mutable State as well okay we are having this primary color as the focused border and label and cursor default for keyboard options and that's it this is our text field component okay now we are going to use this component inside our sign up screen so our layout is like this so let's add this my text field component okay and our label value we can use with the help of a string resource first name okay okay so we can see that it's reflecting inside our screen but we need to just have a look on our design all right so it should be of full width right so first of all we need to go inside this we need to add one modifier here and we will say modifier Dot fill Max width okay so our width is ready if we notice there is some background color as well so we can add one background color and I have added this as BG color this is basically one grayish kind of color note exactly gray and I am not making this as rounded and Border because we are already using this outline text field so that this will be one rounded text field we can use border like if I want to use the Border thing we could use like this we could use one border stroke and shape but it will not look good because we will have two borders so there will be two borders right so that's why I am not using this as of now but I am just going to use one shape or I can use one clip thing with the help of our component shapes stored small basically I have defined few shapes here inside this so we are going to use this 4 DB now I will reveal this again so that we will just have our outline filled but little bit cornered radius we can increase if we want but now the main difference we have is we need to add one icon so the first thing will we will come to our text field we will add leading icon this one and this will be with the help of icon and painter is basically kind of resource we need to pass like something from drywall so we can just use painter resource and we can pass the ID driver dot profile okay so this is the way we can add one icon like we need to use this leading attribute leading icon and then we need to add one image with the help of Icon and we are passing the resource which is this image okay and content description we can pass empty for now okay so we can just see that our icon is reflecting here now we can see there is one difference in this heading and the text field so we can add one spacer here okay basically this we can use to add some empty space and we can just use modifier dot height okay we can pass the space we want here so let's say we add maybe 20 DB okay and let's refresh okay so the moment we added the spacer we can see there is some space between these things now we can use another text field component and we can pass string as last name okay we can use one more text field and we can pass name as email okay right so for this email we need to pass some different icon right so basically we can pass this value directly from the sign up screen okay so we can add this as a parameter to our text component okay so when painter resource we have added as the parameter and we can use this painter resource directly here okay whatever we are passing we can direct use in the icon and from here we can pass profile for this and first name and last name and for email we can pass email or we have message as the icon okay so now our screen is looking like this we have three text field and we are passing the label and value for label and we are also passing the image we want so directly we are passing from here and then inside inside our outline text field we are getting these two parameters for label and four icon and we are using label directly with the help of text and we are using icon with the help of leading icon okay and our screen is looking like this now so now if we just open this layout and we look at our screen it's little bit similar what we need one password as well so for that we can just come back again we can add one more text field okay and for this we can add password we don't have a string so we can just Define one okay and for the icon I can pass this lock okay and if we just check out our design so our design is looking like this so This password text field will be little bit different from all of the other text field basically we need to add this toggle functionality here with this I symbol so for this let's create one new field and we will call it as password text field component okay now let's refactor this so basically this value will be password so we can use this here password value okay and we need to do one new variable declaration that will be of a variable called password visible and we are going to use one mutable state and initial value will be false that password is not visible okay now for these keyboard options we need to remove and we need to add keyword type and we need to add keyboard type as password so this will show keyword as we are going to enter password basically now we need to add one trailing icon as well and inside this trailing icon first of all let's use one variable icon image okay and if password is visual okay we have defined this at the top right so we are using the same if password is visible and we will use this icon this I icon from Material compose icon itself and for that we need to add one dependency okay and that will be of compose material icon extend it we are going to use same compose UI version okay so we are using this Library materials icon extended and we are using the same compose version basically this Library will provide us few material icons from the compose itself and we can use those inside our project and now we can use one icon here with the help of icons dot field and we can use this visibility so this icon basically will have some vector image we'll see this shortly inside our UI and if our password is not visible so we are going to use icon stored fill dot visibility off okay we can use one variable for description also for this image icon and we can use same if password visible toward value password is shown we can just write hide password else we can just write show password okay we can again use this from a string resource so let me just add this inside one string hide password and I will add this value I will add one for show password okay and here also I will use one string resource with the help of show password okay this is our description now we need to add one icon button okay inside own click what we will do we'll just take this password visible value and we will just assign the opposite value exact opposite so if it was showing up like password was showing up so it will hide and if it was hiding so password will show up okay then we will add one icon here okay and inside this icon we'll just pass the image icon image and for Content description we will just use the description then we will add one visual transformation okay so for that we will just check that if password visible dot value then we will just say visual transformation dot none else we will just add password visual transformation okay this one all right that's it we can use this now inside our application so everything will be same so we can just add it here itself and now if we run our application okay so this is our application as of now we can enter few things we can enter the name we can just take it out here we can enter the last name we can enter some email okay and we can enter the password so if I enter one two three four five six okay and if I try to toggle this it will be visible okay we can hide it again and we can see the password as well okay now let's get back to our layout image so we can see that we have one check box kind of thing and we have some text okay for this let's start designing one component so we will write one composable function and we will write this as check box component okay and inside this we will also pass the value we want to add basically inside the text okay so as we can see that this checkbox component will need one checkbox and then some text as well and this is in horizontal orientation so we can use one row and that row will contain one checkbox and one text okay so here we'll use one row composable and inside this we will use one modifier okay and we will first of all use max width okay and then we'll give one height so we'll give one minimum height let's say 56 DP let me just take it to the next line we will also pass one vertical alignment okay so that everything if stays in the center we'll use with alignment Dot Center vertically then we'll also add some padding so we'll add the padding in modifier itself let's say we add padding as 16 DP then then inside our row composable we need to add one check box so we'll use this check box now check box can be changed and we can either check it or uncheck it so for that we will store the current state in one variable called checked State okay this will be inside remember block so that our generator but explicitly we now need to Define these things so we can remove it from here okay we have our checked State now inside checked we will use this check this state DOT value for this we can also take our normal text so if I just take the normal text right let's try to use this and then we'll just add the value which we are getting inside this as a parameter now let's try to use this inside our sign up screen and for the value let me just take this from our figma if somehow I can take this text okay we can take so let me just Define one string resource and I will just name it as terms and conditions and I will Define this string okay and then let me just reveal and let's see the design okay so it's reflecting but it's in very weird shape so first of all we need to reduce this size okay so if we just check out our figma so we will get to know the size and all so this is using 15 SP as the tag size so we can reduce the size and all but I think if we just look at the layout carefully again we can see that there are some text part which is clickable so I will say that we Design One new text component for this so we can just come back again so let's write one new composable we will write this function as clickable text component okay this will also take one value and a string and inside this we need to make one spannual string inside this component now we have two option either we take simple normal text component and we use modified or clickable or we can use clickable text okay this is also an inbuilt jetpack compose component now as we know that some part of our text will be clickable so we can use one annotated string it's kind of spannual text okay for that we can use one variable annotated string we can use one string Builder but for annotated type right so inside this we can append different different text with different different style in a final string okay so our text will be divided in few part the first part will be by continuing you accept our till this part okay so we will just write one string and this will be the initial part then we will have this privacy policy right so we will Define one new part and we will have the last part and and terms of U so we'll use this and text as well here this will be and then we will use terms and condition text and this will use this one terms of use so we have these different parts of text now we can use inside our annotated string first we will just append the initial text okay this is the normal style we have and then for our privacy policy text we can use with style and in a style we can basically use span style and we can pass some basic color here let's say we pass color primary right so we can directly use primary color okay and for tag and annotation we can just pass the same privacy policy text and for annotation also we can just pass privacy policy text and we can append this string now okay so we have added these two part now we can add this as this is the normal part so we can just add N Text and then for our terms and condition we can just use the same style and we can just append this term strand condition text okay we have our annotated string ready now we can use this annotated string in place of text okay and now inside own click we will get the offset okay so now when we click on this entire string we will get the offset so we can use this offset to find out the span we have clicked right I will show you how we will use this so we can just use annotated string dot get string annotations okay and inside this we can pass this offsite for start and end and then we can just check are we getting this offset really so we can just use first or null so it will give if there is one valid span click and we will add the Elvis operator then inside this we will just check that are we really getting one span from this annotated string and let me just print this for now we will see what we are going to do with this so let me just add this as a tag for now so this will return as one is then we can just use this Span in place of it and let me just try to use this span okay we will see what we are getting when we click any item inside our text now we have our clickable text component ready we have defined few text and we have added one annotated string with this Styles and we are just trying to add that string inside our clickable text and we are trying to find out which part of the string we have clicked okay we have added the slope so we can just go inside checkbox component and we have our checkbox already there we can add this here okay we can pass the value which we are getting as a parameter okay now we are already using this inside our signup screen so we are passing the value of a string and then inside our checkbox component we are using the clickable text component which we just designed and we are passing the string now let's run our application and then we will see however UI is looking and what we are getting when we are clicking on the string so right now this is our UI and you can see that we have some highlighted text so these two value okay but this is not taking the fullest screen I think so for that let me just reflect a little bit and for our check box I think we are using some padding inside row modifier we can remove this because we have already one surrounding padding here so if we just check out inside our right side design so it is taking the entire space and it is coming like this there is no space here so we can add some space we can just form the string basically so we have added some space at the starting and ending position for this so there will be some space after this and then there will be some space before this right okay so we can just check that now it's looking better and it is showing some space here wherever we want it and we have some clickable style as well so let me just run this and we will see so inside our locate I have added the tag we have added inside our component now we can just try to see our emulator okay this is the emulator we have right now and if I try to click here so we are getting the item here privacy policy this item is clicked if I click on this terms of fuse so you will see that it is giving us the item terms of use if I click anywhere in the first item it will not give us any value because these things are normally added and node added as a annotation here okay this way we can use annotated string and this is very helpful because if you just want to click on any specific item and want to get notified like if you are clicking on this privacy policy you will be able to find out that we have clicked on this specific portion and then we can perform any action and inside this we can check that if our span dot item is clicked so we can show some other screens for terms and condition let me just design one new screen okay so that will have few other screens and we will see how we can use this so let me just comment it out for now and we are designing one new screen so we'll write this as terms and conditions screen okay this will be again a file and we will create one composable function we can use the same name terms and condition screen okay and inside this we can design anything but for now we are just going to use one surface and we can use modifier dot fill Max size for now we'll use one background color we will use colored wood white this color so we have our modifier till here okay then we can use something like if you want to use any padding or any such thing we can add that as well so let's add 16 DB for now okay then inside this we can add one normal text component we have okay or let's say we can add one heading text component for now and we can pass the value from string resource and we can add one string terms and condition okay we can import this resource we can add one string terms and condition okay we have already okay this is the main detail so we can add one terms and condition header or something like that and we can just say terms of use so later on we can add few other things for description inside this screen but for now we are going to add like this we can add one preview as well so you are already familiar how we can add one preview with preview composable we can add one function we can just take the same screen name and we can write preview for this screen we can use this parent composable here and we are good to go okay we have something like this now we can close everything and we can come inside our router we have one another screen so we can Define here terms and condition screen this will again be of type screen now as we have multiple screens we should have one method so that if we want to go from one screen to another screen we can just use that method right so we can Define one function navigate to and we will just pass one destination basically one destination screen where we want to go and inside this method we can update the value of the current screen so we can just take this current screen load value and we can update with destination so that whatever destination we pass inside this method that will become the current screen now we need to add this inside our application class as well is screen dot terms and condition then we will just show up inside terms and condition screens okay now we have added both of the screen inside our application as well and inside our router as well this router is basically for navigations now we can use this method from anywhere okay now whenever we get this condition that clicked text is terms and condition tag so we can pass one callback with one high order function and using Lambda we can pass this back to the place where we are using this right so we will get some callback here only okay so to do that we need to add one method let's say own text selected okay and we will pass the value span dot item like what text we have selected then we need to add this as a unit here okay own text selected and we are returning some value as well of type string and then this will be of type unit okay so you can just see that we are returning it like this but as our clickable text component is getting used inside checkbox component so we will add one parameter here as well same parameter basically and we will use this here okay and now if you see we are just rewriting whatever the value we are getting with the help of this unit high order function basically we are passing this text to its parent origin where we are using this component we are using it here inside checkbox component and then we are using it here okay so now if you see we have an error and it is showing that no value passed for this parameter okay and this we will just use own text selected and let me just take it in the next line OK like this so now if you just take a look our checkbox component has one value string and this high order function and this is just coming inside this and when the values are matching we are just passing a callback with this item selected okay so we can just do a some conditional check like if text is matching or not so for now we are only passing it for this term sign condition text which is terms of use so whenever user will click here we'll pass this callback so let's say four privacy policy also we want to pass the same thing so we can just add one another check or span item equals privacy policy text so if either this condition is true or this condition is true we will just pass this callback and we will come here now we need to add one router here right so for that we can use router dot navigate to and we can use this screen dot terms and condition okay so let me just run our application and let's see how our application is looking as of now okay so we have this screen and we have this privacy policy text and stuff okay so this is the application as of now we have this and if we click on this privacy policy or term of use it will go to the next screen so let me click here and see we can come here right if we just press back button it is going out of the application for this we need to add back Handler basically I will show you how we can add that so for handling back navigation we will create one file back button Handler okay and inside this first thing we will add is local back press dispatcher okay so if we go to the Declaration this is basically one class where we can register back pressed callback okay okay so now for this dispatcher we need the Callback we need this own back pressed callback so for that we will add this code so we are having one navigation Handler okay and inside this we are just implementing own backrest callback this is the same callback which we was adding inside dispatchers okay and for this brag press callback we can pass this enabled or note so we are just adding this as a parameter so if you have used normal XML and activity we used to have this own backrest method right override it so it is kind of similar thing but little bit more compose friendly so from the latest Android releases we are doing it this way because own back press method is deprecated and now as we have our dispatcher and our callback for own back pressed callback we can add this so if I explain you this code we are using here the concept like we will add some composable inside these handlers and then once we go back to the previous composable we will just dispose that current Handler okay so understand it like this we have our sign up screen and terms and condition screen inside the handlers when we go back to sign up screen right we can just dispose this terms and condition screen from Handler okay you can just use this for now and I will explain you more about this in upcoming videos okay so this is the method which we can use now inside our sign up screen or inside any screen where we want to add this back Handler capability so now we can add this system back button Handler inside our term sent condition okay so we can just minimize everything and under surface we can add this okay and inside this we can specify where we want to go so we can use our app router dot navigate to we can add the parent screen with the help of screen DOT sign up screen okay so if we run our application now and we press the system back button we will just come back to the previous screen okay so right now if you see if I click on this terms of use and we come to this new screen and if I click back we will come back to the previous screen if we again click on this we can again come back to the previous screen okay now we need to design one component for this button and we can use that component for this register and this login button okay so we will come back to app component we will Define one composable we will call it as button component okay and this will take one value for for the text which we want to show here register or login and inside this we will use this button composable we will add the own click later on but for now we are going to add one modifier in this okay and we will just take fill Max width to take the entire width and we will also take minimum height let's say we are taking 48 DP okay then we will add content padding and we'll just use padding value so that we can take default values and then we are going to add this colors basically we are going to add for an transparent color okay we will explain you why we are adding transparent color for this button basically inside this button we are going to use one box and box is exactly like frame layout and we will make gradient inside this box okay so first of all we will take this modifier which will be like we need height and width exactly similar to this button and for gradient we will use this background and we will use brush API okay with brush we can use horizontal or linear gradient we are going to use horizontal and we will pass a array of colors okay we will pass secondary color and then we will pass primary color okay we will also add one shape okay so we'll use rounded Corner shape and we will pass 50 DP for this corner radius okay then we will use content alignment to keep all of the text and its children in Center we'll use alignment Dot Center this one inside this we are going to add one text okay so we will just use value as the text value here and we will just use font size here and let's say we are using 18 SP we will use Font weight and we will use Font weight Dot bold okay so now our button component is ready okay now we need to add this inside our sign up screen so I will just add it here and inside this we have one value we need to pass and I have already added strings for register and login so we can just add one string resource r dot string dot register okay and now we can try to run our application so we will see that we have one button component okay so basically inside our button component we have one button composable then we have one box and box is having this shape and this gradient and then we have one text for this register string okay now we need some space here in between this privacy policy terms and condition text and this register button so we can add one spacer and we can specify some 80 DB height in between of these two okay so this is spacer will take space and it and it will reflect like this okay this is our design okay so for this divider we are going to use one row component and inside that we will either use some spacer or divider then one text one divider again okay so inside this we will use row composable and we'll use one modifier with fill Max width okay and inside our row we will use one divider okay this is basically for divider lines and all and inside this we are going to write one modifier okay this will just take fill Max width and we will specify weight okay we'll specify weight as 1 and we are going to specify one color so let's say we are taking from our color we are going to use this gray color Okay so let's use gray color and we will give one thickness how much thick line we need so let's say 1 DP okay so we are going to take this once again so that two dividers are there and we will just take one normal text composable and we will pass value as or this one and let's say we specify font size little bit and let's say we are writing 14 SP okay and let's say we specify one font color as well and we can just give a text color okay so we have already added this inside sign up screen okay so it should reflect so we can see that one divider is coming okay but these things are not aligned so inside our row we are going to add vertical alignment and we will use alignment Dot Center vertically okay and our application will look now like this so everything is vertically aligned but inside our text let's increase this size and all let's make it to 18 let's extract this to one string resource okay and let me just take this to next line we will add one modifier as well inside our text we will add one modifier as well dot padding and let's say we are writing padding as 8 DB okay now it will look much better so that there will be some space in between so now our emulator is like this there is some space as well we can reduce this height little bit for now okay so I have reduced this spacer height which was the difference in these two components so now it's looking like this okay now we need one text and this is again going to be one annotated string which will have login eventually okay so we can just quickly use the previous component we have okay so we have this clickable text component and inside this we have few predefined things right so we can just take this for now we can create one another component so we can create something like clickable login text component okay so we are not going to use any value because we will just Define it here itself so initial text is going to be this one already have an account login so let me just Define this in a string let's say go to login and we need to use this text already have an account like this this much this is our initial text then we have our login text okay this is going to be our login text which is login actually okay so now we are using this annotated string method we are going to just normally use this initial text then we have the slogan text we can specify in tag and annotation and we can append this we can remove these things and then our string will be ready and inside our clickable text we are just going to use if the clicked portion is login text okay so we will just and inside this clickable part we are just going to use if span item is equal to login text then we will just pass this own text selected method okay which is this eventually now let's try to use this and add inside our sign up screen so inside this only this method we need to use but for now let's try to run this so we have this text here so one interesting thing here to notice this style is different right this text style is like this the like our normal text component right so we can just take the style from our normal text component this is the style we have right we have some modifier for height and all then we have some Style so we can take these value okay we can come inside our clickable text and we can add these values okay so only color thing we need to remove because already our color and all we have used inside our span style layer so now let's try to run our application will it effect or not basically we have taken the style from here from our normal text and it is actually working okay okay so this text is 24 SP and this is having some reduced size I guess this is 21 yeah so we can reduce this size 21 okay it's reflected now we need to take this in center right so inside text style we have one option text align and we can use text align Dot Center okay and now let's run our application so it should come in Center yeah okay so we can see that this is our layout as of now and this is the implementation which we have done okay and it is looking pretty close right we will implement this Google and Facebook login as well inside our next videos okay now we need to implement this login part so I will show you this in next video because this current video is already close to one hour so I will just wrap this video here and for this I will share one another video so stay tuned thank you [Music]

Channel: Native Mobile Bits

Views: 36,181

Keywords: JetpackComposeTutorial, AndroidAppDevelopment, LoginFlowTutorial, UIProgramming, AndroidUIUX, AppDevelopmentTutorial, AndroidDevelopmentTips, AndroidStudio, AndroidJetpack, Jetpack compose tutorials for beginners, how to learn jetpack compose

Id: PeUERQJnHdI

Length: 60min 58sec (3658 seconds)

Published: Wed May 10 2023