Jetpack Compose - Column, Row, Box & Sizing #2

hello welcome everyone to the second part of the jitpack compos playlist and this video is about four different things which are colums rows boxes and a little bit of modifiers so in the first part we had an introduction to jpa compos with what's new to us and what we don't have anymore from XML and they may not have said this but this playlist is also for those who don't even know XML or anything who want to learn yourui for the very first time then they also can watch along with this playlist so let's get started so the first thing is that we want to know how we can actually arrange or align components in AIT compose UI so we have actually three different ways which are having them in a row so one next to each other or on top of each other on a c you can have them one on top of each other like this or we can have them freely so we can put one in the top start like this and then the other one in the bottom end and then another one in the center so we can put them freely using a box and with a modifier we can actually control this behaviors and put them where we want so let's actually start with rows and columns which are very similar the only different things in them is that the main access so let's see that here in Underwood Studio this is where we left in the first video we delete this and then or let's bring that button so we still need it and let's just put this on click in the same line like this to save space and if we're on the app as in the previous video so let's actually onun the app and see what will happen happen we see that our button is in the top start like this and if you want to have a second button like this if we copy it so let's say click me two and this one is clickme one and run the app see that it's like nothing happened or the first button is gone actually not now they are stocked the second button is above the first button and uh this is maybe what we don't want usually so we'll use a column or a row so let's put them inside a row for example at first and then if we take these buttons and put them inside a row we run the app we see that now they are next to each other this is why we would use a row to put them next of each other and if you swap this with a colum like this and then run the app now they are on top of each other like this and these two rows and columns gave us the same behavior as has a linear layout in XML but we just didn't use that one much in XML and we just stick with the conate layout which was more flexible because of the nested layouts problem that we had but for now it's really okay to use them and this is usually how we arrange our components in our app using a bunch of rows and columns just like this and the other thing we have now in a column is that we can give it more parameters so if we open it like this that we see we have a bunch of things and the coin content is exactly what we have inside our common these two buttons is the content we have a modifier which we will see later and then we have viral Arrangement and horizontal alignment and what these two do so vertical Arrangement and horizontal alignment is that as the name says we arrange our components vertically in a certain way and align them horizontally in a certain way as well so if we say for example vertical arrangement Center for example and then we say horizontal alignment again Center and we run the app nothing will happen as you can see nothing will happen because our common is as big as the component that is inside it so we can't really arrange or align anything because they are already aligned and arranged inside the common because the common itself is as big as those and to fix this we can use a modifier to see the difference so we can use now a modifier and for now we just use a modifier to just give our common a size but with a modifier we can do a lot more things but that in the next video we'll see uh modifiers in details so you can say modifier this one from Android x. composi and then we give it a size so let's say fill Max size now we can fill the max size and we can also give it a background by saying for example material theme do color scheme do primary container and uh this colar scheme is exactly what we have in them so if you watched the first video so this colar scheme that we passed to our material team function this one so this color scheme in which we had either Dynamic colors or these predefined colors so that's our color scheme and now we're getting the primary container color from our color scheme this is how we can get it so if we're on the app now and wait a little bit now this is the primary container color and what we we can see now that is happening is that our components are vertically arranged so this is the vertical axis and they are in the center vertically and this is the horizontal axis and they are also centered horizontally so if we remove one of these so let's say we only want them centered horizontally and we run the app now they will go all the way to the top here because now we don't arrange them vertically but we do align them horizontally like this and if if want to put them at the end of our column then we can just say alignment dot end like this and now they will go all the way to the end here because now we aligned them to the end of our column like that so let's just put them at the center for now and let's bring back this vertical Arrangement and of course we can do different things here like put them to the bottom so if we run the app they can go all the way to the bottom as you can see because now vertically they are arranged to the bottom and actually the same works with a row so if we swap this now back to a row it's just now we have to swap this as well because for a colum the main axis is this one which is the vertical axis and the cross axis is the horizontal axis and for a row it's actually the opposite the main axis is the horizontal axis and the cross axis is the vertical a axis that's how they work in a row so we just now swipe this Arrangement right here we take it from here and we put it here and then here we say alignment like that and then we gave them the value so the vertical alignment for our row can be alignment do for example Center horizontally so in our row they will be centered horizontally like this and then the horizontal Arrangement you say arrangement to Le say Center like this and if we're on the app so now they are next to each other because we're using a row and then virtually they are centered virtually so this is the virtual axis and they are centered virtually at the center of the vertical axis and horizontally as well they are centered horizontally and let's actually change also the size we can change the size to in different ways so let's say for example if you want to give it only 40% of our screen size we can say 0.4 F now this will give our row 40% of the screen like this this is 40% but it doesn't look good instead we can change it in a different way which is instead of just saying fil Max size like this we can for example say fill Max width now it will fill the max width but it won't fill the max the max height so as you can see it fails the max width but it doesn't faill the max height and then then we can give it a height as we want so let's say for example fail Max height and then it will fail the entire height or we can give it for example 40% of our height so 0.4 F now this will give it 40% of the height as you can see this is 40% of the height and that same actually works for uh width so we can give it 80% for example 0.8 F this is 80% of the width as you can see and the other way is we can specify actually the height and the width with numbers or we can just at first specify them using size let's say size and 300 DP import DP DP in this case is an extension function and we can just say DP like this we need to use an extension function which is DP and we say the number we want do DP we'll run the app now our row is three 3 DP size so from uh in the height and the width as well and as you guys see we can give it a custom width so let's say width that is 200. DP and the height can be 100 and let's say 40. DP and if we're on the app it's like that this is 200 DPS wi and 140 DP height now let's just fill the max with so we can experiment more stuff and see them and if we onun the app now it fills our Max width and it has 140 DP height and then right here we actually have more stuff to see let's start with the horizontal uh I mean the vertical ones we set now Center virtually but as I said we have different ones so we can actually put them to the bottom again so we sew that with a common and we can do that as well with a row so we can alignment to the bottom of our row and actually we have different ones you can experiment them as you as you want we have top bottom I mean end bottom but now let's just go for Center vertically and for the horizontal Arrangement now we have actually even more ones we have these clear ones like and Center bottom so if we give it and they would just be arranged to the end of our row so all the way here as you can see now the are at the end but the ones that are not clear to you maybe are these Tre ones space if l space between and space around so let's first go for space evenly what will happen now is that they will have an even space between them and to see that clearly let's actually have a third button right here like this and let just say click one to have some space click two and click three now we are using space evenly at the horizontal arrangement and as you can see they have an even space between them so this space is the same as this one the same as this one and the same as this one that's why we would use space evenly if we want to have our items have an even space between them and this actually works the same for a Col so if we use a common we just need now to swipe these and then they will have an even space vertically like this so this one and this one will have an even space between them and then the third one and the fourth one and so on that's why I would use space evenly and then the other one we have is space between and this one will just push them away from each other so if we run the app as you can see it pushes them away from each other as much as possible so we have as much as possible space we can have right here and if we remove one of these buttons we can see that even clearly as you can see now they are away from each other as much as possible that's why we would use space between to push them away from each other and the same works for a Col so let's bring that button back and now the last one we have here is space around this one may be a little bit tricky but let's actually see it and see what it does right now What's Happening Here is that this space for the last item and the first item is actually help the space that we have between the items so to see that even clearly let's use a colon because it's bigger and we can uh see that in a clearer way so let's just delete these and for the horizontal alignment let just say C horizontally and vertical Arrangement let's say Arrangement dot space around this one and then we want to fill the max size because now we only have this 140 DP height and we don't want that let's fill the max size now and run the app it is running now and what's going on here is that this space at the start and at the end of our colum either we are using a column or a row will be half as space as the space we have between the components here so that's what space around means it's literally this space is as half as this space here that's what space around mean so now we saw Commons and rows and now let's go to see a box which is another container for our composed components and now we can't actually arrange horizontally or align uh vertically or anything like so from here but now if we just run the app we see that nothing as well happens all the buttons are just at the top start here which is what we don't want but what we can do here is that if we go to our first button and arrange this a little bit we can have now a modifier here so we can pass a modifier to our button and align it as you can see and we can use different alignments so let say align dot for example bottom center and if we're on the app I I got an error here let me just clean this if I run the app now and as you can see now our button is at the bottom center because we aligned it to be at the bottom center and we can do this for the rest of the botton uh the buttons so we just paste these modifiers for the other ones and then for the second one let's say align dot uh for example Center end and then for this one let's say top Center for example like this and if we onun the app we see that now they are aligned uh freely as we want them the first one is at the bottom center as we have here the second one as Center end like this the third one is at the top center right here and the other ones that you can actually experiment by yourself and see how they work so this is it actually for this video we've seen how we can online and arrange components inside compos screen using a row and the common in the box and we also saw uh what a modifier is how we can use it to actually uh give different sizes for our components and of course these modifiers can be applied to any composable since a box is a composable a button is a composable and believe it or not a text is as well a composable so we can just apply this modifier to it like this we can literally do that because the text is as well a modifier and any composable can take a modifier in the next video we'll actually see this modifier in more details and see how we can use it in different ways because there is a lot more to see with these modifiers so if you like what I'm doing don't forget to subscribe and leave a like to this video see you in the next video and bye

Channel: Ahmed Guedmioui

Views: 666

Keywords: android studio tutorial for beginners, android studio project, android studio app development, android studio app, android studio app project, kotlin android tutorial, kotlin tutorial, kotlin multiplatform, kotlin full course, jetpack compose tutorial, jetpack compose android, jetpack compose mvvm, jetpack compose state, jetpack compose viewmodel, jetpack compose vs xml, jetpack compose app, api key, jetpack compose animation

Id: sqjoKGzV2MM

Length: 15min 51sec (951 seconds)

Published: Sat Feb 03 2024