Rows and Columns - Jetpack Compose

uh hello there and welcome back to my new video in this video i'm going to show you how to use a columns and rows with a jetpack compose and in the previous video we have written our first composable function and now it is time to get introduced with some layout composables which will allow us to place its children in a vertical or a horizontal orientation now in the traditional view system we have a different kind of layouts like a linear layout constraint layout frame layout and so on while with the jetpack compose it's a little different so the main layout composables that we have are a colon and row and those two composables are very similar to the linear layout which we have in our view system so a column composable function will add all its children composables in a vertical orientation while a row will add all its children composables in a horizontal orientation okay so enough theory let's see some practical examples so here i have created the one a simple project using a composable activity and this is how our main activity looks by default so we only have a one composable function which we're going to remove now because we're not going to need that at this point okay so let's just remove that from here and here all right so inside our default preview function here we're going to write some code and then we're going to preview that ui right here on the right side okay so first here i'm going to add one layout composable function called the column okay so in this documentation it says that uh it's basically a layout composable that places its children in a vertical sequence and also there is another layout composable that can place all its children in a horizontal sequence which is called the row okay for now we're going to experiment with a column so let's add this composable function all right and inside this column i'm going to add one more predefined composable function which comes with a jetpack compose library and that function is called a surface and inside this surface composable function we can also add some other composable functions as well and this surface accepts multiple parameters and click shortcut ctrl p so here we can see that we can add a modifier shape color content color border stroke elevation so here for now i'm going to specify a modifier so a modifier is one of the most important objects or properties which we can use on our composables and with the modifier we can basically modify many composable properties so here let's call a modifier and we can also set the width and height of our composable and now i'm going to specify here the first width so let's choose the width and here i'm going to specify let's say maybe 200 dp so dot dp all right next here i'm going to also specify a height so let's just call here a height and for the height we can set let's say maybe 50 dp alright so now our surface will have the width of 200 dp and height of a 50 dp and after a data modifier we want to add one more uh parameter here and that is a color and for the color of our surface i'm going to select color primary so we can use a material a theme object and from here we can call our colors then here we can select the primary color and it's always a good practice to choose colors from this material theme because that way you can adapt your application with dark and light mode very easily and you're going to see some more tutorials about theming in a jetpack compose for now let's just leave that as it is all right so now inside our surface we're not going to add any element we're going to just use this surface so let's just build and refresh our preview so we can see how this surface will actually look like in this preview screen on the right side okay so there it is so this is how it looks like so it's basically a rectangle with a width of 200dp and height of 50dp and now to see this surface even better on our column i'm going to add one parameter and that is a modifier as well so let's call a modifier and here i'm going to call a fill max size so basically this fillmax size function from our modifier will expand our column to the full width and height of our parent and in this case the parent of this column is our composer test theme which is basically our whole screen okay so now let's build and refresh and see what happens okay so now as you can see this column have a fill the full height and width of our parent which is the whole screen okay and our surface is only a small part of this screen okay and before we continue exploring our layout composable column let me just add or copy and paste this surface a few more times down below for example three or four times okay so let's just build and refresh to see how our screen now will look like and after that we're going to create a new composable function where we're going to store this surface for now let's just leave that as it is and here as you can see on our screen now we have a multiple surfaces so we have four different surfaces right here and each one of those uh has the same width and height okay so so basically all those surfaces are placed below one another and the reason why is because we are using a column which will basically set all our composable functions in a vertical orientation okay so now let's explore our column furthermore so now let's hit here a control p to use this a shortcut so we can check out all the parameters of our column so the first parameter of this column is a modifier then we have here a vertical arrangement then we have a horizontal alignment okay and when we are using row we're going to see here a vertical alignment and horizontal arrangement so it's a little bit different between a column and a row and now let me just use here a horizontal alignment so let's add here a comma then a horizontal alignment and here we can call alignment center horizontally for example so now let's build and preview our application here to see how now our screen will look like so now as you can see all our elements inside the column are centered horizontally okay and of course we can center those elements inside the column to a start or to an end and the start is a default value for our column so let's put those elements on the end and let's build and refresh here okay so now you can see that all elements inside our column are placed at the end and that's how this horizontal alignment is actually working so after that let's check a vertical arrangement okay so let's call arrangement and here we have a few options to choose so we have a top space between bottom center space around and space evenly so first we're going to check this center because the default value here is a top and as you can see all our elements inside the column are at the top of the column so let's choose here the center and let's build and refresh this uh preview okay so now you will see that those elements will be placed on the center of our screen but vertically okay and of course we can set all those elements on the center of our screen by modifying a horizontal alignment so our center horizontally okay let's build and refresh now and there it is and now as you can see we have placed all those elements on the center so on the center vertically and horizontally okay now let's explore a different kind of a vertical arrangement so here we have a multiple option and you already saw how this center vertical arrangement is working and you can also guess how this is a top and bottom vertical arrangement will work but now let's try those three so space evenly space around and space between so first let's choose a space between okay and let's build and refresh so as you can see this space between i will place our children such that they are spaced evenly across the main axis without the free space before the first child or after the last child so here we can see that between each and every element or composable function inside our column we have a blank space and if we reduce the height of our column then the space between those elements will shrink as well so let's check a different kind of arrangement here so we have also space evenly and this will place our children such that they are spaced evenly across the main axis including the free space before the first child and after the last child so let's build and refresh to see how this option will work with those elements so now you can see that here we have also added a blank space before the first element and after the last element as well and here we also have an even or the same blank space or the size between each one of those elements and before the first and after the last as well and finally here we have one more so we have a space around and let's build a refresh to see how will this actually work with our uh composables insider column okay so now uh basically this will add the space before the first composable and after the last composable but as you can see here the space between each one of those elements is the same but the space before the first and after the last element is not the same as the one between those elements okay so that's the main difference between those vertical arrangements and i hope that you have understand how this arrangement and alignment is actually working with the column so it's basically very easy okay so now i'm going to show you how to use the wave attribute with the composable functions inside the column so first i'm going to remove those two surfaces and i'm going to leave only those two okay and i can also remove this vertical arrangement i don't need that at this point okay so let's just build and refresh this okay so there we go so now we have only two surfaces and they basically look almost like a merged elements but now let me add here on our modifier one more element or a function called the weight and here we can specify a float value and let's say i want to specify here a number of uh 3f and down below i want to specify a weight of maybe one f okay and we can also remove here the height okay and let's build and refresh that okay so now you can see that we have uh filled the full height of our parent which is the column and now let me just change here the color here to maybe secondary okay so now we can see a different colors so here the first surface has this green color and this second surface has this color primary so the first surface has a weight of a 3f while the second one have a weight of only one so when we specify here those values three and one so three plus one is four and now we can basically split this apparent which is the column in a four different sections okay and now if our screen contains the four sections in total then this first element will take the three sections of this parent while this second surface will take only one section of the whole parent okay and that's basically how this wave element is working you can of course set here the same number as down so we can set here three and three and now they will basically be even okay and now we can change this to maybe two or maybe one and as you can see now that's how you can basically change their uh size with this weight function okay so it's pretty much convenient and now let's just copy this surface and let's create a new function new composable function so we don't have to repeat this surface two more times so let's create here a new composable function so let's name this function custom item okay let's paste this surface inside so as you can see when we place this surface inside a new function without the column then we will not be able to use this weight function okay and to fix that we need to call this column scope or basically create an extension function on data column scope so let's hear a call a column scope dot custom item so that's an extension function on our column scope and now you will see that we can use this weight okay and now of course instead of a hard coding this value we can add that value right here so weight of a type float and here we can also add a color of a type color and now we can here at that weight and down below we can add here a color from the parameters of this function and now let's remove those two and here we can also call this a custom item function so custom item let's specify here the weight maybe uh 3 f and the color can be maybe a material theme dot colors dot secondary and i can also here specify a default value for the color so we don't need to specify always that color so let's here at the default value of material theme dot colors dot primary so that's going to be a default color for this surface all right and down below we can just call again a custom item with one f and here we don't need to specify the second parameter because we have specified here a default value and if we don't specify here data second parameter then this default color will be used so now let's build and refresh this preview to see how will that look like okay so there we go as you can see everything works perfectly and we have created an extension function on our column scope because inside this function we are not going to use that column as a parent of our surface and to actually use this away the function we're going to need to call an extension function on a column scope so that's an important for you to know all right so now you have seen everything you need to know about the column of course you can set some different values for the width and height of this column so we can set some a fixed value for example let's say maybe height can be 500 dp so it doesn't have to fill the whole parent okay and now i can call this column uh here as well so we can run our app and check it out and i'm going to also here add one more uh function background and here i'm going to specify a color dot light gray for the background of this column okay let me just run the app so we can check that out on our android emulator so now as you can see our column will take only the height of 500 dp and its width will be basically 200 dp because that's the width of those two custom composable functions inside our column and here we can also increase here uh the width of this uh column to maybe let's say 500 dp as well so let's run our app again to see how well now that look like okay so now as you can see the width of our column is a 500 dp and the background color of our column is a light gray so you can see that right here okay and basically there are more options which we can modify through this modifier so it's a so it's a very useful object to customize with basically each and every composable function out there and now that you have seen how to use a column i'm going to show you how to use the row and for the row we're going to just use this preview okay now i'm going to change the width of this custom item to maybe uh let's say 50dp and down below for our column we can add the fillmax size so we can fill out our whole screen again okay so we also need to rename this column to row now because now we're going to use a row and the row is basically a layout composable in a horizontal orientation instead of a vertical orientation like the column and here as you can see we have some error so a row does not accept the same parameters as a column so instead of a horizontal alignment we have a horizontal arrangement and instead of vertical arrangement we have a vertical alignment so let's here replace this horizontal alignment with a horizontal arrangement okay and let's hear a user arrangement start okay and here as you can see we cannot call our custom item function because this custom item composable function is an extension function on a column scope but now we are using row and row is using row scope so let's rename this to row scope okay and now we can use those items and let's rebuild our preview here okay so let's just replace this column here as well with the row and let's uh copy and paste this horizontal uh arrangement from down below okay so now it will build uh successfully uh okay so here we also need to add the height of 50dp so we have forgot to do that all right and now as you can see our items inside our row so we have two custom items they are placed in a horizontal orientation and the first one has a weight of 3 while the second one has a weight of 1. so basically the row is the same as a column and the main difference is the orientation of our composable functions inside those layout composables and of course with the row we can use the vertical alignment so we just use a vertical alignment and here we can just uh call uh for example alignment center vertically and we can center those uh two uh custom items on the center here vertically okay okay so basically that's pretty much it for rows and columns so i hope that this video tutorial was a fun and that you have learned a lot by watching me so be sure to comment down below if you want to see more videos about gel per compose like this video if you find it helpful of course and see the next one

Channel: Stevdza-San

Views: 27,588

Keywords: jetpack, compose, jetpack compose, android, development, android studio, kotlin, declarative ui, ui, function, composable, surface, rows, row, columns, column, layout, vertical, horizontal, orientation, sequence, column scope, row scope, scope, arrange, align, alignment, arrangement, how to, guide, tutorial, modern, dev, code, coding, build, block, modifier, background, color, width, height, fillmaxsize, size, max, fill, weight, center, center horizontally, vertically, horizontally, center vertically, space evenly, around, between

Id: kg7EWKOberk

Length: 17min 49sec (1069 seconds)

Published: Fri Jun 04 2021