Jetpack compose UI Challenge - building a modern login screen with Jetpack Compose

hey everyone welcome back to a new video today I'm going to show you how to build this nice looking screen injured back compose so this is a login screen we are just going to build the UI we're not going to implement any logic code and this of course supports the light theme so let me switch the theme real quick to show you that and let's get back to the app and as you can see this is the light theme of this screen if you are not familiar with digital composite then I highly suggest you to start learning this new toolkit for building UI in kotlin not only for Android but nowadays you can just build desktop apps uh website and also iPhone apps with jetbag compose and I have a playlist on that so you can just go to my channel go to playlists and start watching the jetbag compose playlist so anyways in this video as you can see we're gonna implement this nice looking screen and I think this video is going to be long so do your best to finish it because you will benefit a lot from this video uh you will actually apply all you have learned in my playlist in my jetbag compose playlist in this single video so again I highly recommend you to watch this video Until the End and one more thing before we start building this screen is I will make part 2 of this video where I'm gonna show you how to make this looks good on all screen sizes because uh what I'm gonna design today or in this video is going to look good on this compact screen size so if we have a smaller screen size we do not guarantee that to look the same as we see it in here and I'm gonna do this on purpose because in part two I'm gonna show you the best way of supporting different screen sizes in compose so make sure to watch this one and make sure to preview or test your screen that we're gonna build together on a compact screen size like the pixel 6 Pro here or there are different devices from the Android Studio in layer in emulators so make sure to just try it on on a compact screen size okay now let's actually get started and the first thing I want you to do is to go to my description and download the initial repository the initial project of this one because I actually prepared some colors so let me just close the these files real quick and here's the project that you will be downloading is going to have some colors so inside the theme package you will find a color file and this one is going to have these three three colors that we will be using and if we go to the theme you can also find that we changed the dark and the light color scheme so I have not explained that in my playlist yet but as you can see this is very simple so we have a color file that has the colors that are used in the project or in the app then in the theme file we basically describe our theme so we have two color schemes here the first one is for dark colors and this is just a function where we can just pass primary surface we have a lot of other colors we can pass if you are familiar with material with material design then you know these colors so we have on the primary for example um on error and by the way I forgot to mention that we are going to use material 3 component in this uh to build this screen so anyways as we said we have the dark colors we have the light colors here and in this function here it does some logic to calculate what color uh what color scheme should show and then pass it to this material theme composable file you do not need to worry about this because it is auto generated by Android Studio so what I also prepared for you in this project is the fonts so as you can see we have five fonts here and one more thing I prepared for you is the icons so if we see that you can see we have the Facebook and Google Icons we have the local and we have the ships so as you can see if you so as you can see uh let me open the figma file I'll also link that in the description as you can see here we have this shape so I also included that for you and you might wondering if we can just create that with compose without needing an extra resource for that the answer is yes we can do this with canvas but this is a quite Advanced topic that I don't want to go through in this uh simple tutorial so let's actually get started with the type file so inside the type file we just want to create the font family files so let's start with that so in here well the first font is enter and now we can call font family class in here we need to pass a list of fonts we're gonna have one font we pass the resource ID and then we pass the weight of this font and this one is medium now that's it for this font family we have another one called robek and at this time we want to take the Rubik bold and let's make this bold let's just copy and paste for the last font family which is robot also and here we're just gonna pass the fonts of that font family so we have three fronts here the first one is medium and let's pass here medium we also have another one regular and here we were going to pass normal we don't have regular in this class and then we have bold and we want to pass here extra bold uh the reason why you're passing that in here because this should be an extra Ball but I have not found extra bolt for this Roboto uh font family so we just pass it in here anyways now in topography here we basically specify some styles for our texts parameters we have we have headline so there are three types headline a large medium and small so we're going to need the large one and the medium one so let's create this style object now and for this one the font family is Roberto font weight is extra bold and font size is 32 SB so let me go to figma design and show you where we're gonna use that so as you can see here we have this text and we're just gonna apply this style on this text this is what basically I'm doing so let's actually create another style let's call this headline medium I'm gonna copy this and let's just change this for the family and we want this to be bold and the size is 24 SP for this one we're gonna be using on here and let's move forward to the next thing so we need Title medium I'm going to copy this and I'm just gonna pass this font family we're going to pass medium and 14 SP I'm going to copy this one paste it here and this time for the label medium so a special photo and normal here then we pass 14 SP so again these are just styles that will be applied to our texts um now we can close this so now let's create a new file for our screen design and call this login screen now we're gonna create composable file and if you write comp and click enter you're just gonna get your composable file ready for you just need to type the name login screen and now we want to represent this screen by a server face so a surface is just one of the material themes components which stands for a surface so the name describes what it does we can use a box instead of this but the but the difference between surface and a box if you go to the implementation of a surface you can find that the background color by default is the surface color from the material theme so we don't need to specify a background color in our case so we're just going to use surface again you can use a box so in my case I'm going to use surface and I'm going to take the maximum size and now if we go back to the design you can see that we can just create a column and put all of this element in a column so let's do that so I'm going to create a column here and let's take the maximum size uh we actually can remove this fill Max size from the surface because the fair because the this child already takes the maximum size and now we want to actually start with this top section so this one that includes the title the shape and the login text here so let's do that first of all to support dark and light themes we want to create a helper variable called the UI color and in here I'm gonna check if his system is in dark mode or in Dark theme by the way this is a composable function that is already implemented now if if we are in the dark mode then we want to make this color white else we want to make it black and make sure to use this one and after that we can make a box and let me just do this because if you take a look at the design you can find that this shape is just an image and to be able to write on top of an image we need a box and we also can use the box to push this look and text to the center bottom so let's do that I'm gonna apply content alignment on here and make this top Center then let's have our image and let's add a panther resource we're just gonna add the shape for the content description I'm just past null and let's just separate that in new line let me just hide this alerts from Android studio and let's put that in new lines now we want to make sure that the image is pushed to the edges of the screen we can just control the size using the modifier so fill Max with and we also want to fill Max height but we want to pass a fraction we only pass uh 0.5 because we only want to fill the half of the screen as you can see or not half but we can make this 46 because I calculated that before and it's 46 percentage of the screen okay now we also want to add content scale here as we want to make this fill Downs so we want to make sure that uh the image will fill in the container okay now let's go to the main activity and let's call that login screen from here so we can preview that let's launch the app to see that okay so okay so as you can see okay so as you can see here is the shape now let's also switch the mode to the night mode and turn on that okay let's get back and the up looks pretty good now let's hide the emulator and keep on designing so inside this box we want to create a row now and the reason why a row as you can see as you can see this is just a roll and the first element of the row is a Nikon the second element is a column that has these two texts so let's do that uh this row is going to have a modifier and we want to add the padding from the top 80db then we also want to have vertical alignment and we want to make this alignment Center vertically like this then inside this row as we said the first element is the icon so let's pass the icon here which is the logo and for the content description you can pass novel in this case I want to show you how to just get a resource from the string file we can pass now the name of the resource and we're gonna just extract that let's click on OK and now the size is 24 DB 42 DB sorry and we also want to pass color which is your eye color the one that we declared above here okay cool now we want to have a spacer between these two items and this is just 15 DB next we want to have a column for the two texts and in here we're just going to add the first text so let's add string resource and we can just get that from the strings file and I'm gonna name this the toilet like this click on OK now we can actually apply the style from the typography file you can get that from Material theme dot typography and here we can get hitline medium then the color is UI color let's format that we're going to want to copy this one paste it down here we want to change the text so find house and find your house click on OK and this is title medium now let's launch the app to see the preview okay that's cool this is the night theme now outside of this column and outside of this row so inside our box we want to create the login text so let's copy this one put it here this time this is login let's extract that and if this is headline large we want to keep the same color but we want to add some padding so I'll modify Dot padding we want to add from the bottom 10 DB then we want to also show this at the bottom here so we want to add a line and make this bottom center let's launch the app to see that okay so now this looks cool and as you can see if we keep doing that for the rest of our design it's gonna get real messy and we can't basically it's gonna be unbearable so what I'm gonna do now is to select everything here or actually I don't wanna be lost so from here everything everything inside this column right click on that click refactor then choose function we're gonna name it top section so as you can see we just extracted the content that we selected inside our function now this way is more readable okay so next we want to design this text Fields so I'm gonna just create a spacer here height is uh 36 DB as you can see all of these content all of these composables have something in common which is the padding there isn't the padding here as you can see and for that I'm gonna just create a column here and we're gonna take the maximum size and we gonna add padding horizontal padding of 30 DB and here we're just gonna add the rest of the design so let's actually start by creating this text field and uh we're not going to create the same ones as I said I'm gonna use the ones that come from Material theme components you can actually create a custom one using basic text field composable but that's gonna take time so in my case I'm just going to use the default one which is a text field composable so I'm gonna create that in a new file here and I'm going to call this login text field so let's create composable and for the argument so first we need to place a modifier from the outside so this is just the best practice that you always need to pass a modifier for your custom composable now we need to pass the label and we need to pass trailing which is the forgot password in case of the password text field so are we just gonna go back here and we're gonna copy the same color we had in here put it in here and now let's actually and now we want to create our text field let me just put that into new lines okay so for the value we're just gonna pass static value uh that is on you actually I showed you how to do that in the previous video on this playlist so this is just a little homework to make this text field interactive now we need to add this annotation because this is just an experimental API from Material 3. anyways now we can actually continue by adding the other attributes we want so we want to pass a modifier the same one we get from this function and then we want to pass a label so by the way a label is this email here and this password now let's actually add a text now for the text we're gonna pass label and for the style I'm going to pass the typography label medium and for the color we're gonna pass sorry for the color we're going to pass UI color that's for our label now the colors so to change the colors of your text field there's a text field defaults dot colors and now we can change the colors of the sticks field so starting with the placeholder and and before adding the colors let's just go to the color file and we want to actually create them here so let's do that so Val those are going to be extension values because we want to access them from the material theme color scheme so color scheme Dot forecast field text let's import that and this is going to be a composable now we wanna get function and we can check if system is in dark mode then we just want the white else color black uh I'm just gonna create other values here for the rest so and let me just copy this paste it and this is unfocused and in here the color is now here we want to use another color okay now one more text field container um I'm gonna make this blue gray but we want to change the other value on that I want to make it 0.6 f and lighter blue white for this one okay that's it now let's get back to our text field so unforest placeholder material theme Dot color scheme Dot on Focus text color we also want the focused Place holder and now we also need unfocused container which is the background of the text field this one is text field container and the forecast one is the same okay cool that's it for the colors now the trailing icon and this is just a text button in here we just want to add a text the text is our trailing the style is a material theme typography label medium but we want to change the font to eight so we call Copy and we call font weight then we want to make this medium um we also and for the color let's pass the UI color okay that's cool now we can just go back to our login screen finally we can actually continue on the login screen so inside this column let's actually create a login text field the one that we just created and for the first one for the email we want to have a trailing so we just pass an empty string and we want to pass a modifier film Max with now we want to get now we want to create another one but we want to add spacer between them so let's create that and dispenser is 15 DB this one is passport you would just extract that in the in the strings resource file but I will just keep him in here now we're gonna design this button so let's do that button and let's click here let's put that into new line and let's add a modifier fill Max with we want to have a height of 40 DB [Music] and and for the colors let's add button defaults to change the colors so bottom colors so the container color which is the background color I'm just gonna add it in here you can just go to the color file and do as we actually did but I'm gonna keep this one simple so I'm just going to create that in here now for the content color so the text is always going to be white whether it's night mode or light mode okay the last thing is the shape and for the shape here I'm gonna pass rounded corners and the size is for DB now this button is going only to have a text and the text is log in then the style let's add label medium and we want to change the font weight I want to make this medium okay that's it now let's launch the app to see what we have achieved so far okay that is actually nice but we don't have spacing between these so let's fix that let's go on here let's see why we don't have spacing okay so uh we need to make this height and we need to copy it paste it here and this time we want to pass 20. so let's see again okay so here's the spacing but I can't see the forgot place order let's see why is that um I think here we need to pass the placeholder yup so here it spells for got let's launch the app to see that and here you go let's add also a question mark so here you go now this one is clickable okay now let's move to the social media section uh here as you can see we need to create a custom composable so let's do that so let's actually create another file for that let's call this social media log in it's great composable [Music] and here we just want to pass the icon and this is a drawable resource and this is an integer let's call it icon and it's integer uh we also want to modifier let's pass that firstly [Music] and we also need the text which is string and we can just add only click callback for example so I click We're not gonna need that but just show you the right way of doing it okay so this is just gonna be a simple row uh let's add the modifier here so modifier and we want to add some default modifiers here so clip I'm going to create a rounded shape for DB and now I'm gonna create a custom modifier because uh this actually different so as you can see in case of a light mode there won't be any orders but in case of in night mode we want to have a border so for that I'll just want to create a custom modifier to calculate this logic let's do that inside here let's actually call function modifier Dot social media that's what I'm gonna call it is going to return the modifier and we're going to call composed so this is how we create a custom modifier now we check if this system in dark mode we're going to return a modifier with the background color of transparent and we want to add a border so the Border here has a width of 1 DB and have color of blue gray and also have a shape of shape of rounded Corner shape and we kept this for DB else than that we are going to create a background modifier with light blue white sorry light blue white okay now we can call this modifier here so social media and then we can make this clickable we can call on a click and we can also add a height of 480b now the design now inside this row we are going to have an image which is the icon of the social media Facebook or Google why didn't I use icon the reason is because icon doesn't support RGB so I tried it when when I tried icon it showed like black and white I couldn't just show an RGB value anyways so we just use an image and here we actually pass painter and we need to pass the icon for the the content description past null and the size is 16 DB [Music] now we want to add okay size of course [Music] yes and here um and here we want to add spacer let's make this 5 DB then we want to add a text and let's add a style here from Material theme typography or label medium and we want to change the color this time let's actually do that and now we can go back to our login screen and we can create two elements of that so before that let's actually extract this design inside the new function so from here select all of that click right right click refactor function and let's call this one login section okay cool now between the login section and uh between this text we will have a spacer [Music] so let's do that height and the spacer is 30 DB okay cool now we can create our social media buttons so let's do that so I'm gonna create a column for that because as you can see these I'm just gonna take these together so we need a column uh the first element would be this text then we have Row for these two options so let's actually add a horizontal alignment here and make this Center horizontally then we need to add a text and let's just add or continue with [Music] and we want to add a style here material theme dot typography label medium and the color we want to change the color [Music] to this one okay then we want to have a spacer High 20 DB [Music] after that we can have a row to add two options the Google option and the Facebook option so for the modifier let's actually give fill Max width and vertical alignment [Music] we're going to make this intervertically now we can just add two social media login options the first one Google so let's add Google and we just can add Google for the text on on a click we want to implement that now let's add spacer between these and uh width of 20 DB but one more thing here we want to add a modifier and we want to give this away to one f same thing for this one this one is Facebook [Music] and let's call Facebook icon now this would be it let's see okay as you can see uh seems like we forgot to add content alignment center in our social media here so let's do that so when I add horizontal Arrangement let's make this Center same thing for vertical we want to make the center let's actually see that again and as you can see also our custom modifier works so if we just switch the night mode to light you should see actually now the background color and we don't see any borders and that is exactly the behavior we want from our custom modifier now finally the last thing we have here is this text so let's design that before that actually let's actually just put this and extract it in a new function and I'm going to call this social media section now lastly for the last last text we have I'm going to copy this one we're going to need it and here now I'm gonna just make a box that is going to fill Max height but we want to give fraction to this and we're going to give this 0.8 f and we want to fill the maximum width the reason why I'm doing this is because we don't want to push that text to the bottom so we want to have spacing and all Point F will make sure to do that but only if we add content alignment here so if we add content alignment we want to make this bottom center okay that's cool now we want to just design our text but this one is different because as you can see uh we can actually make a row to put these different two Styles text beside each other but this is not an optimal solution we can just use something called build annotated string so let's do that text here and for the text here we're just gonna pass build annotated string function and let's now build our string so we can call with the style and we can add now our own style which is a Spanish style object here we can pass color so let's pass that font size is 14 SB and font family is Roboto font weight is normal now we can open further brackets or not here actually here and we can say append and we can actually then don't have account now we want to copy this style and we want to just change this properties so the color here would be UI color this time and we want to make this medium this time we want to append first when I paint a space so as you can see there's space between these two texts and then we just can say create now and I think that is it for this screen now let's launch the app to preview everything and here you go that is fantastic so we just built this nice looking screen with jetbag compose now let's also preview the Knight theme so as you can see this looks fantastic and that is it for this video but now let me actually show you that real quick let's actually launch this on Pixel 2 device which is a small screen device so as you can see uh the result is not what we expect we can't see the whole screen and that is because we passed static sizes and static batting values we're going to fix that in part two of this app because I want to show you the problem first then I will show you the solutions of this problem and I'm gonna show you a very good Solutions so stay tuned for the next video because I'm going to show you how to design for all screens using using material 3 in digital compost so that is it for this video hope you have a great day and catch you in the next one [Music] thank you

Channel: Land of coding

Views: 8,538

Keywords: Land of coding, Lofcoding, Android, Jetpack Compose, Modern UI, Login screen, Compose UI, Jetpack Compose UI design, Jetpack Compose theming, Compose framework, Beautiful, Tutorial

Id: TCBAWdwupjU

Length: 37min 5sec (2225 seconds)

Published: Sat Jun 17 2023