Position views with LinearLayout - Android Tutorial

- [Instructor] LinearLayout was one of the first view groups available in Android. Although it's one of the legacy layouts, it can be useful in creating simple user interfaces. LinearLayout is a view group that aligns all children in a single direction vertically or horizontally. You can specify the layout direction with its orientation attribute. In this example, we have a LinearLayout that is set to a vertical orientation. The TextView is placed directly above the button. Whereas in this example, we have a LinearLayout that is set to a horizontal orientation. The TextView is placed directly next to the button. And even if we add more views to the LinearLayout, all child views will be stacked one after the other. So a vertical list will only have one child per row no matter how wide they are, and a horizontal list will only be one row high. Let's move over to Android Studio to create a few LinearLayouts of our own. Here in Android Studio, we're starting with an empty layout file composed of only the constraint layout parent. We're going to switch over to design view in order to add a LinearLayout. To do this, we'll want to go to the palette and then look for Layouts. If we expand this a bit, you'll see that there are actually two separate LinearLayout items, but there's only one LinearLayout class. The palette breaks it out into two configurations: the vertical one for positioning views one on top of the other, and the horizontal layout for positioning views side by side. We're going to start with the vertical orientation. So we'll click on Vertical, and then drag this over to our UI. Now, since we're inside of our constraint layout, we'll want to constrain our LinearLayout to all sides of its parent. And we can do that by highlighting over the circles and just dragging them to the edges. And one more here at the bottom. Now it's fully constrained. Next, let's add a few views to this LinearLayout. We'll start by going to Common, and we'll add in a TextView, then we'll add in two buttons. So just dragging them right over from the palette. Now what you notice is that each of the views we've added are placed one right after the other. The next thing we want to do is to modify the way that the elements appear inside of the LinearLayout. To do this, we're going to modify something called the layout weight. So let's open up the Attributes pane, we'll click on our TextView to start, and then here for layout weight, we're going to set the value to one. Let's see what happens. Whoa, notice how now the TextView is taking up most of the available space inside of our LinearLayout. The layout weight attribute assigns an important value to a view in terms of how much space a child view should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. The default weight is zero, and so that's why the TextView takes up most of the space. Let's add layout weight to the other views to see what happens. So now we're going to select our first button and we'll change the layout weight to one. And then we'll do the same thing for our second button setting the layout weight to one. What do you notice? All of the views are now evenly distributed. Now let's do one last thing. We'll choose our LinearLayout from the component tree, then let's right click, choose LinearLayout, and convert the orientation to horizontal. Now all of our widgets are aligned horizontally, but they're still evenly distributed. Let's take a quick look at the XML to see what we've created. We'll go back to the code view, and inside of our constraint layout, we now have this LinearLayout that contains a TextView with a layout weight of one, a button with the layout weight of one, and a button two with the layout weight of one. Constraint layout can achieve the same configuration, but it just requires a bit more code. LinearLayout is easy to use and does the job with less code for very simple layouts. As your layouts become more complex however, you'll want to use constraint layout as its more performant and optimized to make the most of lower end Android devices.