Rows, Columns & Basic Sizing - Android Jetpack Compose - Part 2

hey guys welcome back to a new video in this jetpack compose playlist i am in an empty android studio project here in an empty compose project in canary android studio so if you don't know how to set that up then please watch the previous video in this playlist other than that in this video i want to talk about rows and columns and a little bit about sizing so just increasing the width and height of our rows and columns and our elements but let's actually go one step at a time what i want to show you first is in the last video you saw saw me how i made such a text here um let's import that from [Music] this first one last video you saw me using this text composable and writing something like hello here but what actually happens now if we use another text down here so let's write world and if we launch this app and to check our emulator you can see jetpack compose places these texts on top of each other by default so that is important to know that it doesn't place them one on top one on the bottom it doesn't place them next to each other it stacks them basically and this is of course not what we want here and the solution to this is either a row or a column so there is a composable which is called column we need to import that we could specify some extra options here which we don't want yet and then we just take these two texts and place these into that column if we now relaunch that and check our emulator then you will see now these items these texts are displayed on top of each other because we chose a column based layout here so these items are placed like that so if we put in more items here in this column block then these would just be placed below this world and so on and so forth and you probably already guessed it what happens if we choose row instead of a column here if we relaunch this now then you'll see now a row will just place these texts next to each other so if you come from android xml layouts then what rows and columns here do is just the same as we could do with a linear layout in xml but in xml we usually didn't use linear layout because um with that we needed to nest our layouts pretty deeply if we have a more complex layout and we instead use constraint layout for that but jetpack compose actually handles all this nesting of layouts much more efficiently so here it is totally fine using rows and column based layouts but there's a lot more cool stuff we can do with these rows and columns i'll swap this out for a column again like this and as you might have noticed already here we can actually put in some extra options for that column and that is what we want to do now if we press ctrl p that was ctrl o ctrl p um we can see there's quite a lot of stuff we can put in here in these parentheses what i'm interested now to show you is this vertical arrangement and horizontal alignment let's start with horizontal alignment oops this one we can set this to alignment and you can see either center horizontally and or start so let's set this to center horizontally here it's not important to understand the difference between alignment and arrangement and for that we need to know that each column and each row has a main axis and a cross axis so the main axis is always the axis in which new items are basically stacked so if we take a look in our emulator that is still a row here for a row the main axis is the horizontal axis because that's the direction in which we basically put in our items and the cross axis for a row is the vertical axis because you can think of that like as if this road was a street and if you want to cross that street then you would go that direction and if you would drive that street then you would go that direction so driving on that street is the main axis and crossing the street is called the cross axis and if we take a look at our column here there our axes are basically swapped so for a column these texts are basically stacked on top of each other so this one is on the top and this one is at the bottom so in this case the street would go from top to bottom because this is the direction in which our items are stacked and the cross axis for a column would be the horizontal axis so with horizontal alignment and vertical arrangement we can just position these items and align these in our column or row so if we would launch this app right now and take a look here in our emulator then you will see nothing really changes so why is that the reason is that by default compose will make these columns and rows and any other composable only as wide and as high as it needs to be and to actually visualize that a little bit easier we can add what is called a modifier i won't go deep into modifiers here in this video this will be the topic of the next video but it will help us to understand this alignment here and it will help us to size our our containers our columns and rows um we can set the modifier here to modifier import that dot background and with that we can basically give our column a background color we can choose color dot green for example make sure to choose this green from compose with a capital g and the rest in lower letters not this green here and then put that into the next line rearrange this a little bit like this so if we now relaunch the app and check the emulator you will see our column now has a green background and you will much better see now why our centering didn't work because it actually does center our items but because our our columnar box here is only as wide as this green color goes we don't really see that these items are centered because they only take up as much width as they really need so what we can do to fix this is we can go back to android studio and also use our modifier to actually give our our column a width and a height value that we can choose so that it ignores the default behavior that it only fills as much width and height as it needs and instead he uses our height so we simply write dots fill max size and well it actually already says what it does it will fill all the space there is so if we relaunch this now and check this emulator you can now see well the column now fills our whole page because we set the modifier here to fill max size and now because the the whole page is of course wider than our texts are these are actually centered horizontally because we set horizontal alignment to center and as i already said when there is horizontal alignment we have vertical arrangement so that now arranges our items along this column's main axis so in vertical direction and here we don't set this to alignment dot something instead we use arrangement dot something and you can already see we have a lot more options here how we can actually arrange these items for alignment we only had three so we could set these to the start so that would just put these to the left of our column we could set these to the end that would set these well to the end to the right side of our column or what we chose was to center these but for arrangement we have a lot more let's set these to bottom for example and relaunch our app and just see what happens so check our emulator and well now you can see all of our items stick to the bottom because the arrangement is now for the column the the y-axis the the vertical axis so we now set that to bottom so all of our items will stick to the bottom but as you saw there are actually a lot more values we can choose from very interesting are these space around space evenly and space between values because we didn't have these for alignment let's choose space between and relaunch the app then you can see now hello is on top of our page and world is on the bottom so what space between does here is it will just push these items um away from each other basically so there is the maximum available space between them and i think to better show you that we can actually add another text here um let's just write hello again relaunch the app and then you can see that this middle text will now stick to the middle of our page and these other texts will stick to the top and the bottom so that there is the maximum available space between each item then what else do we have here we have space evenly let's relaunch the app well that will arrange these items like this so what it will do is it will give each space between each item the same height in this case so this is exactly as as high as this as high as this and this so each space just fills the same height in this case but then we also have space around which is similar to space evenly just with a little difference let's launch our app here again see what this does you can see it looks similar as space evenly but this space is actually not as high as this space so what space around will do is it will just give each item the same space but the two outer items um only have half that space that is in between two different items um so that might be a little bit confusing now so this space here is exactly half as high as this space and as this base so that is how these arrangements work basically and of course if we would change this to a row now so we have a row based layout you can see it doesn't know these attributes because as i said for a row these two axes are swapped so that means for a row what is the horizontal alignment for a column for the row that is actually the horizontal arrangement because items are arranged horizontally in a row and what is for a column the vertical arrangement is for a row the vertical alignment and we also need to swap these two values here so put the this one here and this one here and of course when we have a row we can center horizontally with the alignment value instead we need to swap this out for a center vertically like this and if we now relaunch the app and see how that looks like then well now these are centered vertically because we set the horizontal arrangement to of course the the vertical alignment to center vertically so these are vertically centered along the rows cross axis so the vertical axis and in horizontal direction we now have this space around value set so it is actually the same as we had for the column just that the space around now refers to the horizontal axis so these are just super important to understand this arrangement and alignment because you will need these two all the time when creating layouts with compose as last i think for this video i want to show you a little bit more about the size modifiers we can choose from here so right now we only choose fill max size which will well fill all the size there is but we can also set our own size or we could even set a fraction here so as you can see we can set a parameter here by default that is set to one so it will fill 100 but we could set this as well to 0.5 f to just fill fifty percent of our screen if we check back our emulator then you can see it will now only fill fifty percent of our width and fifty percent of our height and these things were actually really annoying to use when it came to xml layouts because to set percentage widths and percentage heights we basically needed to use a constraint layout with guidelines and set the guideline to that percentage and constrain the views to it and here we can actually just use that with any view and that is super cool in my opinion but if you actually don't want to choose a fractional width and height here then you can also remove this and just directly set the width or the height here so let's say the width the width is let's import that alt enter the width is some amount of dp units here so here we can also just set this width to an amount of dp for example 200 dp and we don't write dp directly afterwards as we did in xml instead we write 200.dp so dp is an extension here and we simply import that and then we could for example set the height to let's say 300 dp if we now launch our app again then you can see our container our column or rather row here is exactly 200 dp wide which is kind of the middle here if we set this to 300 to show you that better and then you will actually see that we can give our containers our columns are rows custom amounts of width and height and if you for example would like to set the height to a fractional unit and the width to a dp unit then you can also set the height here to fill max height so we chose max size which referred to both the width and the height but we can also use these individually so we can set the width to 300 dp and we can then fill the max height and set this to a fraction of 0.7 f for example to fill 70 of our screen height check back here and you will see this is exactly what it will do so this green container is now 70 of our screen high and 300 dp wide and that is actually everything i wanted to show you in this video in the next video we will dive deeper into these modifiers here because these have so many functions we can use to modify a composable so this modifier can be applied to any composable and yeah there's just a lot more to explore than just this width height and fill mag size functions and this background function of course so i hope you will keep watching this series if you're looking for more advanced android courses check out the first link in this video's description which will lead you to my website where you'll find more advanced android courses which are premium so paid which is also a way how you can support me and my work and this will help you to bring your android skills to the next level so i wish you an awesome day see you next video bye bye [Music] [Music] you

Channel: Philipp Lackner

Views: 124,088

Keywords: android, tutorial, philip, philipp, filipp, filip, fillip, fillipp, phillipp, phillip, lackener, leckener, leckner, lackner, kotlin, mobile, jetpack, compose, android studio, canary

Id: rHKeRWK3zL4

Length: 17min 24sec (1044 seconds)

Published: Mon Apr 05 2021