WEBVTT 00:00.890 --> 00:01.940 Welcome back. 00:01.940 --> 00:05.690 In this video we're going to learn about arrangement and alignment. 00:05.720 --> 00:13.850 Jetpack compose offers several options for aligning and arranging your UI elements within containers 00:13.850 --> 00:16.820 like row, column, and box. 00:16.850 --> 00:25.250 Understanding these options empowers you to create visually appealing and intuitively outs for your 00:25.250 --> 00:26.270 applications. 00:26.300 --> 00:28.340 Let's start with the arrangement. 00:28.370 --> 00:37.100 Arrangement is used to control the spacing of children in the main axis, so you will find in column 00:37.130 --> 00:43.430 a vertical arrangement param and in row a horizontal arrangement param. 00:43.430 --> 00:51.590 Let's start with the row horizontal arrangement in row specifies the horizontal arrangement of items 00:51.590 --> 00:53.060 within the row. 00:53.060 --> 01:01.380 It can be set to start and center space between space evenly or space around you. 01:01.380 --> 01:06.660 Use arrangements to position children relative to one another. 01:06.660 --> 01:12.900 The possible horizontal arrangements are space between the row. 01:12.900 --> 01:22.980 Composable places each child within an equal amount of space without calculating in spacing before the 01:22.980 --> 01:27.150 first child or after the last child. 01:27.180 --> 01:31.980 Space evenly similar to space between the row. 01:31.980 --> 01:41.940 Composable places the children with with an equal amount of space, but this time it includes starting 01:41.940 --> 01:52.620 or ending spacing space around the row, composable places children just like with space evenly, but 01:52.620 --> 01:58.480 reduces the space between consecutive children by half. 01:58.720 --> 01:59.710 Centre. 01:59.710 --> 02:02.080 Start and the row. 02:02.080 --> 02:10.210 Composable places children at the centre start or end without space between them. 02:10.210 --> 02:13.030 This is the arrangement in row. 02:13.030 --> 02:18.010 Now let's learn about the vertical arrangement in column. 02:18.010 --> 02:26.020 Vertical arrangement defines how the vertical space available in the container is distributed among 02:26.020 --> 02:26.980 its children. 02:26.980 --> 02:35.680 So the vertical arrangement parameter specifies the vertical arrangement of items within the column. 02:35.710 --> 02:46.000 It can be set to the top, which is default the bottom center space between space evenly or space around 02:46.030 --> 02:47.200 the arrangement. 02:47.680 --> 02:58.480 Top places all children together at the top of container with any remaining space at the button arrangement. 02:58.660 --> 03:06.880 Button places all children together at the bottom of the container, with any remaining space at the 03:06.880 --> 03:07.630 top. 03:07.660 --> 03:17.650 Arrangements center vertically centers all the children within the container, with any remaining space 03:17.650 --> 03:21.100 equally distributed above and below them. 03:21.130 --> 03:31.030 Space between distributes space evenly between the children, with equal padding on the top and bottom 03:31.030 --> 03:31.780 sides. 03:31.810 --> 03:34.900 Now let's move to the alignment. 03:34.930 --> 03:44.320 The alignment is used to control spacing of children in the cross axis, so you will define in a column 03:44.350 --> 03:50.800 a horizontal alignment parameter and in row a vertical alignment parameter. 03:50.800 --> 03:51.970 This is the row. 03:52.000 --> 03:59.570 The vertical alignment defines the vertical alignment of items within the row. 03:59.600 --> 04:05.150 You can use top, bottom, center, or baseline values. 04:05.180 --> 04:10.070 Top aligns the children to the top of the parent center. 04:10.100 --> 04:15.740 Vertically aligns the children in the center of the parent vertically. 04:15.770 --> 04:20.180 Bottom aligns the children to the bottom of the parent. 04:20.210 --> 04:22.400 This is in row. 04:22.400 --> 04:25.790 Now let's see the alignment in column. 04:25.820 --> 04:31.970 Horizontal alignment defines the horizontal alignment of items within the column. 04:32.000 --> 04:36.350 You can use values such as start, end or center horizontally. 04:36.350 --> 04:40.490 So this is the alignment in row and column. 04:40.490 --> 04:44.960 And this is the arrangement in row and column. 04:44.960 --> 04:47.540 These are very important concepts.