Design a high quality login screen with Jetpack Compose - UI Challenge

hey everyone welcome back to a new video in this video I'm going to show you how to implement this login screen in back compose I already have a video about uh implementing a screen like this if you missed it you can watch it but in this video I will just I'm going to introduce you to a strategy that I personally use when I have screen like this and let me just show you let's try to type the username or the password and as you can notice we just had nice animation that collapsed the uppper view so that the keyboard won't overlap any of these stick Fields or the button and that's the main purpose why I want to make this video so as you can see uh so I'm going to show you how to design the whole screen and implement this feature with jitb compos Let's Get It Started okay so now I'm inside an in composite project and the first thing we want to do is just to create our background so if you notice that we have gradient color for the background let's create that so I'm going to create a file here called this gradient box create a composable file with same name and for the color let's actually create two colors here and for the parameters let's pass a modifier and let's also pass a Lambda for the content that will be placed inside this box so that will be a posable and because I just want to pass the Box scope to this Lambda function we just going to call the Box scope as an extension on this and this will return a unit okay now what we can do is just create a box and give it the modifier here we want to pass the content and let's just pass modifier and give it a background color so modif fire modifier or no need to pass the same one we get from the parameters and now we can say background color um so no here we want to pass a brush not a color and then we can say linear gradient here we need to pass the colors as a list so we can see a list off the first color is the blue and tail 600 and that's it that's it for this Gant box composable now let's go back here and let's create our login screen so can say login screen let's create composable login screen so by the way I'm not going to maintain any states for this screen I just want to show you how to design the screen if you want to you can test yourself and maintain the state if you don't know about about compos States I already have a video about that so you can just go to my channel and watch it you will will get everything okay so let's actually see what we want to have here now we can call gradient box like that and we just give it the maximum size so modifier modifier fill Max size okay now what we need to add here is a column so we will just arrange or layout our screen with a column and let's give that fil Max size um and here we can just pass um horizontal arent to Center horizontally here let's put that into new line okay so the first thing we want to add in this column is the part that will get collapsed when we show the keyboard and we'll represent that by a box so let's do that so we'll put our text inside a box and this box will fill the max with and now we want to fill 35 percentage of the height so fil Max height 0.35 now this is very important because this value will get animated but we will just deal with the animation later so let's put that into new line uh let's keep on now so we just want to Center the content inside this box in a center and now we can just create our text so we can say text um here we can say welcome oh so welcome to land of coding for example let's pass a style that would be headline medium and let's also pass a color of white let's just put that into new lines and now we're done with the first part so this will just make sure to show the text the welcome text to preview this let's go back here and call the login screen let's launch the app to see that and here you go so here's the text now we want to design the rest so the text fields and the button so let's go here and let's oh no it's at the loging screen of course in here inside the column we want to create another column because the Tex fields and the button are just below each other so we can lay out that with a column now we can say column and we want to pass some stuff to the modifier first we want to fill the rest of the screen so fill Max size remember that we took 35 percentage in this box now in here we just fill the rest by coding fill Max size uh we want to clip this because we have rounded corners from the top so we can say rounded Corner shape from the top left uh top start not top left let's give that 40 DB and top in the same 40 DB okay uh what do we need to also give this is a background color so C do white and we also want to Center the content horizontally so we can say horizontal alignment center horizontally okay that's cool let's just launch the app to show you what we have achieved so here as you can see that's what we have made so far okay now we just want to create the text here uh the login text and then the text field Fields after that the login button so let's do that and here we want to add the text but before the text we have some spacing and here I like to use fractions so we just want to add spacer and give it a fraction now because we have different screen sizes um the problem is always with a small size so in a bigger screen size you want just the the content won't be clipped but in a small screen size content might be clipped if you you don't take care of it so in my opinion if we take the care of the small screen size then we are safe so how did I do that I just created a helper function that determines if the current screen is a small or uh big screen so uh let's let's just Implement that function so let's go here let's create function that is called um I don't know we can make a file that called UR I helper for example and inside here we can have a composable function called is small screen height this returns a bullion and now we can get the configuration or some information about our screen by calling this local configuration. current and now we return if the screen height in DB is less or equal 7 86 so I just experimented this number um using the pixel 2 device because that is considered as a small device so yeah so this is my own solution if you have a better solution it could also work of course but this is how it detect small screen uh small screen devices now in here we can just depend on that function to determine what kind of spacing we should give so here we can check if it's small screen hide we want to give some uh we want to give uh spacing of modifier. fill Max size .05 F else we give a higher or a bigger spacing fraction like 0.1f Okay so let's keep on now we want to pass the login text so we can say text or we can just copy the one we have in here and here we can paste it we can say log in so we want to change the color to Black um let's just see what we have accomplished so as you can see this is what I'm talking about now on a larger screen size we would have more spacing here and thanks to this if statement here now we want to create the text field now the text field that you saw in the app is just a custom text field you can't create it with the material theme standard text Fields you need to create your own text field using the basic text field composable so let's see how we can do that so in here let's create composable function let's call this my text field and let's create composable function so again I'm not going to maintain any State uh you can do that on your own so in here we will start this with a column because we have a label above the text field let's also give this modifier oh modifier and assign a default value pass it in here let's also pass a label here uh which is string of course now we can say text uh text uh text equals to label and style well I don't know let's give this or let's just keep the default style we don't want to care a lot about this now here we can just add spacer modifier. tide let's give that 10 DB and now we add the actual text field so we can call basic text field on that so we can call basic text field oh basic text field so for the value I will pass into string I'm not going to make anything with the state just do that on your own uh on value change keep that empty again now we want to B keyboard options and keyboard actions uh those are just ways to control the kind of keyboard you show for this STI field and yeah you can just for example also pass read only let's just pass those as parameters keyboard options keyboard actions and read only we make that as a bullion let give that de value of false so keyboard options keyboard actions and pass read only you can of course add more things but let's just do that quickly now in here now in this now in this T field we want to design the internal look of this T field so we can say row um we want to fill the max with um we want to clip this cuz we have arounded corner shapes 10 DB what we also want to do here is to give this a height so we can pass that height in the parameters as well so height 42 DB oh this type of DB 42 DB let's pass that in here we want to add a background color so this is of color we will pass a custom one here so we're going to pass this color and um yeah so that is it vertical alignment and let's do vertical alignment put that into the center um let's also add add a padding here for the text we add horizontal 10 DB and now we can just show the cursor or the actual text from the text field as you can see here we get this it we just want to invoke that Lambda call and that's it for our text field let's get back here and let's add this into our uh screen so here we want to add another spacing so again it depends on the screen height I'm going to copy this paste it so if we have a small screen height would be this if we have a bigger screen size would be this now we want to add the first text field so my text field label let's pass username or email keyboard options we just pass keyboard options I'm not going to modify anything on here keyboard action the same and let's also pass a modifier we want to apply a padding horizontally 16 DB that's it now let's add spacer modified oh mod fire. tide 20 DB this time we pass a constant and we copy this one paste it in here this one password we forgot to do one thing by the way we forgot to add the trailing icon for the password text field so let's do that let's get back to my text field inside this row um yeah that's why that's the reason why we created a row because we had two items but I forgot to add the the icon so let's see so I'm just going to create a box here and you this box I'm going to pass a modifier this will take a weight of 1 F and and we also we want to pass content alignment center Center start so we start from the center so we start so we start from Center start which is what we expect from our text field then we can call it do invoke and below this inside our Ro we need to add our icon so here we can say Trail an icon um let's pass that as an image Vector make this nullable if it's not null so in here I or trailing icon if it's not null then we can add um we can add a icon button and we can pass our icon so image Victor is trailing icon uh for the content description pass null and for the tin color I want to pass this one let's get back here and for the password Here we can just pass image Victor or trailing icon we can say icons do rounded dot visibility I believe or I no we don't have that one by default um let's see icons do default dot password no visibility no I no we don't have that by default we should add the extended library for these icons but I'm just going to pass anything actually I'm not going to care about that so let's see we can pass this lock make sure to pass a real icon but yeah I don't want to waste time on that now let's see what we have achieved so far I hope nothing is broken let's see yeah as you can see that looks what as we expect unless this here and we don't have padding here so we're going to fix that so let's go back to our text field and let's see what we can fix so let's remove this padding and instead we want to put it or place it in here for our text not for our uh text field okay now this looks better now the last thing is the button so let's do that let's create our button so let's go back to our loogan screen in here we can we can have a box we can say modifier equals to modifier. fill Max size so we want to fill the rest of this space we have in here then we place our button in the center of this space um yeah we can call content alignment we Center that button then we can just say button let's give that modifier equals modifier fill Max with for the color colors uh we can say button color or button default dot button colors so let me just format that and let's pass the container the container color here um I'm going to make this color do blue and we want to and for the content color so the text that will be white now we add a text we can say log in for the style let's pass um let's pass a custom text style here for the font size we pass 18 for the font weight a SP font weight of 500 and for the color oh we don't want to pass the color because we passed in here let's see so let's see now what we have okay we just want to add some padding and the color looks very bad I know we will change that uh horizontally 16 DB for the color let's see what we can add so here let's just pass any color then from this Color Picker we can adjust it um I don't know what I used in the original app but let's try something here so let's pick this one let's see now okay that looks good but one thing is that we want to change the shap here from rounded which is the default one to rounded corner so we change it from Circle to rounded Corners here let's [Music] pass I don't know 10 DB for example I'm still not satisfied with the color so let me just get the real call from the original app okay so I found it that will be like this c92 now let's see and yep that is the color we want okay now as you can see when we type something for example in the username the keyboard just overlaps everything and this is very bad user experience we can't even scroll same thing for the the password here so the way I solve this is just to detect the keyboard when it's visible we go to collapse this part so we have more space for this uh lower section we want to have a listener on the keyboard for that I'm going to copy and paste uh an a composable function and you can do the same you can copy it and paste it from my repository so I'm going to create here and call this or you know what we can actually add it in the UI helper here paste it and this is this is called Remember IM stad that is that returns to state of bullion so what happens inside here is basically that we register our call back inside this one that detect the keyboard visibility and we update this state every time the the keyboard visibility changes then we return this state so we can now use that inside our login screen we can say im e state or visibility or is IM IM visible by remember I State we want to import set and get we only want to import get now in here inside instead of this we can just use some animation so we can say Val or before we use the animation let me show you without the animation so if is I invisible we give that value else ZF or no we want to do if the I invisible we want to do ZF we want to collapse it else 35 percentage let's see click here as you can see that is what we want click here and we and that is also what we want but as you can see in this time it got out of the screen and the reason is because we want to go back here and to the Manifest and we want to add uh something to Windows soft input make this adjust resize so this will solve the issue now let's relaunch the app um here here and yeah as you can see now the reason why we needed this in the Manifest is because this a flag is for the for the keyboard it changes the default Behavior which is adjust pan I think and what that does is basically to make that it makes your screen scrollable when the keyboard is shown we just want to change it to adjust res size okay now let's get back to the Logan screen and in here instead of this constant we want to pass an animation an animated value so we can say Val animated upper section uh ratio let's say we can say by animate state or float as a state so now we can copy this P it here and for the label let's just pass him to string and let's pass let's delete this and pass the animated value now let's see so click here as you can see we had that nice animation like that and what you can also do is just to animate the visibility of this text so let's do that I haven't tried it but let's do it together uh so this text here so you can say animated visibility this will be visible if we if the if the IM is visible uh bullion here is false so we can say so we can say not is ime visible and we can't take that in here okay so it is complaining because we calling it inside another container another box so we just going to cut this box and place it inside now we work let's test that out I don't know if this is going to look cool or not but let's see so click here yeah I don't know if that was I don't know you can play around with the transitions so you can for example pass enter make that fade in or no without color brackets so fade in exit Fade Out and one more thing here I think we can just in the button if I am me visible else we keep the default thing we have but it is if if it's visible this case I would like to just copy this paste it here and we don't want to pass a ratio here oh I mean not here um I'm sorry about that wait so here this is the button it starts from this box so we can say if I am invisible else so in the else block we're going to show this this one that we created but in this in this part if if the IM is visible we are going [Music] to we are going to just copy the but button part and this time we have we want to just pass a constant padding value so in the modifier here we can just say padding top equals let's say uh 20 for example let's that click here uh we also want to add padding okay let's see click here yeah as you can see that is what we want so as you can see now this is not very smooth I stop the video and I get back to the manist file I change this to adjust nothing so this will tell the Android system that not to not to adjust anything for this activity when the keyboard is shown if you want to if you want to change this later you're going to need to change this later in your code if you have like other screens that have other text Fields you can do that programmatically and there's a way to do it so you can just put it for example to adjust uh resize or to adjust repan or to adjust pan sorry do programmatically and you're going to need that but now if we just click here and wait until the app is launched try as you can see it's way smoother now so as you could see and I believe that we can increase the spacing between the login and this T field it will looks even better but that's it uh it looks very nice and I just wanted to share this strategy with you so I hope you enjoyed the video if you did make sure to like this video And subscribe to my channel I hope you have a great day catch you in the next [Music] video

Channel: Land of coding

Views: 1,943

Keywords: Land of coding, Lofcoding, Android, Keyboard overlapping in android, design login screen android, Jetpack compose, animation, ime, Custom TextField compose

Id: ovawqbk7WJM

Length: 30min 29sec (1829 seconds)

Published: Sun Jan 07 2024