WEBVTT

00:00.950 --> 00:02.000
Welcome back.

00:02.000 --> 00:05.330
In this video we're going to learn about boxes.

00:05.330 --> 00:11.600
The composable counterpart for a framelayout is called a box.

00:11.600 --> 00:20.480
Just like Framelayout, it's used to display children relative to their parents edges and allows you

00:20.480 --> 00:22.100
to stack children.

00:22.100 --> 00:30.980
This is useful when you have elements that need to be displayed in those specific places, or when you

00:30.980 --> 00:36.800
want to display elements that overlap, such as dialogs.

00:36.800 --> 00:40.220
Let's create a new composable function.

00:40.220 --> 00:50.570
I'll name it as my box, and inside this function I'm going to create a box and select the composable

00:50.570 --> 00:55.610
and here modifier dot fill maximum size.

00:55.610 --> 01:00.230
Inside the box I'm going to copy these three texts.

01:03.470 --> 01:11.420
If we run our application and call my box inside the Setcontent, we will get this output.

01:11.420 --> 01:16.670
The three texts are overlapped, so this is a big problem.

01:16.670 --> 01:27.220
We need to specify the position of these items here, I'm going to use inside that text I'll set a modifier.

01:27.220 --> 01:36.670
So here modifier modifier dot align method I'm going to use alignment dot top start.

01:36.670 --> 01:48.280
For the second text I'm going to use another modifier dot center and the third text is modifier dot

01:48.280 --> 01:50.470
align bottom.

01:50.470 --> 01:55.360
And let's run our application and see the change.

01:55.360 --> 01:58.600
You can see this is our application.

01:58.600 --> 02:06.220
The first text is Top Start which is the top left the download master coding application.

02:06.220 --> 02:14.350
The second text is center and from play store bottom and bottom right okay.

02:14.350 --> 02:22.210
So the text fields appear diagonally across the screen with the first one at the top left corner, the

02:22.210 --> 02:26.800
second one in the center, and the last one at the top right corner.

02:26.800 --> 02:36.610
Using a box is really useful in specific situations and they make positioning elements incredibly easy.