WEBVTT 00:00.410 --> 00:01.510 Welcome back. 00:01.520 --> 00:04.040 In this video, we'll learn about layouts. 00:04.070 --> 00:12.440 A layout refers to the XML files that define the structure and appearance of user interface elements 00:12.440 --> 00:14.120 for an Android app. 00:14.150 --> 00:20.810 Layouts play a crucial role in designing the user interface of an Android application. 00:20.810 --> 00:28.670 They allow you to arrange and position various UI components such as buttons, text views, images and 00:28.670 --> 00:31.920 more within the user interface of the application. 00:31.940 --> 00:40.940 Layouts serve as blueprints for how the user interface should be organized, and they help in achieving 00:40.940 --> 00:47.690 a consistent and visually appealing design across different devices and screen sizes. 00:47.720 --> 00:56.270 All elements in the layout are built using a hierarchy of view and viewgroup objects. 00:56.300 --> 01:04.890 A view usually draws something the user can see and interact with, such as text, view, button, edit, 01:04.920 --> 01:05.670 text and so on. 01:05.700 --> 01:15.480 Whereas a viewgroup is an invisible container that defines the layout structure for view and other Viewgroup 01:15.510 --> 01:16.320 objects. 01:16.350 --> 01:25.140 The view objects are usually called widgets and can be one of many subclasses such as button or text, 01:25.140 --> 01:27.540 view or image and so on. 01:27.570 --> 01:36.270 The viewgroup objects are usually called layouts can be one of many types that provide a different layout 01:36.270 --> 01:41.630 structure such as linear layout, relative layout, constraint, layout, and so on. 01:41.640 --> 01:42.720 Let's move on. 01:42.720 --> 01:45.120 How to create the layouts. 01:45.150 --> 01:54.240 Each layout must contain exactly one root element, which must be a view or viewgroup objects. 01:54.270 --> 02:03.150 Once you've defined the root element, you can add additional layout objects or widgets as a child elements 02:03.150 --> 02:07.170 to gradually build a view hierarchy that defines your layout. 02:07.200 --> 02:12.840 For example, this is a linear layout that contains text view and the button. 02:12.840 --> 02:14.340 This is the text view. 02:14.370 --> 02:21.330 This is the button, this is the opening tag and where we define the attributes of this linear layout. 02:21.330 --> 02:25.170 And this is the closing tag of the linear layout. 02:25.170 --> 02:33.750 So again, guys, it's very important to note each layout file must contain exactly one root element 02:33.750 --> 02:39.000 which is linearly out, relatively out, Constraintlayout, framelayout and so on. 02:39.000 --> 02:48.030 Layout attributes every view and Viewgroup object supports their own variety of XML attributes. 02:48.030 --> 02:52.080 Some attributes are specific to the view object itself. 02:52.080 --> 02:59.490 For example, text view supports the text size attribute, but these attributes are also inherited by 02:59.490 --> 03:03.870 any view objects that may extend this class. 03:03.870 --> 03:11.550 Some are common to all view objects because they are inherited from the root view class objects like 03:11.550 --> 03:14.250 the ID attribute id attribute. 03:14.250 --> 03:23.520 Any view object may have an integer ID associated with it to uniquely identify the view within the tree 03:23.520 --> 03:26.840 and we worked with the ID attribute before. 03:26.850 --> 03:30.060 Now let's move to the layout parameters. 03:30.240 --> 03:39.750 XML layout attributes named layout underscore something Define layout parameters for the view that are 03:39.750 --> 03:43.940 appropriate for the viewgroup in which it resides. 03:43.950 --> 03:49.470 For example, layout underscore width and layout underscore height. 03:49.500 --> 03:58.230 All view groups include a width and height parameters and each view is required to define them. 03:58.230 --> 04:03.930 Many layout params also include optional margins and borders. 04:03.930 --> 04:12.450 We saw in the previous examples and videos we use the Wrapcontent and Matchparent wrap content tells 04:12.450 --> 04:21.660 your view to size itself to the dimensions required by its content, while Matchparent tells your view 04:21.660 --> 04:26.580 to become as big as its parent view group will allow. 04:26.610 --> 04:30.390 One last note to mention is the layout position. 04:30.420 --> 04:35.010 The geometry of a view is that of a rectangle. 04:35.040 --> 04:44.070 A view has a location expressed as a pair of left and top coordinates and two dimensions expressed as 04:44.100 --> 04:45.120 width and height. 04:45.150 --> 04:49.380 The unit for location and dimensions is the pixel.